Simple Syntax Highlighter for Blogger using higlightjs


syntax-highlighter-for-blogger-blog

Previously we used google code prettify for syntax highliting. Now lets setup another simple method to higlight using highlight.js

Steps to Setup

Step 1 : Login in to your blogger account and go to Theme. Click on Customize and Edit HTML

Step 2 : Copy and paste the below code before </head>


<link href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/default.min.css' rel='stylesheet'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js'/>
<script>hljs.highlightAll();</script>

Step 3 : Now whenever you want to highlight any code follow below method

<pre><code>...</code></pre>

This will find and highlight code inside of <pre><code> tags. It tries to detect the language automatically. If you to be explicit, you can specify the language manually in the using the class attribute.

<pre><code class="language-html">...</code></pre>


Check all the supported languages here

Select your desired theme from here https://highlightjs.org/static/demo/

No need to worry about hosting css and js files, they already updated at cdjns  

Hope this is simple and easy to use. If you face any problem feel free to ask. Also do share which highlighter you are using?


Previous
Next Post »