highlight.js

October 29, 2024

About three months ago, I began coding my own website. Like any beginner, I started reading documentations and following tutorials to get the basics down. Soon, I was learning a whole new set of concepts and languages essential to web development. And I quickly realized that web development has its own Three Musketeers*.

First, there’s HTML (Hypertext Markup Language), the foundation, responsible for content and structure. Then comes CSS (Cascading Style Sheets), which adds style and personality to that structure. And finally, JS (JavaScript) is the dynamic member of the group, making everything interactive. In a supporting role, we have PHP (Hypertext Preprocessor), which helps bridge gaps between HTML and JS, adding a layer of flexibility.

With these four in hand, I began to experiment, and after some time, I managed to build a website with a first structure satisfying my needs. But, like a Christmas tree without ornaments, it needed a bit of decoration to really come alive. That’s when I discovered dynamic code highlighting.

With JS and a library called highlight.js, I could add color to code snippets on my site, making them easier to read and, frankly, a bit more engaging. Here is an example:

 
#include <iostream>

int main() {
    std::cout << "Hello World!";
    return 0;
}

 
#include <iostream>

int main() {
    std::cout << "Hello World!";
    return 0;
}

On the left-hand side (top), you have what I used initially, and on the right-hand side (bottom), this is what highlight.js can do. Not only does highlight.js change the color of some parts of the code, but it also gives a background color.

The implementation is actually quite simple. According to the official documentation , one would have to put the following lines of code in their HTML header:

     
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js'></script>
<script>hljs.highlightAll();</script>

And use the following HTML tags:

     
<pre><code> Enter some code here </code></pre>

Should the language not be recognized automatically, it is also possible to add it as a class, like the in the following:

     
<pre><code class='language-html'> Enter some code here </code></pre>

As listed in the official documentation demo, there are several themes available. These can be used instead of the theme that was selected for this website, as demonstrated in the following two examples.

In the case of the left-hand side (top) code, the theme atom-one-dark is applied, and on the right-hand side (bottom), the theme xcode with a different background color is illustrated. The following stylesheet has to be applied, respectively:

     
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/xcode.min.css'>

It wasn’t anything revolutionary, but seeing those static blocks come to life with color felt like a small win, and it gave me just enough encouragement to keep exploring what else these musketeers could do.

* For the sake of completeness: HTML: Athos (the steady, reliable backbone of the group), CSS: Porthos (with its flair for style and appearance), JS: Aramis (quick and adaptable), PHP: D’Artagnan (supporting role)

Christmas Bonus