Using highlight.js in React

March 14, 2022 (a year ago)

TL;DR: Here's a quick example

If you're making a post or blog, it's important to make sure your code examples are highlighted so that people can read them. Here is a highlighted example snippet:

beforeEach(() => {
test("city database has Vienna", () => {

highlight.js is a very popular package for highlighting code on a webpage. It has great features like:

  • It's themeable

  • It's generic and doesn't require much configuration

  • It can auto-detect the language you're using


First, make sure that you include the stylesheet with

import "highlight.js/styles/github.css";

In Next.js, this will mean adding the above line to _app.tsx / _app.js.

In React, put the trigger for highlight.js in a useEffect. Copy the following code.

// Very important to import the css file. In next.js, put the following line in `_app.js` instead.
import "highlight.js/styles/github.css";
import hljs from "highlight.js";
import { useEffect } from "react";

function Index() {
  useEffect(() => {
  }, []);

You can also use a useLayoutEffect hook for this too. Click here for a full demo.

Sometimes highlight.js has trouble detecting the language of your code. To fix this, you can add a data-language attribute to your code block. For example, in markdown:



Voila! You're done.


Customizing / Advanced usage

Highlight.js has its options here:

e.g. Highlight custom elements

document.querySelectorAll("pre code").forEach((el) => {


highlight.js is themeable, meaning you can make the colours look how you like on a webpage. This is a great for making sure your highlighted code matches the theme of your website.

For dark mode themes dracula-highlight-js is a good pick, and the default theme is good for light mode. There are more themes on the left.

Final words

Please let me know how you go! And thank the product authors for their fabulous products.

Related posts


Use your favourite games to enhance your users' experience

19 December 2022 (2 months ago)