loading...
Cover image for How to use Highlight.js on a Next.js site
Kentico Kontent

How to use Highlight.js on a Next.js site

ondrabus profile image Ondrej Polesny ・3 min read

Is your blog built using Next.js and you want to use syntax highlighting on code samples? This short guide will show you how to plug Highlight.js into your Next.js site.

What is Highlight.js?

Highlight.js is a Javascript library that turns code samples into highlighted code. You can get the whole bundle from CDN and plug it into your website, however, it's rather large as it supports tens of programming languages including Javascript, C#, CSS, Ruby, PHP, and many more.

A better approach is to select only the languages you will need on your site. I'm using just Javascript bundle currently, but it's possible to have any combination that fits your programming interests and focus.

Highlight.js is activated when your site loads and adjusts the look and feel of your code samples using its own CSS.

How to use syntax highlighting on a Next.js site

Using Highlight.js on an HTML page is easy using global bundles. On a Next.js site built with React and JSX, it gets a bit more complicated.

Install Highlight.js

First, you need to install Highlight.js using Node:

npm i highlight.js

Then open the page you want to use code highlighting on. This would typically be a blog post template. First, add the stylesheet to your template markup:

<React.Fragment>
    <Head>
        ...
        <link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.3.2/build/styles/default.min.css"></link>
    </Head>
...
</React.Fragment>
Enter fullscreen mode Exit fullscreen mode

You can also add the styles locally if you want to avoid using an external resource by importing them into your _app.tsx:

import 'highlight.js/styles/default.css';

Add your code samples into JSX

To add your code into JSX, follow this simple pattern:

<pre><code className="js">
{`
your code
`}
</code></pre>
Enter fullscreen mode Exit fullscreen mode

As long as your code does not contain backticks, this will nicely escape all special characters. Take a look at this simple Javascript example:

<pre><code className="js">
{`fetch('{url}')
    .then(response => console.log(response));
`}
</code></pre>
Enter fullscreen mode Exit fullscreen mode

The class name helps Highlight.js recognize the used programming language and adjust the highlighted color scheme.

Initialize Highlight.js

The final step is to plug Highlight.js in and let it scan and adjust all the code samples. Add the following code to the top of your template:

import hljs from 'highlight.js';
import javascript from 'highlight.js/lib/languages/javascript';
hljs.registerLanguage('javascript', javascript);
Enter fullscreen mode Exit fullscreen mode

If you want to use multiple languages, repeat the bottom two lines for all of them.

Highlight.js needs to be activated when the page is rendered. You can use React Hooks to do so:

{
    ...
    useEffect(() => {
        hljs.initHighlighting();
    }, []);
    ...
    return (
        *JSX*
    )
}
Enter fullscreen mode Exit fullscreen mode

And that's it 😊. Compile your site and check if syntax highlighting works.

Light & dark modes

If you're using multiple stylesheets on your site to adjust its colors, it's possible to also switch themes of syntax highlighting. Take a look at this project which contains stylesheets fitted for respective color schemes.

Conclusion

In this article, I showed you how to plug Highlight.js into your Next.js site. This approach can be also used on plain React sites or sites implemented using other static site generators like Gatsby. You can also check out the full implementation on my personal site on GitHub.

Discussion

pic
Editor guide