DEV Community

Cover image for How to use Highlight.js on a Next.js site
Ondrej Polesny for Kontent.ai

Posted on

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

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.

Top comments (5)

Collapse
 
inezabonte profile image
Ineza Bonté Grévy

How can I use a different highlight.js theme?

Collapse
 
chrysillala profile image
Chrysilla Mayasari

You could just replace the default theme name inside <Head> with your desired theme

<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.3.2/build/styles/{ THEME_NAME }.min.css"></link>
Enter fullscreen mode Exit fullscreen mode

or

import the theme to add the styles locally (as mentioned in the article) and replace the default theme. On my code below, I switch the theme to night-owl.

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

Hopefully this helps!

Collapse
 
inezabonte profile image
Ineza Bonté Grévy

Do I have to import each language that I'm using in my code snippets

Thread Thread
 
chrysillala profile image
Chrysilla Mayasari

The short answer would be yes. However, you could also import common subset of languages predefined by highlight.js using this syntax

import hljs from 'highlight.js/lib/common';
Enter fullscreen mode Exit fullscreen mode

So you won't need to import each language but this might result in bigger bundle size, compared with importing only the languages you need.

Collapse
 
movlamovnasir profile image
movlamovnasir

How import themes dynamically based on value