How to Add Syntax Highlighter in Blogger

I have already shared an article about this topic and in that article I have shared very beautiful syntax highlighter.

If you haven't read my previous article about Syntax highlighter please read it here.

I think you will be thinking that if I have already shared an article about this topic then what is the meaning of sharing this article again?

Friends be cool this is not a publicity stunt i just published this article on the same topic again because one of my friend was asking to share syntax highlighter like my website so that's why I am writing this article.

So now let's talk about this syntax highlighter.

This syntax highlighter uses highlight.js JavaScript plugin to highlight different kind of computer codes on any website.

You can also use this same syntax highlighter into your wordpress website if you want.

What is syntax highlighter?

If you are new or if you don't have any knowledge about syntax highlighter then let me tell you that before going ahead.

Syntax highlighting is a technique in which we use regular expression to match Syntax of different things and different alpha-numerical strings and make them Beautiful by giving them different text colors and background colors and many other styles.

The syntax highlighting technique makes our computer codes or any other useful information look beautiful in different style.

There are many others syntax highlighters available in the market like prism.js but our this Syntax highlighter uses highlight.js JavaScript plugin.

So now here are complete steps which you have to follow to add this sentence highlighter into your blogger blog.

Guidelines:

1. Go to Blogger Dashboard
2. Go to Theme/Template Section
3. Click Edit HTML
4. Now Search for </head>
   

To search anything in blogger template section press Ctrl+F and then type term to search and press enter.

5. Copy the code provided below and paste it above </head> tag.
   

   <b:if cond='data:blog.pageType == "item"'> <style>
   /* Highlighter By SayemTutorial.Com*/
   .post-body code{padding:1.2em;max-height:400px;}.post-body .hljs{background:#292a2b;display:block;overflow-x:auto;padding:1em 2em;color:#fff;line-height:1.5;text-align:left;word-spacing:0;font-family:monospace;border-radius:3px}.post-body .hljs-name,.post-body .hljs-strong{font-weight:500}.post-body .hljs-code,.post-body .hljs-emphasis{font-style:italic}.post-body .hljs-tag{color:#62c8f3}.post-body .hljs-variable,.post-body .hljs-template-variable,.post-body .hljs-selector-id,.post-body .hljs-selector-class{color:#ade5fc}.post-body .hljs-string,.post-body .hljs-bullet{color:#a2fca2}.post-body .hljs-type,.post-body .hljs-title,.post-body .hljs-section,.post-body .hljs-attribute,.post-body .hljs-quote,.post-body .hljs-built_in,.post-body .hljs-builtin-name{color:#ffa}.post-body .hljs-number,.post-body .hljs-symbol,.post-body .hljs-bullet{color:#d36363}.post-body .hljs-keyword,.post-body .hljs-selector-tag,.post-body .hljs-literal{color:#fcc28c}.post-body .hljs-comment,.post-body .hljs-deletion,.post-body .hljs-code{color:#888}.post-body .hljs-regexp,.post-body .hljs-link{color:#c6b4f0}.post-body .hljs-meta{color:#fc9b9b}.post-body .hljs-deletion{background-color:#fc9b9b;color:#333}.post-body .hljs-addition{background-color:#a2fca2;color:#333}.post-body .hljs a{color:inherit}.post-body .hljs a:focus,.post-body .hljs a:hover{color:inherit;text-decoration:underline}mark .post-body .hljs-attr,mark .post-body .hljs-string,mark .post-body .hljs-bullet{background-color:#e67e22;color:#fff}.post-body .hljs mark{background-color:tomato;color:#fff;padding:2px 5px;border-radius:2px}.BLOG_mobile_video_class{display:none!important}.post-body .hljs mark *{color:var(--selected-textcolor) !important}.post-body .hljs mark span.hljs-number,.post-body .hljs mark span.hljs-comment,.post-body .hljs mark span.hljs-symbol,.post-body .hljs mark span.hljs-string,.post-body .hljs mark span.hljs-attr,.post-body .hljs mark span.hljs-keyword,.post-body .hljs mark span.hljs-name,.post-body .hljs mark span.hljs-tag{color:#000;margin:.15rem 0}.credit{}
   </style></b:if>

6. Now search for </body>.
7. Copy the code provided below and paste it above </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[
   eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('g f=["r-s","","t","u, i, j, .j, v","<a w=\\"x\\" y=\\"k://z.A.h/B/C/D-E-F-G-H-I-J.K\\" L=\\"M\\" N=\\"O:P;Q:R;S-T:U;V:#W;l-X:Y;Z:#18;19:1a 1b\\">&1c;</a>","1d","i","1e 1f","1g","1h","1i","1j","1k","l/1l","1m","1n","1o","k://1p.1q.h/m/m.h/n/1r.n"];$(f[3])[f[2]](f[0],f[1]);$(f[6])[f[5]](f[4]);o p(a,b,c){f[7];g d=q[f[10]][f[9]](f[8]);g e=b||q[f[10]][f[11]](f[8])[0];d[f[12]]=f[13];d[f[14]]=a;e[f[16]][f[15]](d,e);1s(o(){d[f[12]]=c||f[13]})}p(f[17])',62,91,'|||||||||||||||_0x14f5|var|com|code|mark|https|text|softwebtuts|js|function|xvxv|window|no|attribution|attr|pre|kbd|class|credit|href|www|sayemtutorial|2020|07|how|to|add|syntax|highlighter|in|blogger|html|rel|dofollow|style|position|absolute|right|8px|font|size|20px|color|000|decoration|none|background|||||||||fff|padding|0px|5px|copy|before|use|strict|script|createElement|document|getElementsByTagName|type|javascript|src|insertBefore|parentNode|rawcdn|githack|highlightr|setTimeout'.split('|'),0,{}))
   //]]>
   </script></b:if>

8. Save Theme/Template

So after adding the code by following the guidelines provided above now if you want to do Syntax highlighting on your website then you have to simply replace your computer code into

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

tags, use your code instead "Your Code Here".

Example Usage:
This is the example usage of using this send text highlighter.

<pre><code>&lt;h1&gt;
Sayem Tutorial
&lt;/h1&gt;&lt;h2&gt;
Best place to learn blogging.
&lt;/h2&gt;
</code></pre>