Use highlight.js to highlight code on Blogger.com

   Find the template HTML code: Design→Theme→Live on Blog→Edit HTML, then put the codes below just before </head> (use Ctrl+F to find it.)

<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/styles/default.min.css" rel="stylesheet"></link>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>


  Use the <code>...</code> to highlight code and <pre>...</pre> to make code block.
The updated download location is in https://highlightjs.org/download/

We van use different style of highlight (demo here) by change the file name in the above block. For examplem change default.min.js to github-gist.min.css will make the highlight become githhub gist style.

Use the code below to specifiy the language. the list of supported language is http://highlightjs.readthedocs.io/en/latest/css-classes-reference.html
 

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

Finally, don't forget to escape text to html with online tool such as http://codebeautify.org/html-escape-unescape

No comments:

Post a Comment