How To Add Syntax Highlighting To Code Snippets/Code Box In Blogger Blogs or Websites

How To Add Syntax Highlighting To Code Snippets/Code Box In Blogger Blogs or Websites

In this article, we gonna talk about how to adding syntax highlighting in our blogger blogs.
I got a few requests on how to highlight the syntax of code snippets/code box in a blog like I have.
See an example of my code snippets/code box below,

<script>/*<![CDATA[*/ var lazyadsense = false;
  window.addEventListener("scroll", function(){
    if ((document.documentElement.scrollTop != 0 && lazyadsense === false) || (document.body.scrollTop != 0 && lazyadsense === false)) {
      (function() {
        var ad = document.createElement('script');
        ad.async = true;
        ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
        var sc = document.getElementsByTagName('head')[0];
        sc.parentNode.insertBefore(ad, sc);
      }
      )();
      lazyadsense = true;
    }
  }
  ,true) /*]]>*/
</script>

Many people initially think you have to manually color the elements or manually escape the characters, but it's much more simple than that, so I'll cover everything necessary to embed snippets in your own blog or website in this article.

You can do this using a JavaScript library to automatically highlight your code.
There are two main options here - Highlight.js and Prism.js.
Google Prettify is a third option.

I'll focus on Prism.js here, as it's what I use for this site, but I've used all the above at some point and they're all very similar.
They give you options on what languages and themes you plan to use, so you'll just check the relevant ones and get the download.
All the Prism files are also available as a CDN, so if you don't wish to download anything, you can do it that way.

How To Install PrismJS:

Add CSS Code Before </head> or &lt;/head&gt;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/themes/prism-okaidia.min.css" integrity="sha512-mIs9kKbaw6JZFfSuo+MovjU+Ntggfoj8RwAmJbVXQ5mkAX5LlgETQEweFPI18humSPHymTb5iikEOKWF7I8ncQ==" crossorigin="anonymous" />

Add Javascript Code Above </body> or &lt;/body&gt;

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/prism.min.js" integrity="sha512-9+422Bs3A87UkWfp+qV80Nfv9arhbCXKY1rxrF2seorI36mIIstMiuBfyKLF1yH1nnzQkEWq2xrzT4XU3Z+vrA==" crossorigin="anonymous">
</script>

How To Use PrismJS:

<pre><code class="language-###"> <!-- CODE GOES HERE --> </code></pre>

Here change ### with your code language and for know about language name use below PrismJS official website.

Example:

<pre><code class="language-css"> <!-- CODE GOES HERE --> </code></pre>

Full Example With Code:

<pre><code class="language-js"><script>
jQuery(document).ready(function($) {
$("#feed-input").focus(function(){
$(this).parent().addClass("thing");
$("#search-btn").addClass("thing");
}).blur(function(){
$(this).parent().removeClass("thing").delay(1000);
$("#search-btn").removeClass("thing").delay(1000);
})
}); 
</script></code></pre>

In the above example, the code is in an encoded format/some of the symbols & tags escaped so that browser doesn't try to parse the code in our blog and shows as we wish without any errors.
You can use my HTML Encoder/Decoder Tool for encoding your code.

HTML Encode & Decode Tool

Source Code Beautifier