How to Install Syntax Highlighter in Blogger

Techno Mania - One on the technomania.xyz visitor ask me how to add syntax highlighter in blogger? Now on the 90%, new theme syntax highlighter comes preinstalled. Fast check on your theme there don't have any preinstalled highlighter. To check the highlighter just search on your template HTML editor highlighter.js now if you not found any js code of this name then follow my steps to add a syntax highlighter.

Table Of Contents

1. What is syntax highlighter?
2. How to add Syntax Highlighter?
3. How can you add code box on blogger?

What is syntax highlighter?

If you want to give any code on your blog then many people give code on backquote. The syntax highlighter is the best solution for this issue syntax highlighter show your code like a code editor. You see the demo on the under of the post.

How to add Syntax Highlighter?

This so easy to install a syntax highlighter on blogger just you need to install a small js code and done. So let's talk about it.

1. Fast open your blogger dashboard.
2. Then goto theme HTML editor.
3. Now copy the below code and add after </body> tag.
   

   <b:if cond='data:blog.pageType == "item"'>
       <script src = 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' > < /script> <script >
       //<![CDATA[
       var _0x14f5 = ["no-attribution", "", "attr", "pre, code, mark, .mark, kbd", "<a class=\"credit\" href=\"https://www.technomania.xyz/2020/08/syntax-highlighter-blogger.html\" rel=\"dofollow\" style=\"position:absolute;right:8px;font-size:20px;color:#000;text-decoration:none;background:#fff;padding:0px 5px\">&copy;</a>", "before", "code", "use strict", "script", "createElement", "document", "getElementsByTagName", "type", "text/javascript", "src", "insertBefore", "parentNode", "https://rawcdn.githack.com/softwebtuts/softwebtuts.com/js/highlightr.js"];
   $(_0x14f5[3])[_0x14f5[2]](_0x14f5[0], _0x14f5[1]);
   $(_0x14f5[6])[_0x14f5[5]](_0x14f5[4]);
   
   function xvxv(_0xcdf3x2, _0xcdf3x3, _0xcdf3x4) {
       _0x14f5[7];
       var _0xcdf3x5 = window[_0x14f5[10]][_0x14f5[9]](_0x14f5[8]);
       var _0xcdf3x6 = _0xcdf3x3 || window[_0x14f5[10]][_0x14f5[11]](_0x14f5[8])[0];
       _0xcdf3x5[_0x14f5[12]] = _0x14f5[13];
       _0xcdf3x5[_0x14f5[14]] = _0xcdf3x2;
       _0xcdf3x6[_0x14f5[16]][_0x14f5[15]](_0xcdf3x5, _0xcdf3x6);
       setTimeout(function () {
           _0xcdf3x5[_0x14f5[12]] = _0xcdf3x4 || _0x14f5[13]
       })
   }
   xvxv(_0x14f5[17])
       //]]>
       </script></b: if >

4. Now save theme and done.

How can you add code box on blogger?

Fast go to https://www.sayemtutorial.com/p/pars.html this link and perse your code after persed has done copy the parsed code and add like:

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

Now replace your parsed code with Your Code Here text (add all code on HTML view). Now publish your post and see the result. I hope you enjoy this article thanks you.