October 9, 2021

How to Highlight Code Syntax in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to highlight code syntax in javascript. If you have some sort of coding or programming blog, then code syntax highlighting is very important. If you don’t have this feature, then it will surely become difficult for your web users to differentiate between code and regular text content.

Implementing such functionality from scratch is not easy since there are a lot of programming languages and each language has a certain coding syntax. If you are using wordpress for your blog, then you can go with the Englighter wordpress plugin.

If you are not using wordpress and created your blog on your own by using some sort of framework such as React, Angular, or Vue, then I recommend you to go with third-party libraries such as Highlight JS. This library is extremely useful and easy to use.

This is not going to be a detailed overview of Highlight JS, so I recommend you to please visit its official website to learn more about it.

In the following example, we will enter some random javascript code and highlight it using Highlight JS. Please have a look over the code example and the steps given below.

HTML & CSS

We have 2 elements in the HTML file (pre and code). These two tags are required to make Highlight JS work.
The code element has a class attribute. The value of this class attribute depends upon the programming language to which the code syntax belongs. In our case, we are using javascript code so we can set its value to “javascript”. To remove highlighting, you can make use of “nohighlight”.

The Highlight JS has different themes for code syntax highlighting. You can pick any theme of your choice from its official website and add it using the link element. In our case, we are using the CDN link of monokai theme.
We have added a minified version of Higlight JS using the script tag. We are using a CDN link here but you can also download it and host it locally on your server.
We have also included our javascript file script.js with a script tag at the bottom.

Javascript

The functionality of Highlight JS is exposed by the hljs object and this object contains the initHighlightingOnLoad() method. We need to call this method to initialize Highlight JS. This is all that is required for its basic functionality.

NOTE: At the time of this tutorial, we are using an old version (v9.16.10) of Highlight JS. If you are using latest version, then please use highlightAll() method instead of initHighlightingOnLoad() method.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/monokai.min.css">
    <title>Document</title>
</head>

<body>

    <pre>
        <code class="javascript">
                const name = 'peter';
                document.addEventListener('DOMContentLoaded', (event) => {
                    document.querySelectorAll('pre code').forEach((block) => {
                      hljs.highlightBlock(block);
                    });
                  });
        </code>
    </pre>

    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
</body>

</html>

You May Also Like: