Blog renewal and cleanup - New syntax highlighting

After switching to a more modern Blogger theme, I lost the syntax highlighting provided by Alex Gorbatchev's Syntax Highlighter, a project which is still alive and kicking but for some reason, doesn't play nice with Blogger's dynamic themes.

Researching a bit, I stumbled upon Highlight JS, and I liked its simplicity and versatily. It lacks line numbers, but as the author explains, they are not a deal breaker and the code looks very nice.

To install and use Highlight JS on Blogger, 3 simple steps are required:

  1. Go to Theme-Edit HTML and add links to Highlight JS' CSS and JS files inside <head>. For example, using CDNJS links for version 9.10:
    <link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/styles/tomorrow-night.min.css' rel='stylesheet'/>
    <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/highlight.min.js'/>
    I am using a custom style (Tomorrow Night); there are many more available on CDNJS.
  2. Add, inside the template's <body>, a call to apply highlighting:
    <script language='javascript'>
       hljs.initHighlightingOnLoad();
    </script>
  3. Gorbatchev's plugin formats using the <pre> tag. HighlighJS uses <code> inside <pre>:
    <pre>
    <code>
    //Your code here
    </code>
    </pre>
    The snippet's language is automatically recognized by HighlightJS. However, detection is not 100% exact, so it is possible to specify the language explicitly. This can be done using the class on the <code> tag. The language list is here. On the other hand, HighlightJS supports a set of "common" languages, but can support many more by manually adding them. Also, it's possible to add languages and styles yourself: see the dev docs.

Comments

Popular posts from this blog

VB.NET: Raise base class events from a derived class

Apache Kafka - I - High level architecture and concepts

Upgrading Lodash from 3.x to 4.x