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.
Ghost and syntax highlight is not a novelty at all. I used the same path as some other Ghost-busted bloggers have chosen. The final pretenders, with no drama, was prism.js and highlight.js. So, if you take a look into the site code, you would know who the winner is. Lake all the other syntax coloring libraries, both projects use JavaScript (I'll be doomed, if somebody uses VisualBasic for the sites), both work through code injection on the site level, and both have CDN-based sources. They handle dedicated and inline code blocks (of course you should put mixed text into the box first.)
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.
As of today, I have default Prism theme and five syntaxes: HTML/XML, YAML, Bash/shell, JavaScript, CSS. It works all across the site, just specify a language you need. For example, check my previous 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.
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/components/prism-sql.min.js"></script>
Now, add your thoughts, code, pictures and have fun.
select 'Hello world!' from dual;