How to Add Syntax Highlighter Code for blogger in 2021

Syntax highlighting programming code in your blogger posts can help readers better understand the context of your writing. Additionally, installed by default on Blogger, it automatically adds a Copy Button for any highlighted text that readers can click and then paste the code into their own documents. The syntax highlighting editor is also customizable – much like Visual Code syntax highlighter ;-)

Syntax Highlighter is a plugin that most developers and bloggers have been using, but it does not support bloggers. If you are in the same situation, this tutorial can help you get the syntax highlighter function on your blogger templates with lazy loading javascript code in blogger.

So it's time to make a syntax highlighter using the code button and learn how to add syntax highlighting in blogger posts.

Here, We will Learn First what Syntax highlighter is and how it works, and then we will see how we can implement this in blogger.

Table of Content

What is a Syntax highlighter?

Syntax Highlighter is a web-based tool for creating syntax-highlighted code in over 50 languages (HTML, C, C++, Java, JavaScript to Fortran, and TeX). This is particularly useful for people who write about programming and share sample code either as syntax-highlighter snippets or whole programs.

How does Syntax Highlighter Works in blogger?

The idea behind Syntax Highlighter is straightforward. This syntax highlighter will take the source code of your blog post (either in HTML or Markdown format) and feed it piece by piece into a compiler. The output of the compiler will be used as if it was your post's text.  The plugin identifies keywords in the source code and replaces them with HTML tags, coloured or styled by CSS to create nice-looking highlighted code blocks.

How to Add Syntax Highlighter in blogger with copy button?

You have to follow Step-by-Step instructions to add syntax highlighter in the blogger.

Before you start, please remove the .pre and .code default CSS code. If you don't remove it, then you cannot run this code.

Step1) First of all, Visit the Blogger.com dashboard.

Step2) Now go to the Theme Section. 

Step3) In Theme Section Customize, go to the Edit HTML.

Step4) Search in blogger ]]></b:skin> tag via CTRL + F & Paste this Before The ]]></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%;
        }

Step5) Now Search </body> tag via CTRL + F.

Step6) Copy and Paste this Javascript Code above the </body> tag.

<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>
    

Step7) Now, Create new posts, and wherever you have to, show your syntax highlighter code with the copy button, paste this HTML code & show your syntax highlighter code.

<div class="container" style="margin-top: 20px;">
<pre><code class="hljs" id="code"> <!--- Enter your Code --> </code></pre>
</div>

Step8) Click on Save and Preview it.

Congratulation✨🎉🎊🥳🥳 you have successfully complete how to add syntax highlighter in blogger with a copy button.

Benefits of Using Syntax Highlighter in blogger

1. Syntax Highlighter creates a clear view of your code and makes monitoring changes during a debug session easier than other syntax highlighters.
2. It provides a more professional and simple-to-understand look in your blogger templates.
3. It takes less time to read the code easily.

Final Verdict

This is the easiest and best method for adding syntax highlighting to blogger. Copy button and paste in the HTML itself works fantastic.

If you find any queries and doubts in these posts, then join our telegram group chat. We will solve all your queries in telegram group chat because other people will also help if they have the same doubts.

Telegram Group Chat: Blog Triggers Discussion