Syntax highlighting for source code on Blogger 2: highlight.js
After using the excellent SyntaxHighlighter by Alex Gorbatchev for a while (see this post), I decided it was time for a change, and tried highlight.js. Here's how to set it up to work with a Blogger blog:
That's all!
- On your blog's dashboard, click Template and then Edit HTML. You'll get a warning that says that you may mess up your blog, but since you're an ace programmer anyway, you don't mind much and you click Proceed.
- Find the closing </head> tag and right above it, paste the following:
<!--SYNTAX HIGHLIGHTER BEGINS-->
<link href='http://yandex.st/highlightjs/8.0/styles/default.min.css' rel='stylesheet'/>
<script src='http://yandex.st/highlightjs/8.0/highlight.min.js'></script>
<script>hljs.initHighlightingOnLoad();</script>
<!--SYNTAX HIGHLIGHTER ENDS--> - Click Save.
- Now, to use the syntax hightlighting in your Blogger post, click HTML in the Edit Post window, and write code like this (the example is for HTML code - notice the < instead of < to prevent issues):
to get this in the resulting post:
<pre><code>
<input type="Submit" value="Submit" />
</code></pre>
<input type="Submit" value="Submit" />
That's all!
Update: to get the horizontal scrollbar if the lines are too long to fit, add the following after the <link> line above:
<style type="text/css">
.hljs {
overflow-x: auto;
}
</style>