How to display code in your blogger website using highlight JS

If you run a programing or coding related blog then code highlighter/viewer is must for your blog. Code highlighter used for makes the code look different from the text. In this tutorial, I will show you how to display lines of codes of any programming languages in your blogger post.

On the lastest blogger theme, you get syntax highlighter of code preinstalled. But if you see your theme does not support code highlighter then this tutorial for you.

To install syntax highlighter fast copy the below cdn then open your blogger dashboard and add this code before the <head> tag.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.12.0/build/styles/default.min.css"/>

Now search for </body> tag then add the below cdn after </body> tag.

<script scr="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.12.0/build/highlight.min.js"></script>

Now add the below code after the </body> tag.

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

Now save your theme and check the result for checking just add your code on the <pre><code> tag, see on the below example:

<pre><code>Your Code Here</code></pre>

Add your code on your code here text. It's worked fine with js, css, and other languages but if you want to show the HTML then first you need to parse the HTML, you get so many tools for parsing the HTML code just search for perse HTML on google. Now your syntax highlighter is ready to run.

How to change the style

When you install this syntax highlighter then you see the default look is not good now if you want to change the look of the code box then remove the default.min.css cdn then open www.jsdelivr.com on the browser then search for highlight.js then open the fast result on www.jsdelivr.com now go-to style and choose any style any want then copy the style cdn and paste before the <head> tag.

I am here to use the atelier-cave-dark.css cdn you can use this one see on the below cdn it's the atelier-cave-dark.css CDN.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@10.2.0/styles/atelier-cave-dark.css"/>

There are one more bonus tips

If you want to add the line number on the code box then follow this part of the tutorial. If you want to add the line number just search for </body> and add the below cdn on before the </body> tag.

<script src="https://cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@2.8.0/src/highlightjs-line-numbers.min.js"></script>

Now also paste the below code after </body> tag.

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

Now save your theme and enjoy it. If you want to see the final result then please click on the result button.

Result

Conclosing

After you add this code highlighter if you want to change the style just remove the old css cdn and add the new css style cdn. I hope this article is helpful thanks for with us.