Monday, December 14, 2015

Adding Syntax Highlighting To Blogger

When I was searching for syntax highlighters I found this really cool library highlightjs.org and decided to use that instead of piggybacking on SO.



The steps
  1. Don't download hightlight.js
  2. You need to make changes to your blogger template. 
    1. Go to your blogger dashboard. ( https://www.blogger.com/ )
    2. Go to Template section on the left side bar.
    3. Backup your template
    4. There is a "Live On Blog" showing a screen of your current blog. under that, there is a "Edit HTML". click that button.
    5. hit CTRL+F and type "</b:skin>" and hit enter. 
    6. Add these lines below "</b:skin>"

      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/styles/sunburst.min.css"/>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/highlight.min.js"></script>
      

    7. hit CTRL+F and type "</body>" and hit enter. 
    8. Add this script above "</body>"
      
      <script>
      //<![CDATA[ 
        hljs.initHighlightingOnLoad();
      //]]>
      </script>
      

    9. Now, click Save Template button.
You have successfully added Highlight,js to your blog.

Use  Quick Escape tool to escape your code in HTML

Now, next time you post code, escape and enclose the code within the following html tags (please refer highlight.js documentation)

<pre><code class="html">...</code></pre>

highlight.js - Demo
A handy tool to format your sql code