How To Format Code Snippets In Blogger Posts

At the time of writing, there is no W3C standard support for formatting and highlighting code in browsers. And since rendering is done on the client side, formatting and highlighting typically would require third party scripts to be run in the browser.

This kind of script is unlikely to come with Blogger by default or with any of the themes as formatting and highlighting is a pretty daunting task as different programming languages would require different rules and thus is better maintained in a specialized library.

In this post, I will walk you through the steps I took to add a third party code formatting and highlighting library to Blogger and enabling me to have formatted and highlighted code snippets in my blogger posts.

Highlight.js

Highlight.js is a syntax highlighting library using javscript and css that, at the time of writing, supports 185 languages and 89 styles.

I chose this library because, after a quick research, this one appears to have a comprehensive list of languages supported and a good collection of styles pre-developed. And, at the time of writing, appears to be still being maintained and updated.

Before you continue, you can take a look at their demo to see if it works for you.

Installation

A detailed usage and installation guide can be found on their website. In this post, I'll just go over the basic steps that I personally took to add their library to Blogger.

Edit HTML

In the Theme menu of Blogger, click on Edit HTML button. This will allow you to edit the HTML code of the template of the theme you are using.

Hosted Files

In the HTML editing interface, link to the highlight.js files, which brings us to another great feature of highlight.js, which is that its files are hosted. This means that users who visited another site that use the same hosted files would already have those files in cache and won't have to download them again when they visit your site.

You can still download the files and host them somewhere else. But for simplicity, I just linked to the hosted files provided by highlight.js directly.

You can find the hosted file location / download the files here.

Linking Highlight.js Files

The HTML code I used are as follows:

<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/atom-one-dark-reasonable.min.css' rel='stylesheet'/>

<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/languages/r.min.js'></script>

<script>hljs.initHighlightingOnLoad();</script>

Generally, you want to load the style sheet first, then javascript, and finally call the function defined in the javascript.

Here I have chosen the Atom One Dark Reasonable style instead of the default style and added an extra script for the R programming language.

You can find the file name for the style you want here. And you can use their demo to pick a style that suits you.

The last line of code initializes highlight.js which supposedly applies the formatting and highlighting to your code snippets once page is loaded.

Saving Theme

When you are done, don't forget to save.

Usage

Using the library is simple, all you need to do is wrapping your code snippet inside <pre><code></code></pre> HTML tags. The library automatically detects the programming language inside the tags and applies highlighting to the code snippet inside.

You can also manually specify the programming language in the class attribute of the <code> tag if the library failed to detect the language automatically or for whatever other reason:

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

This specifies the language inside as HTML. You can find a list of classes here. For language classes, you can also prefix them with either language- or lang-.

To make arbitrary text look like code, but without highlighting, use the plaintext class.
Plaintext style preview:

mdl = new NeuralNetwork

mdl.input = data.col[1:10]
mdl.output = data.col[-1]

mdl.autoOptimize()

opt = mdl.train()

To disable highlighting altogether use the nohighlight class.

Note that if your code snippet contains HTML reserved characters such as greater than / less than signs, you might want to escape them first.