Setting Up Syntax Highlighter In Blogger (Part-1)

Today, I tried to find a way to do syntax highlighting to the code sample in my blog post.

Using my custom CSS, this is what happened before I embedded the syntax highlighter.

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"

This is what happened after I embedded the syntax highlighter.

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"

The setup is very simple. (But please be cautious when following the steps)

First, please go to this website to follow the instructions to do the setup:
How do I add syntax highlighting to my Blogger blog?

Due to the setup is using the insecure 'http' URL, you may face the issue of browser blocking the embed scripts to prevent 'mixed-content' access. To mitigate this issue, please add the following tag above the <script> tags that you just added:

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

(reference: https://stackoverflow.com/questions/33507566/mixed-content-blocked-when-running-an-http-ajax-operation-in-an-https-page)

Then, when you start to write a post, you enclose the code into <pre> tag with class "brush:js" while in HTML writing mode:

<pre class="brush:js">
    var b = 5;
</pre>

If you are using another programming language, such as c#, then the class is "brush:c#" or "brush:csharp".

After the setup is done, you should see the effect like above.

It looks good, but it is not a time to celebrate yet. Please wait until you read Part 2.