Syntax Highlighter

While writing articles I realized that I needed a syntax highlighter to make the code snippets included in the posts stand out.

PrismJS

So I looked around and ended up with Prism.Js. It is very easy to include in Hugo as it is a Js and CSS file to include in your HTML file.

After downloading the Js and CSS files I added them to my static folder under their respective locations, as shown below:

Once done you only need to add code snippets as following:

It's basically a code tag embedded in a pre tag. The pre tag here has a class of language-markup, as the code included in the snippet is HTML.

When you download the Prism package, make sure to select the languages you need. If you intend to use HTML as above you would include languag-markup in your language selection. However, you might need to select the plugin Unescaped markup as below. Otherwise your HTML code snipped might not render.

Also, make sure to follow the recommendation of putting the code in between comment tags. There should not be any space between the comment tags and the code tags. I was not able to get the snippet rendered when I added a space between the comment tag and the code tag. And for whatever reason the option to use the script tag did not work. I'm assuming it has something to do with how Hugo renders the page.