Saturday, January 02, 2021

Abridged guide to using highlight.js for syntax-highlighting in Blogger

Using highlight.js. I am highlighting XML & Java code snippets, so the "base" version will suffice.

Setup

At Blogger, go to Theme, then select the dropdown on right of "Customise" button > Edit HTML.

Using HTML view, paste the code below under "head" tag:

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

Save the template.

Usage - Java

Just wrap content in "pre" tags with:

<code class="java">...........</code>

Usage - XML

Just wrap content in "pre" tags with:

<code class="xml">...........</code>

But, your XML content needs to be escaped (Free Online XML Escape / Unescape Tool - FreeFormatter.com).

References

No comments: