How to Create and Use a Syntax Highlighter using JavaScript?

Last Updated : 20 Aug, 2024

A syntax highlighter is a tool that colorizes the source code of programming languages, making it easier to read by highlighting keywords, operators, comments, and other syntax elements in different colors and fonts. In JavaScript, you can create a syntax highlighter by either manually writing your own code or by using existing libraries.

These are the following approaches to create and use a Syntax Highlighter using JavaScript:

Table of Content

Using Regular Expressions
Using Tokenization and Parsing

Using Regular Expressions

This approach involves using regular expressions to match and replace various parts of the code with HTML elements that have specific CSS classes applied. Each regex pattern corresponds to a specific type of syntax (e.g., keywords, comments, strings).

Example: In this example, JavaScript code is parsed with regular expressions, and different parts of the code (comments, keywords, strings) are wrapped with <span> elements with appropriate classes.

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0">
    <title>Regular Expression-Based Syntax Highlighter</title>
    <style>
        .keyword {
            color: blue;
            font-weight: bold;
        }

        .operator {
            color: red;
        }
    </style>
</head>

<body>
    <pre id="code">
    let x = 5 + 10;
    if (x > 10) {
        console.log("x is greater than 10");
    }
    </pre>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            let codeElement = document.getElementById('code');
            let code = codeElement.textContent;

            // Escape special HTML characters
            code = code.replace(/&/g, "&amp;")
                .replace(/</g, "&lt;")
                .replace(/>/g, "&gt;");

            // Combine regexes to capture keywords and operators
            let combinedRegex = /(\b(let|if|else|console|log)\b)|([\+\-\*\/=])/g;

            // Replace with spans for keywords and operators
            code = code.replace(combinedRegex, function 
                                (match, keyword, keywordGroup, operator) {
                if (keyword) {
                    return `<span class="keyword">${keyword}</span>`;
                } else if (operator) {
                    return `<span class="operator">${operator}</span>`;
                }
                return match;
            });

            codeElement.innerHTML = code;
        });
    </script>
</body>

</html>

Output:

Using Tokenization and Parsing

In this approach, the code is first tokenized into its components (keywords, operators, identifiers, etc.), and each token is analyzed and styled according to its type. This is more complex but offers finer control and better accuracy.

Example: This splits code into tokens, analyzes each token, and applies specific styles based on token types (e.g., keywords, operators) to enhance code readability.

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0">
    <title>Tokenization-Based Syntax Highlighter</title>
    <style>
        .keyword {
            color: blue;
            font-weight: bold;
        }

        .operator {
            color: red;
        }
    </style>
</head>

<body>
    <pre id="code">
    let x = 5 + 10;
    if (x > 10) {
        console.log("x is greater than 10");
    }
    </pre>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            let codeElement = document.getElementById('code');
            let code = codeElement.textContent;

            // Split the code into tokens
            let tokens = code.split(/(\s+|\b)/);

            // Highlight keywords
            let keywords = ['let', 'if', 'else', 'console', 'log'];

            tokens = tokens.map(function (token) {
                if (keywords.includes(token)) {
                    return `<span class="keyword">${token}</span>`;
                } else if (/[\+\-\*\/=]/.test(token)) {
                    return `<span class="operator">${token}</span>`;
                }
                return token;
            });

            codeElement.innerHTML = tokens.join('');
        });

    </script>
</body>

</html>

Output:

Conclusion

Each approach to creating a syntax highlighter has its strengths and trade-offs. For simple projects, regular expressions might be sufficient. For more complex needs, tokenization offers better control, while libraries like Prism.js or Highlight.js are best for comprehensive and easy-to-use solutions.