Setting Up Syntax Highlighter In Blogger (Part-2)

In the previous post, I wrote part one of Setting Up Syntax Highlighter In Blogger.

I like the font, the auto line number and the colour on the coding syntax. But there is one problem with the setup. The syntax highlighter seems outdated, not really highlighting latest programming syntax (eg. 'const' in ES6 Javascript)

I went to check around if there is another way, and I found one.

After finishing setting up, this is the result:

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;
 
// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10
 
// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15
 
var array1 = ['a', 'b', 'c'];
 
array1.forEach(function(element) {
  console.log(element);
});
 
// expected output: "a"
// expected output: "b"
// expected output: "c"

If the syntax highlighting colour look familiar to you, most likely you have been using Visual Studio 2015 or Visual Studio Code. I purposely select the theme that resembles the syntax highlighting of Visual Studio editor.

To set up this type of syntax highlighter, you just need to add the following lines to just above the </head> tag (similar to the tutorial in the previous post):

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

Then, when you start to write a post, you enclose the code like below while in HTML writing mode:

<pre>
<code class="javascript">
    const name = "James"
</code>
</pre>

If you are using another programing language, such as C#, the class should be "c#" or "csharp":

<pre>
<code class="csharp">
    var name = "James"
</code>
</pre>

You could find more information from here:

• https://highlightjs.org/download/
• https://highlightjs.org/usage/
• https://github.com/highlightjs/highlight.js/tree/master/src/styles
• https://github.com/highlightjs/highlight.js/tree/master/src/languages