How to use Highlight.js on a Next.js site
Tags: highlight, nextjs, react, code
Published: 2020-11-16 11:47:33

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](https://highlightjs.org) 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](https://highlightjs.org/download/) 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](https://highlightjs.org/usage/) 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:

```html
<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>
```

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:

```html
<pre><code className="js">
{`
your code
`}
</code></pre>
```

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

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

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:

```js
import hljs from 'highlight.js';
import javascript from 'highlight.js/lib/languages/javascript';
hljs.registerLanguage('javascript', javascript);
```

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:

```js
{
    ...
    useEffect(() => {
        hljs.initHighlighting();
    }, []);
    ...
    return (
        *JSX*
    )
}
```

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](http://jmblog.github.io/color-themes-for-highlightjs/) 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](https://github.com/ondrabus/personal-site/blob/master/pages/fetch-api-cheatsheet.tsx).