Blog Post Syntax Highlighting For Code On Blogger

All I had to do was edit html of my blogger template design and add the following lines inside my head tag.

<link href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/styles/github.min.css' rel='stylesheet'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/highlight.min.js'/>
<script>hljs.initHighlightingOnLoad();</script>

Then for each code block entry in any blog post, I need the following.

<pre><code class="xml">
...your code here...
</pre></code>

You can find the appropriate css theme and language styles via the github sources.  Once you find a theme you like, just replace the style with what you find on github.  As noted in the instructions don't forget to include .min before .css.  Although I think the pre-build hosted cdn version doesn't have all the languages, only 22 I think as noted in the link.

https://github.com/isagalaev/highlight.js/tree/master/src/languages
https://github.com/isagalaev/highlight.js/tree/master/src/styles

Or you can compile it yourself with the build documentation.

You may also need to encode your content i.e. escape html tags.  There are many online tools that can help with this.  A bing search for html encoder will yield an encoder/decoder as part of your search result.  Another tool is from:

http://www.opinionatedgeek.com/dotnet/tools/htmlencode/encode.aspx



Reference:
https://highlightjs.org/usage/
https://github.com/isagalaev/highlight.js/