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.
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.
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.
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.
You can also manually specify the programming language in the
To make arbitrary text look like code, but without highlighting, use the
Plaintext style preview:
To disable highlighting altogether use the
Note that if your code snippet contains HTML reserved characters such as greater than / less than signs, you might want to escape them first.
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.
Super useful!
ReplyDeleteCan't believe this website is on blogger
ReplyDeletenice
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
ReplyDeleteBro it is not working for me. Can plz u help?
DeleteBro it is not working for me. Can plz u help?
ReplyDeleteYes, bro. I'll try to help.
DeleteWhich part are you having problem with?
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.
DeleteMake 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.
DeleteIf that doesn't work, then I don't know, because I haven't tried changing the style myself.
Thank you so much. I really appreciate it.
ReplyDeleteHow to change blank banground to white?
ReplyDeleteIf you mean change background from black to white, you have to choose a theme with a white background.
DeleteTry 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'
This comment has been removed by the author.
ReplyDeleteI 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
ReplyDeleteI an using Codelobster IDE for such formatting
ReplyDelete