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

Popular posts from this blog

Print a receipt using a Thermal Printer with C#.NET

Automatic redirect upon session timeout using ASP.NET MVC and Javascript

Complex Master-Detail Form using Knockout.js and ASP.NET MVC