How to Add Syntax Highlighter in Blogger

Hello Blogmate's How are you ? I hope you are doing great. Most of you somehow will have noticed on many of blogs they have code box with Syntax highlighter and copy button.Syntax highlighter is widely used in WordPress platform.

This is a feature of text editors used for programming, scripting, or markup languages. Display text, especially code snippets, in different colors and fonts depending on the category of terms in the content.Today in this tutorial we will learn about What is Syntax highlighter? , its advantages and how to implement it in blogger.Without wasting our time let's move forward.

What is Syntax Highlighter?

Syntax Highlighter is a web-based tool for writing code with syntax highlighting in over 50 languages ​​(HTML, C, C++, Java, JavaScript to Fortran and TeX). This is especially useful for those who write about programming and share sample code as syntax highlighter snippets or entire programs.

Advantages

• You will be able to display code snippets in different colors
• You will be able to separate and display CSS, HTML, Jquery and JavaScript in a different color box.
• Syntax Highlighter is a lightweight, powerful and elegant syntax highlighter
• Creates a clear view of your code and makes it easier than other syntax highlighters to monitor changes during debugging sessions.
• Line numbering makes it easy to identify specific codes.
• Provide a more professional and friendly look.
• It's making easier to copy code script with just one click.

Steps – How to do it

Before proceeding forward , You need to remove .pre and .code default CSS code. Otherwise , You won't be able use Syntax highlighter.

Double Click To Copy Code

• Open Blogger Dashboard
• Next you can click on your Themes option and then the Three Dots option and then the "Edit html" option.
• Next, when you click on the "Ctrl + F" option on your laptop keyboard, a search bar will open.Now Search ]]></b:skin> .Paste the CSS code given above this ]]></b:skin> tag.

.hljs {

            display: block;

            overflow-x: auto;

            padding: 0.5em;

            background: #1E1E1E;

            color: #DCDCDC;

            font-weight: normal;

            font-size: 1.15em !important;

        }

        .hljs-keyword,

        .hljs-literal,

        .hljs-symbol,

        .hljs-name {

            color: #569CD6;

        }

        .hljs-link {

            color: #569CD6;

            text-decoration: underline;

        }

        .hljs-built_in,

        .hljs-type {

            color: #4EC9B0;

        }

        .hljs-number,

        .hljs-class {

            color: #B8D7A3;

        }

        .hljs-string,

        .hljs-meta-string {

            color: #D69D85;

        }

        .hljs-regexp,

        .hljs-template-tag {

            color: #9A5334;

        }

        .hljs-subst,

        .hljs-function,

        .hljs-title,

        .hljs-params,

        .hljs-formula {

            color: #DCDCDC;

        }

        .hljs-comment,

        .hljs-quote {

            color: #57A64A;

            font-style: italic;

        }

        .hljs-doctag {

            color: #608B4E;

        }

        .hljs-meta,

        .hljs-meta-keyword,

        .hljs-tag {

            color: #9B9B9B;

        }

        .hljs-variable,

        .hljs-template-variable {

            color: #BD63C5;

        }

        .hljs-attr,

        .hljs-attribute,

        .hljs-builtin-name {

            color: #9CDCFE;

        }

        .hljs-section {

            color: gold;

        }

        .hljs-emphasis {

            font-style: italic;

        }

        .hljs-strong {

            font-weight: bold;

        }

        .hljs-bullet,

        .hljs-selector-tag,

        .hljs-selector-id,

        .hljs-selector-class,

        .hljs-selector-attr,

        .hljs-selector-pseudo {

            color: #D7BA7D;

        }

        .hljs-addition {

            background-color: #144212;

            display: inline-block;

            width: 100%;

        }

        .hljs-deletion {

            background-color: #600;

            display: inline-block;

            width: 100%;

        }

• Now Search </body> tag via CTRL + F .Paste the given javascript code above <!--[ </body> close ]-->

<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js'/>

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

           <script src='https://unpkg.com/highlightjs-badge/highlightjs-badge.min.js'/>

<script>

  //<![CDATA[

setTimeout(function(){for(var e=document.querySelectorAll("pre>code"),o=0;o<e.length;o++)hljs.highlightBlock(e[o]);window.highlightJsBadge({contentSelector:".container",loadDelay:0,copyIconClass:"fa fa-copy",checkIconClass:"fa fa-check text-success",onBeforeTextCopied:function(e,o){return e}})},10);

//]]>

</script>

• Create new posts , whenever you have to show your syntax highlighter code with the copy button, paste below mentioned HTML code .

<div class="container" style="margin-top: 20px;">

<pre><code class="hljs" id="code"> <!--- Enter your Code --> </code></pre>

</div>

• Don't Forget Saving Your Theme

Congratulation✨🎉🎊🥳🥳 you have successfully completed implementation of tutorial.

Conclusion

So today we have discussed about . I hope you like this post kindly do give a comment below. If you are having problem in implementing this kindly contact me. Do visit regularly for getting more updates like this.