How to Add Syntax Highlighter In Blogger (Blogspot) Template

Syntax Highlighter is a plugin that most developers and bloggers have been using, but blogger template does not support plugin. If you are facing the same problem, this tutorial can help you to get the syntax highlighter function on your blogger templates. So it's time to apply a syntax highlighter on your blogger template using the css and javascript code and learn how to add syntax highlighting in blogger posts. Here, We'll learn first what syntax highlighter is and how it works, then we'll see how we can implement this in blogger template.

What is syantax highlighting?

When we write articles on our blog about programming and share general knowledge and tips with sample code, we use programming language, scripting, or markup languages, such as widgets, HTML, CSS, Javascript etc. Syntax highlighting allows code in our blog posts to be highlighted based on the language it's written in, to make it easier to read our blog readers but highlighting doesn't affect the meaning of the text itself. It’s features displays text, especially code, in different colours and fonts according to the category of terms.

How does Syntax Highlighter Works in blogger blog?

This syntax highlighter will take the source code of blog post 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 template

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

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

1. First of all, Go to the blogger dashboard draft.blogger.com.
2. Now go to the Theme » Customize » Backup » and Download the template file for backup.
3. Now in Theme Section, go to the Edit HTML.
4. Now you’ll see XML of your blog and search the code ]]></b:skin> or //]]></b:skin> and Paste the following css code just above the ]]></b:skin> or //]]></b:skin>

.hljs{display:block;overflow-x:auto;padding:0.5em;background:#1E1E1E;color:#DCDCDC;max-height:500px;font-weight:normal;font-size:1.15em!important;border-left:8px solid #1d8efd;border-top:2px solid #1d8efd;border-bottom:1px solid #1d8efd;border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;:-webkit-scrollbar{background-color:rgb(219,224,234)}
}
.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%;}

5. Now search </body> and copy the following javascript code and paste it just before </body>.

<script src='https://unpkg.com/@highlightjs/cdn-assets@10.5.0/highlight.min.js'/>
<script src='https://unpkg.com/highlightjs-badge/highlightjs-badge.min.js'/>
<script type='text/javascript'>
//<![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);hljs.initHighlightingOnLoad();
//]]>
</script>

6. Now Save Your Theme.

Now you have successfully added syntax highlighter on your blogger template. Create new posts and wherever you have to show your syntax highlighter code, just paste your syntax highlighter code between <pre><code class="hljs" id="code"> and </code></pre>.

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

Replace your highlighting code with <!-- Enter your Code -->. Now View Syntax Highlighter Demo

Advantages of syntax highlighting

Reading an article about coding without syntax highlighter can be confusing. The highlighter can help visitors to separate the code from the over all article paragraphs. Advanced syntax highlighters will also highlight part of your code in multiple colors and different fonts. That way visitors will be able to read and understand the code easily.