22 Jan 2014

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:
  1.  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.
  2. 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-->
    
  3. Click Save.
  4. 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 &lt; instead of < to prevent issues):
    
    <pre><code>
    &lt;input type="Submit" value="Submit" />
    </code></pre>
    
    to get this in the resulting post:
    
    <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>

No comments:

Post a Comment