How to Add Syntax Highlighter in Blogger
close
How to Add Syntax Highlighter in Blogger

How to Add Syntax Highlighter in Blogger

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>
  5. To search anything in blogger template section press Ctrl+F and then type term to search and press enter.
  6. Copy the code provided below and paste it above </head> tag.
  7. <b:if cond='data:blog.pageType == "item"'> <style>
    /* Highlighter */
    .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>
  8. Now search for </body>.
  9. Copy the code provided below and paste it above </body> tag.
  10. 
    <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=["\x6E\x6F\x2D\x61\x74\x74\x72\x69\x62\x75\x74\x69\x6F\x6E","","\x61\x74\x74\x72","\x70\x72\x65\x2C\x20\x63\x6F\x64\x65\x2C\x20\x6D\x61\x72\x6B\x2C\x20\x2E\x6D\x61\x72\x6B\x2C\x20\x6B\x62\x64","\x3C\x61\x20\x63\x6C\x61\x73\x73\x3D\x22\x63\x72\x65\x64\x69\x74\x22\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x73\x3A\x2F\x2F\x77\x77\x77\x2E\x73\x6F\x66\x74\x77\x65\x62\x74\x75\x74\x73\x2E\x63\x6F\x6D\x2F\x32\x30\x31\x39\x2F\x30\x35\x2F\x68\x6F\x77\x2D\x74\x6F\x2D\x61\x64\x64\x2D\x73\x79\x6E\x74\x61\x78\x2D\x68\x69\x67\x68\x6C\x69\x67\x68\x74\x65\x72\x2D\x69\x6E\x2D\x62\x6C\x6F\x67\x67\x65\x72\x2E\x68\x74\x6D\x6C\x22\x20\x72\x65\x6C\x3D\x22\x64\x6F\x66\x6F\x6C\x6C\x6F\x77\x22\x20\x73\x74\x79\x6C\x65\x3D\x22\x70\x6F\x73\x69\x74\x69\x6F\x6E\x3A\x61\x62\x73\x6F\x6C\x75\x74\x65\x3B\x72\x69\x67\x68\x74\x3A\x38\x70\x78\x3B\x66\x6F\x6E\x74\x2D\x73\x69\x7A\x65\x3A\x32\x30\x70\x78\x3B\x63\x6F\x6C\x6F\x72\x3A\x23\x30\x30\x30\x3B\x74\x65\x78\x74\x2D\x64\x65\x63\x6F\x72\x61\x74\x69\x6F\x6E\x3A\x6E\x6F\x6E\x65\x3B\x62\x61\x63\x6B\x67\x72\x6F\x75\x6E\x64\x3A\x23\x66\x66\x66\x3B\x70\x61\x64\x64\x69\x6E\x67\x3A\x30\x70\x78\x20\x35\x70\x78\x22\x3E\x26\x63\x6F\x70\x79\x3B\x3C\x2F\x61\x3E","\x62\x65\x66\x6F\x72\x65","\x63\x6F\x64\x65","\x75\x73\x65\x20\x73\x74\x72\x69\x63\x74","\x73\x63\x72\x69\x70\x74","\x63\x72\x65\x61\x74\x65\x45\x6C\x65\x6D\x65\x6E\x74","\x64\x6F\x63\x75\x6D\x65\x6E\x74","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x73\x42\x79\x54\x61\x67\x4E\x61\x6D\x65","\x74\x79\x70\x65","\x74\x65\x78\x74\x2F\x6A\x61\x76\x61\x73\x63\x72\x69\x70\x74","\x73\x72\x63","\x69\x6E\x73\x65\x72\x74\x42\x65\x66\x6F\x72\x65","\x70\x61\x72\x65\x6E\x74\x4E\x6F\x64\x65","\x68\x74\x74\x70\x73\x3A\x2F\x2F\x72\x61\x77\x63\x64\x6E\x2E\x67\x69\x74\x68\x61\x63\x6B\x2E\x63\x6F\x6D\x2F\x73\x6F\x66\x74\x77\x65\x62\x74\x75\x74\x73\x2F\x73\x6F\x66\x74\x77\x65\x62\x74\x75\x74\x73\x2E\x63\x6F\x6D\x2F\x6A\x73\x2F\x68\x69\x67\x68\x6C\x69\x67\x68\x74\x72\x2E\x6A\x73"];$(_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>
  11. 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;
Softweb Tuts
&lt;/h1&gt;&lt;h2&gt;
Best place to learn blogging.
&lt;/h2&gt;
</code></pre>


Conclusion:

If you want to see the demo of the syntax highlighter you don't have to click anywhere or go to any external page you can simply see the demo of this syntax highlighter on my website above. You may have seen before if you are my daily visitor and programming lover geek.

I hope you will like this syntax highlighter and for my friend who asked me to write an article about it I am very thankful to him.

I am very much thankful to those who give their feedback on this blog.

If you have any issue please leave the comments in the comment section and feel free to ask any question about this post.
Disqus Codes

No comments

Notifications

Disqus Logo