How To Add Html Syntax Highlighter In Blogger Post

As requested by a reader of this blog,

Today, I am going to show you how to add HTML/CSS/JavaScript Syntax highlighter in blogger post.

Before I go right into it, let me explain what a syntax Highlighter is.

What is Syntax Highlighter

Syntax Highlighter is simply been seen as a way of displaying HTML/CSS/JavaScript in a post without it changing its format.

Some persons call it "display code snippets in HTML, display HTML code on web page, display HTML code on web page without executing it, display code on web page".

I found these variations but the actual name is "Syntax Highlighter". We also have Json Syntax highlighter.

Various highlighters have various styling, you can even find some with different color styling for HTML, a different one for CSS and another for JavaScript.

But the one I am sharing is the exact one I use on my blog, which you can find on my  How To Add AdSense Code To Blogger Without Affecting PageSpeed.

So let get it down.

Here are the 4 steps to add Syntax highlighter to blogspot blog.

1. Adding the Javascript code to your template
2. Adding some basic CSS styling
3. Converting your HTML
4. Adding to your posts.

1. JavaScript Code.

In other to add the Javascript code, Copy the code below and follow the steps.

<script type='text/javascript'>
//<![CDATA[
// Highlighter
$('i[rel="pre"]').replaceWith(function(){return $("<pre><code>"+$(this).html()+"</code></pre>")});for(var pres=document.querySelectorAll("pre,code,kbd,blockquote,td"),i=0;i<pres.length;i++)pres[i].addEventListener("dblclick",function(){var e=getSelection(),t=document.createRange();t.selectNodeContents(this),e.removeAllRanges(),e.addRange(t)},!1);
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://cdn.rawgit.com/Arlina-Design/frame/6c8ec00f/highlightr.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>

1. Go to blogger.com >> Theme >> Edit HTML
2. Using CTRL + F search for "</body>" if not found, search for "&lt;!--</body>--&gt;&lt;/body&gt"
3. Paste the above code just above it.

That's all for adding the JavaScript code.

2. CSS Styling

This is the basic CSS styling I use, you can change it to suit your theme.

Copy the CSS code snippet below and follow the steps

<style type='text/css'>
/* Highlighter */
pre{white-space:pre;word-wrap:normal;overflow:auto;font-size:14px;margin:0;padding:0}hr{margin-top:2rem;background:#ccc;height:1px;border:0;margin-bottom:2rem}
.post-body code{padding:1.2em}.post-body pre{padding:0;border-radius:3px;background-color:#292e34;word-spacing:normal;word-break:normal;line-height:1.4em}.post-body .hljs{display:block;overflow-x:auto;padding:1.2em;background:#2b2b2c;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:bold}.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:#f24a4a;color:#fff;padding:2px 5px;border-radius:2px}.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:#fff;margin:.15rem 0}
</style>

1. Go to blogger.com >> Theme >> Edit HTML
2. Using CTRL + F search for "</head>" if not found, search for "&lt;/head&gt;&lt;!--<head/>--&gt;"
3. Paste the above code just above it.

That's all we will be doing in the theme section.

3. Convert HTML

In other display HTML code on web page without executing it, first, you have got to convert it, using my free HTML Converter.

Here are the steps to convert your HTML

1. Visit Blogging Prince HTML Converter
2. Paste your HTML
3. Click convert and copy the converted code.

After that, next is to add it to your post.

4. Adding Syntax Highlighter to Post

In other to paste the HTML on your blog post, first, copy the below code

<pre><code>YOUR CONVERTED CODE</code></pre>

Replace Converted HTML with HTML you converted.

On your post editor, Switch to "HTML" and Paste the code where ever you want

Now that is how easy it is to add HTML Syntax highlighter to blogger blog.

This post should be useful to people searching for "display code snippets in HTML, display HTML code on web page, display HTML code on web page without executing it, display code on web page"