Javascript Highlight.js Syntax Highlighter to Highlight Source Code in Various Themes in Browser

Welcome folks today in this blog post we will be using the highlight.js library to highlight source code in various themes using javascript. All the full source code of the application is shown below.

Get Started

In order to get started you need to make an index.html file and copy paste the below code.

index.html

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/highlight.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/styles/default.min.css"
        id="theme">
</head>
<body>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

id="theme">

</head>

<body>

</body>

</html>

As you can see in the above code we are including the cdn of highlight.js library and also we are including the css also of various themes.

Now we need to add the below html code as shown below

index.html

<select onchange="updateTheme(this.value)">
        <option value="default">default</option>
        <option value="a11y-dark">a11y-dark</option>
        <option value="atom-one-dark">atom-one-dark</option>
        <option value="rainbow">rainbow</option>
        <option value="vs">vs</option>
    </select>

    <pre id="code">
    function hello() {
      console.log("Hello, world!");
    }
</pre>

<option value="default">default</option>

<option value="rainbow">rainbow</option>

</select>

function hello() {

console.log("Hello, world!");

}

</pre>

As you can see we have the select dropdown field where we allow the user to select the theme of the syntax highlighter. And then we are have the pre tag where we are writing the source code that we want to highlight. And basically you can get the list of all the themes of the highlight.js library as shown below

You can go to the official website of highlight.js as shown below to get the name of the themes as shown below

And now we will be writing the custom javascript code for this app

index.js

 window.onload = function () {
            var code = document.getElementById("code");
            hljs.highlightBlock(code);
        };
        function updateTheme(theme) {
            document.getElementById("theme").href = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/styles/" + theme + ".min.css";
        }

window.onload = function () {

var code = document.getElementById("code");

hljs.highlightBlock(code);

};

function updateTheme(theme) {

document.getElementById("theme").href = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/styles/" + theme + ".min.css";

}

As you can see we have the onload event handler where we are getting the source code and then we are using the highlightBlock() method to highlight the source code. And then when the user changes the theme we are updating the href attribute to change the css of the theme of the highlight.js library.

FULL SOURCE CODE

index.html

<!DOCTYPE html>
<html>

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/highlight.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/styles/default.min.css"
        id="theme">
    <script>
        window.onload = function () {
            var code = document.getElementById("code");
            hljs.highlightBlock(code);
        };
        function updateTheme(theme) {
            document.getElementById("theme").href = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/styles/" + theme + ".min.css";
        }
    </script>
</head>

<body>
    <select onchange="updateTheme(this.value)">
        <option value="default">default</option>
        <option value="a11y-dark">a11y-dark</option>
        <option value="atom-one-dark">atom-one-dark</option>
        <option value="rainbow">rainbow</option>
        <option value="vs">vs</option>
    </select>

    <pre id="code">
    function hello() {
      console.log("Hello, world!");
    }
</pre>
</body>

</html>

<!DOCTYPE html>

<html>

<head>

id="theme">

window.onload = function () {

var code = document.getElementById("code");

hljs.highlightBlock(code);

};

function updateTheme(theme) {

document.getElementById("theme").href = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/styles/" + theme + ".min.css";

}

</script>

</head>

<body>

<option value="default">default</option>

<option value="rainbow">rainbow</option>

</select>

function hello() {

console.log("Hello, world!");

}

</pre>

</body>

</html>