How to highlight our code on blogger with highlight.js

1. Switch to HTML tab and insert the following code. You can see the docs at HighlightJs
Base:
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/styles/default.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/highlight.min.js"></script> <style> pre { overflow: auto; width: 800px; font-size: 0.85em; } </style> <script>hljs.initHighlightingOnLoad();</script>

Insert one of these following lines for detecting the computer languages used

<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/languages/php.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/languages/typescript.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/languages/javascript.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/languages/groovy.min.js"></script>

You can find the language packages here

2. Usage: Put our source code between <pre><code class=""> and </code></pre> tags.
3. For example <pre> <code class="java"> public class Main { public static main(String args[]) { System.out.printf("hello world\n"); } } </code> </pre> will display like:

 
  public class Main {
   public static main(String args[]) {
    System.out.printf("hello world\n");
   }
  }