How to support Scala/Java syntax highlight

[pandaforme]

I would like to add Scala/Java syntax highlight, but I don't know how to do it.

I tried to modify assets/vendor/prism/gulpfile.js and execute gulp build, but it doesn't work...

Please give me some hints, thanks

[andrewlock]

You need to add the correct prism language .js file to gulpfile.js so looks like you were nearly there.

Update the src.js.vendor object and add the paths to your language files just after prism.js. It should look something like this:

src = {
    js: {
        fonts: [],
        main: [],
        vendor: [
            "assets/js/src/libs/subbscribe.js",
            "assets/vendor/ghostHunter/jquery.ghostHunter.min.js",
            "assets/vendor/fitvids/jquery.fitvids.js",
            "assets/vendor/reading-time/build/readingTime.min.js",
            "assets/vendor/prism/prism.js",
            "assets/vendor/prism/components/prism-java.min.js",
            "assets/vendor/prism/components/prism-scala.min.js",
            "assets/vendor/toastr/toastr.min.js",
            "assets/vendor/store-js/store.min.js"
        ]
    },
};

Then in your ghost editor you need to indicate which language to use for a block using the following syntax:

This is example code for java:
```language-java
public void method()
{
}
```

[kelyvin]

Thanks for answering @andrewlock! Yep he is correct, this should be the appropriate way to do it.

Please let me know if this worked and if so, I can close this issue.

[pandaforme]

I've tried to modify caffeine-theme\gulpfile.js and add two language files: assets/vendor/prism/components/prism-java.min.js and assets/vendor/prism/components/prism-scala.min.js, and execute gulp build.

But it doesn't work, I can't see the Home page...

I think that it may be node/npm version incompatible!? npm version is 2.15.1 and node version is v4.4.4

@kelyvin Can you offer a develop env. docker image?

However, I'm very appreciated @andrewlock/@kelyvin replys , thanks.

[andrewlock]

Do you get any errors when you run gulp build?

[kelyvin]

Building a docker image for this is a little overkill so I don't want to get into that just yet and want to focus more on helping you figure out the problem in case others encounter the same issue

When you say you "can't see the home page", does the app load but you get a blank white screen? If so, can you open up your developer tools to see if there is an error on the console? If you don't see the page load at all, make sure that Ghost is also already running as described here.

I tried to import those two JS prism libraries myself and it worked. It possibly could be the npm and node versions, my npm version is v3.8.1 and my node version is v4.4.0, but I feel that shouldn't be the issue. Can you try upgrade npm to see if that may be the issue?

Thanks!

[andrewlock]

Just for reference, my npm version is 2.7.4 and node version is 0.12.2.

[pandaforme]

I've upgraded npm to 3.9.3 and followed the instructions: https://github.com/kelyvin/caffeine-theme#first-steps.

I cloned a new caffeine-theme repo and don't modify any thing. Then executing gulp, I can't see any article and button.

error message:

If I cloned a new caffeine-theme repo and started Ghost. Don't execute gulp and access http://localhost:2368. The web page is complete.

I guess that gulp generates wrong js files...

Thanks~

[andrewlock]

Very strange, lunr.js is included as part of the ghostHunter.js library which is built in the vendor section that you are modifying. Could you post your gulpfile.js so we can take a look?

Cheers

[kelyvin]

Thanks a bunch @pandaforme for your patience and for reporting this issue. I have figured out the issue thanks to your detailed walkthrough and @andrewlock validating the issue is from ghostHunter.js.

Since ghostHunter doesn't have any bower support or release tags, we are pulling the latest from master every time. Looks like ghostHunter had a major update in the past couple of months that switches some of their implementation to use the new Ghost API, which is current unstable and in beta. As a result, one of their latest commits probably caused this issue that you are experiencing.

So to resolve this issue, I will perform a "version lock" on all of our bower packages to the latest stable versions. Unfortunately, bower does not currently support a "shrinkwrap" equivalent to npm, so this will have to do for now. I will do the same for our node modules, but I would like to do an audit of those dependencies before proceeding, so I will leave our package.json as is for now.

I have checked in the latest changes to bower.json, please pull the latest and let me know if you still run into any issues.

Thanks!

[pandaforme]

@kelyvin @andrewlock Thanks for your help, it works! I can add prism java/scala language js file.

You can close the issue~

[kelyvin]

woo hoo! Will do!

[andrewlock]

Nice detective work @kelyvin 😄

[antranthien]

Hi, I tried adding "assets/vendor/prism/components/prism-java.min.js" to the gulpfile.js but the syntax for Java code doesn't get highlighted. Did I miss anything?

[kelyvin]

Hi @antranthien, in order to take advantage of the syntax highlighting of prism.js, after you import the proper assets to the gulpfile, you have to make sure that you specify the language type of your code blocks.

For example, if you are adding a code block in the markdown editor for your new post, you have to properly define the language type after your first ``` marks. See the example below:

In the example above, I'm defining this code block as javascript, can you verify whether you are also defining your code block as java?

If this doesn't resolve your issue, then I can do a deeper dive and see what's happening. Thanks!

[antranthien]

@kelyvin : Thanks. Got it working now :)