My new favourite syntax highlighter: Prism!

The past few days, I noticed some parts of my code were missing in the Syntax Highlighter and that sometimes, the code wasn't shown in the highlighter at all (it was just dull text). When I edited the affected blog posts however, the missing pieces of code were there and so were the elements for the highlighter. So I figured it might have had to do something with the Syntax Highlighter.

I decided to search for a new highlighter, and came across Prism. This is a very neat highlighter, it is lightweight and extensible, offers six different styles, has various plugins and is supported by most browsers.

For my blog, I'm using the Prism highlighter with the Okaidia theme and I also included the Line Numbers plugin. 

How to use Prism on Blogger/Blogspot

First of all, I discovered that I couldn't host JavaScript files on Blogger/Blogspot. Secondly, I didn't like the idea of hosting scripts elsewhere. I tried hosting it on Google Drive and that sort of worked, but still I wanted to find an easier way.

So I checked the source of prismjs.com and its pages, searched for the scripts and found them there. Not quite sure if I'm allowed to do that... But it was easier for me and I think those will always be the most up-to-date scripts. 

This is the core JavaScript code of Prism. 

This is the JavaScript code for the line numbers plugin.

This is the CSS code for the line numbers plugin.

And this is the CSS code for the Okaidia theme.

I'm not going to provide the link to all the scripts, plugins and themes for Prism since you can probably find most of them yourself by changing the URLs a bit or by doing a search through the source code of the site. 

Now that we have the necessary files, we need to include them to the template. 

To add them, you need to edit the HTML of your template. You can do so by going to the settings of your blog, select "Template" from the left hand side navigation, and then choose "Edit HTML". 

Right before the </head> tag, you paste the following code (source of the scripts may be different depending on which plugins or styles you use):

<script src='http://prismjs.com/prism.js' type='text/javascript'/>
<script src='http://prismjs.com/plugins/line-numbers/prism-line-numbers.js' 
type='text/javascript'/>
<link 
href='http://prismjs.com/themes/prism-okaidia.css' rel='stylesheet'/>
<link 
href='http://prismjs.com/plugins/line-numbers/prism-line-numbers.css' 
rel='stylesheet'/>

Now, when you create a new blog post and you wish to add code to it, you can use the following to highlight your code:

<pre class="line-numbers"><code class="language-javascript">
// Your code here.
</code></pre>

Do note that depending on which plugins you have, you can change the class in the pre tag. You can read more about the different plugins and how to use them here. Also, depending on what kind of code you will be highlighting, you can change the class in the code tag.
To highlight CSS, use language-css class for the code tag.
To highlight HTML, use language-markup class for the code tag.
To highlight JavaScript, use language-javascript class for the code tag.

Got code that's not showing up? No problem. We can fix this. 

I noticed that if you want to use HTML code inside JavaScript (or even script tags in JavaScript), the code will likely not show. I think this might be related to HTML being stripped off. For example, see the following code:

var site = "www.prismjs.com";
var title = "PrismJS";
var text = "" + title + "";

Noticed anything strange? I surely did. I added an anchor tag to that code, yet it is not showing.
Let me show you the same code, but now I changed the "less than" character ("<") with "&lt;" and this is the result:

var site = "www.prismjs.com";
var title = "PrismJS";
var text = "<a href='" + site + "'>" + title + "</a>";

Bam! Suddenly the code works. Just to give you an idea, this is how it looks like (and how I write it in order for it to show up properly) when I edit the blog post with the code:

var site = "www.prismjs.com";
var title = "PrismJS";
var text = "<a href='" + site + "'>" + title + "</a>";

So when you use HTML inside JavaScript, or even when you use "<script></script>" tags or regular expressions, always make sure to replace the "less than" character with "<". That way, no code will be missing from the highlighter and visitors will be able to correctly copy and use your code.

All done! Let's start making more blog posts now!

Now that I finally have a syntax highlighter that does what I want it to do, I can continue writing blog posts about my SharePoint experiences without having to worry about visitors not seeing my code. ^_^

I would like to thank Lea Verou and all these people who created Prism, without them I would probably still struggle with highlighting stuff. Please do check out Prism, I highly recommend it for Blogger/Blogspot or any other site.