Skip to main content

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

Edit HTML screenshot
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

Screen of HTML with highlight.js files linked
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

Screenshot of Save Theme Button
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.

Comments

  1. Can't believe this website is on blogger
    nice

    ReplyDelete
  2. Nice article, also the design of website is very user friendly. Really not beliving that it is on blogspot. Also checkout Magento 2.4 Features

    ReplyDelete
    Replies
    1. Bro it is not working for me. Can plz u help?

      Delete
  3. Bro it is not working for me. Can plz u help?

    ReplyDelete
    Replies
    1. Yes, bro. I'll try to help.

      Which part are you having problem with?

      Delete
    2. For the first time I applied "atom-one-dark" css style. Now I want to change the style but I'm unable to do so. Whatever css style I apply it is displaying the code snippet in "atom-one-dark" style.

      Delete
    3. Make sure you link to the new css file and not the old one, and make sure you saved the changes to the link, and clear cache and refresh the page.

      If that doesn't work, then I don't know, because I haven't tried changing the style myself.

      Delete
  4. Thank you so much. I really appreciate it.

    ReplyDelete
  5. How to change blank banground to white?

    ReplyDelete
    Replies
    1. If you mean change background from black to white, you have to choose a theme with a white background.

      Try the atom one light theme. Try change the css link to this:
      href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/atom-one-light.min.css'

      Delete
  6. This comment has been removed by the author.

    ReplyDelete
  7. I am facing one problem. The code gets copied beautifully but gets overflowed out of the width of the page. I only pasted the HTML code you agev above, didnt change anything else. Thank you in advance

    ReplyDelete

Post a Comment

cusG_relatedPost_html

Popular posts from this blog

How to Add Next & Previous Post Navigation Buttons to Blogger

How to Manage Labels in Blogger

I'm Not Looking