The Search for the Best Syntax Highlighting

First Published:
Last Updated:
The Search for the Best Syntax Highlighting

A syntax highlighter changes the colour of certain keywords in code blocks so they are easier to read (and prettier to look at). I wanted a good syntax highlighter for my website, so my code blocks would look prettier.

I tried several colour themes, but until recently, I wasn’t happy with my syntax highlighting. Here’s what I tried to do:

Monokai Light Theme

Since I use Hugo to generate this site, I could use Chroma, the syntax highlighter that Hugo is shipped with. Still, I needed to pick a colour theme for it.

As I use the Monokai Pro theme in VS Code, which I really like, I thought that using a light version of the Monokai theme would be a good option. Even though the colours are quite different from Monokai Pro, it is also a bright and colourful theme.

I copied the CSS from the VS Code theme, then migrated it over to Chroma’s CSS classes by asking ChatGPT to assign the appropriate classes for me.

This is how it looked:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Short Syntax Test</title>
    <style>
        body { font-family: Arial, sans-serif; }
        .highlight { background-color: #ffff00; }
    </style>
</head>
<body>
    <h1>Short Syntax Highlighting Test</h1>
    <p>This is a <span class="highlight">highlighted</span> paragraph with some <strong>bold</strong> and <em>italic</em> text.</p>
    <ul>
        <li>List item 1</li>
        <li>List item 2</li>
    </ul>
    <table border="1">
        <tr><th>Header 1</th><th>Header 2</th></tr>
        <tr><td>Cell 1</td><td>Cell 2</td></tr>
    </table>
</body>
</html>

This isn’t very ugly, but the red is a bit too bright and loud for my taste. I changed the red to my brand colour, but I still wasn’t satisfied—I wanted the entire colour scheme to be more soothing.

Simple Flat Theme

I searched for more themes, and I tried to use the Simple Flat theme since it had darker tones.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Short Syntax Test</title>
    <style>
        body { font-family: Arial, sans-serif; }
        .highlight { background-color: #ffff00; }
    </style>
</head>
<body>
    <h1>Short Syntax Highlighting Test</h1>
    <p>This is a <span class="highlight">highlighted</span> paragraph with some <strong>bold</strong> and <em>italic</em> text.</p>
    <ul>
        <li>List item 1</li>
        <li>List item 2</li>
    </ul>
    <table border="1">
        <tr><th>Header 1</th><th>Header 2</th></tr>
        <tr><td>Cell 1</td><td>Cell 2</td></tr>
    </table>
</body>
</html>

This theme is more pleasant on the eyes, but I felt that it wasn’t quite there yet. I still had to adjust the colours and classes bit by bit so that the theme would look good in Chroma.

But porting the colours to Chroma this way was annoying—I realised that I should have just picked a theme that already had a Chroma port.

Catppuccin Latte

While searching for new Chroma themes, I stumbled across this theme called Catppuccin. It had a light palette called Latte, and I could just copy the Chroma port for it, so I didn’t have to adjust the CSS myself!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Short Syntax Test</title>
    <style>
        body { font-family: Arial, sans-serif; }
        .highlight { background-color: #ffff00; }
    </style>
</head>
<body>
    <h1>Short Syntax Highlighting Test</h1>
    <p>This is a <span class="highlight">highlighted</span> paragraph with some <strong>bold</strong> and <em>italic</em> text.</p>
    <ul>
        <li>List item 1</li>
        <li>List item 2</li>
    </ul>
    <table border="1">
        <tr><th>Header 1</th><th>Header 2</th></tr>
        <tr><td>Cell 1</td><td>Cell 2</td></tr>
    </table>
</body>
</html>

This looks fine, but I wasn’t satisfied with the highlighting for several other languages. I realised that my website’s syntax highlighting still looked worse than other websites, and that Chroma may not be the best syntax highlighter.

Highlight.js

I discovered that there were other syntax highlighters I could use, such as Highlight.js, Prism, and Torchlight. I chose Highlight.js since it’s the most popular of these options.

Catppuccin had a Highlight.js port, so I simply used that.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Short Syntax Test</title>
    <style>
        body { font-family: Arial, sans-serif; }
        .highlight { background-color: #ffff00; }
    </style>
</head>
<body>
    <h1>Short Syntax Highlighting Test</h1>
    <p>This is a <span class="highlight">highlighted</span> paragraph with some <strong>bold</strong> and <em>italic</em> text.</p>
    <ul>
        <li>List item 1</li>
        <li>List item 2</li>
    </ul>
    <table border="1">
        <tr><th>Header 1</th><th>Header 2</th></tr>
        <tr><td>Cell 1</td><td>Cell 2</td></tr>
    </table>
</body>
</html>

I think it looks great! I didn’t have to edit the CSS to find the right colours, as I already like how Catppuccin’s Latte palette looks.

So I found the best colour theme and syntax highlighter that works for my website. I realised that instead of fiddling around with the CSS, I could simply copy someone else’s homework. I’m really grateful for the open source community, which created Catppuccin and all these ports.