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>
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>
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>
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);
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*
)
}
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)
How can I use a different highlight.js theme?
You could just replace the
defaulttheme name inside<Head>with your desired themeor
import the theme to add the styles locally (as mentioned in the article) and replace the
defaulttheme. On my code below, I switch the theme tonight-owl.Hopefully this helps!
Do I have to import each language that I'm using in my code snippets
The short answer would be yes. However, you could also import common subset of languages predefined by highlight.js using this syntax
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.
How import themes dynamically based on value