A few days ago, Ahmed and I opened this site for public access. So far, I love the Ghost engine, and one of the killer features is built-in code support. Let's see how you can make them syntax aware.
Highlight.js has a great variety of themes and supports languages I haven't heard about in my life. Another cool thing, you should not worry what syntax you want to use, it does it's best to find and load the proper library.
The idea behind the Prism.js - to be as lean and as clear as possible, so if you need something - import it explicitly. If you want to highlight lines, or show line numbers, treat yourself and import a desired components. But it didn't tip the scale.
Prism won with 2 scores ahead for:
- In my clumsy hands, Prism.js shows better compatibility with the current ghost version (2.23.4 as of now) and our Casper-based theme. Highlight.js does well with the dark themes but fails the light ones (all light themes go with the right syntax on the pitch black background).
- I gave up to make custom highlights for posts through the posts injection. Yep, with Prism you can have different themes and languages for every post.
To make post looks different, like the one you read, make a few simple steps.
- In the post editor click on the gear icon in the top right corner
- Locate "Code Injection" link at the bottom of the list.
- if you want to change theme, add it to the Post Header field.
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/themes/prism-okaidia.min.css"/>
- To handle new syntax, put a source into the Post footer.
Now, add your thoughts, code, pictures and have fun.