How to Highlight Code on Your Blog with Highlight.js?

Most bloggers highlight code snippets to make their blog more readable, professional, and beautiful. There are many ways to do this. One famous and easy way is by using the highlight.js library. Some advantages are:

  • highlight.js automatically detects the language.
  • All famous languages are supported.
Highlighting Code
Highlighting

Adding highlight.js to your Blog to Highlight Code

First, you have to choose a theme. Go to this demo page and choose a style you like. Then, visit Highlight JS CDNJS repository and find yourthemename.min.css and copy the link. Make sure to select the latest version.

Then, go to your blog’s source code and place the code inside the <head> tag.

<link rel="stylesheet" href="COPIED_URL" />

Ex:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/docco.min.css" />

Then, from the same repository, copy the link of the highlight.min.js file. Add the following code before the </body> tag.

<script src="COPIED_LINK"></script>

Finally, add the following code after the above code.

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

This will highlight all the <pre><code> blocks in your blog at the initial load. Highlight.js will automatically detect the language. However, if you are not satisfied with that, you can add a class to the code block to set the language.

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

That’s all! Adding highlight.js to your blog is as simple as that. It just takes a few minutes.

Thank you for reading. If you have any questions, comment below.

Need a privacy-focused commenting platform for your website?