Saturday, February 22, 2020

Syntax highlighting on Blogger

In the last post I used syntax highlight technique.

https://highlightjs.org/

Here is demo page where we can see various languages and styles are covered.
https://highlightjs.org/static/demo/

I'm using "VS 2015" style in my blog pages and following is how to configure it.

Step - 1:
Check CDN URL from here.
https://cdnjs.com/libraries/highlight.js/

Copy js and css link.

<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/vs2015.min.css" rel="stylesheet"></link>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>


Step -2:
Go to Blogger Theme setting and click "Edit HTML".

Step-3:
Paste js and css link along with "<script>hljs.initHighlightingOnLoad();</script>" between <head> and </head>.

Step-4:
In order to use Syntax highlighting, HTML needs to be used.

Then write source code between these <pre><code> and </code></pre>. In code class, a supported language can be specified.

example-1:
<pre><code class="java">
public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello World!!");
    }

}
</code></pre>

public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello World!!");
    }

}

example-2:
* In this case html tags are escaped.
<pre><code class="html">
&lt;link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/vs2015.min.css" rel="stylesheet"&gt;&lt;/link&gt;
&lt;script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"&gt;&lt;/script&gt;
&lt;script&gt;hljs.initHighlightingOnLoad();&lt;/script&gt;
</code></pre>


<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/vs2015.min.css" rel="stylesheet"></link>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>



No comments:

Post a Comment

Installing Kali Linux on WSL2

In the last post I installed Kali Linux on WSL1, but actually it was not recommended as WSL2 is better than WSL1 obviously. Here is compari...