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>



Hello world!

Hi there,

This is my first post of "Days Of Engineer".

I'm very excited to start this blog this year to connect me to huge community of software engineers.

I'm not sure how Blogger can help me thus I start from "hello world!".

Here what hello world is.

main( ) {
        printf("hello, world\n");
}

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...