How to Add Syntax Highlighting in Blogger

 

Hi to all, in this article I am going to tell you all about how to add syntax highlighting in blogger website easily in just few minutes by using simple and light weight JavaScript codes.

What is Syntax Highlighting

This Syntax Highlighting is a feature which gives you the facility to Highlight codes over 196 languages on your website with the help of highlight.js.

Benefits of using Highlighting

• This Syntax Highlighting was responsive.
• Gives colors to your highlighted codes.
• Gives a professional and simple look.
• Highlight codes fast.

So read the below provided steps carefully to get clear understanding about adding syntax highlighter in blogger website without any error or issues.

Steps to Add Syntax Highlighter in Blogger Website

---

Login to Blogger Website

First of all, you need to visit official website of blogger.

Now after visiting blogger website, you need to login to blogger website dashboard by using your login credential safely.

Backup Blogger Theme

After successful login to blogger website dashboard we recommend you to take a backup of your theme, By chance, if any mistake has been made you can restore it later.

If you wan to take backup of your website theme code then you can follow below path.

Blogger website dashboard -> Click on theme section -> Click on arrow icon -> Select backup -> Click on download -> Verify captcha -> Save the downloaded file in a safe place for future purpose.

Open Blogger Theme Editor

After backup of your blogger website theme, you need to open blogger theme editor to add few JavaScript codes inside it.

If you want to open blogger theme editor then you can follow below provided path.

Blogger website dashboard -> Click on theme section -> Click on arrow icon -> Select Edit HTML ->Blogger theme editor section.

Adding CSS Code

Now you need to copy below provided CSS code and paste the copied CSS code above </head> or &lt;!--<head/>--&gt;&lt;/head&gt;

<link href='https://cdn.jsdelivr.net/npm/[email protected]/styles/agate.css' rel='stylesheet'/>

Adding JavaScript Code

Now you need to copy below provided JavaScript code and paste the copied JavaScript code above </body> or &lt;!--</body>--&gt;&lt;/body&gt;

<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js'/>
   <script>hljs.initHighlightingOnLoad();</script>

How to use

If you want to use this code for displaying code in your post then copy below code.

<pre><code>your_code_here</code></pre>

Add your code on your_code_here text.

If auto highlights code not works

Add the below provided code for displaying code in your post. 

<pre><code class="language-html">your_code_here</code></pre>

For example, there given html and change it with your language and Add your code on your_code_here text.

Note

---

If you get any error or issue while saving the code then you can restore your backup code again and need to repeat the same process as mentioned in above provided steps carefully.

Place the CSS and JavaScript code carefully in correct place, if you add in any other place then the code will not work.

Conclusion

---

I hope that you have understood about how to add syntax highlighting in your blogger website easily in just few minutes by using CSS and JavaScript.