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">
<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>
</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