My blogs being technical in nature often contain snippets of code. The old technique I was using for correctly highlighting them no longer works because the library I was using has gone the way of the dinosaurs. Thankfully, however, there is a much better (and slightly easier) way to achieve this using the highlight.js library (
https://highlightjs.org/).
Procedure:
- In your main Blogger page, from the pane on the left (which contains 'Posts', 'Stats', etc.) click on 'Theme'.
- In the frame that reloads on the right first choose 'Backup / Restore' and then 'Download theme' to save a backup of the unmodified theme before we mess with it.
- Press 'Close' to close the dialog/pop-up window and choose 'Edit HTML'.
- Before the </head> tag paste the following lines:
<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/styles/agate.min.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/highlight.min.js'/>
<script>hljs.initHighlightingOnLoad();</script>
- Choose 'Save Theme'
Note: I chose to use the 'agate' theme (CSS), there are many others. You can take a look at the available options at
https://highlightjs.org/static/demo/. To choose another one simply replace "agate" in the link with the theme you like.
Similarly, 'highlight.min.js' only supports a core of 35 common languages. To highlight other languages add additional scripts you can find at
https://cdnjs.com/libraries/highlight.js/
Example:
Now to place a code snippet in your blog simply switch to "HTML" editing (instead of "Compose") and place the snippet inside a <pre><code> </code></pre> block or simply inside <code> </code> if quoting code inline. You can specify the language inside the "class" element of the "code" block (visit the highlight.js website for more details).
To create the following highlighted python snippet:
def factorial(n):
if n == 0:
return 1
else:
return n * factorial(n - 1)
I used the following code in HTML mode:
<pre><code class="python"> def factorial(n):
if n == 0:
return 1
else:
return n * factorial(n - 1)
</code></pre>
Simple and elegant. Enjoy.
Note: To place HTML itself inside a highlighted snippet (very meta indeed, I needed it for the last section of code) you will have to escape all of the HTML. I used
https://www.freeformatter.com/html-escape.html.
