Syntax Highlighting with Prism.js and Next.js

Syntax Highlighting with Prism.js and Next.js

Prism.js is a compact, expandable syntax highlighter that was developed with modern web standards in mind.

To be able to use Prism.js with Next.js, the first thing you have to do is to add Prism.js to your project with

npm install prismjs


yarn add prismjs

Afterwards you need to import Prism.Js into all pages where you want code to be highlighted I am for example importing it into a layout component which wraps the whole web app:

 // in Layout.js
  import React,  { useEffect } from "react"
  const prism = require("prismjs")

  function Layout(props) {
    useEffect(() => {
    }, []);
    // ...

With this, all code tags are highlighted via a react hook. I also imported highlighting for Python because it's not included by default.

Now the only thing missing is the styling theme, which can simply be imported into _app.js with

 // in _app.js

  import "prismjs/themes/prism-tomorrow.css";
  export default function App({ Component, pageProps }) {
    return <Component {...pageProps} />;

Instead of 'prism-tomorrow' you could also import the default-one or for example `prism-okaidia.

Have a look at to find all premade themes. Of course you can also create a custom theme.

About The Author

Max Dietrich
Max Dietrich

Geospatial Developer

Hi, I'm Max (he/him). I am a geospatial developer, author and cyclist from Rosenheim, Germany.

0 Virtual Thanks Sent.

0 Webmentions

Have you published a response to this? Send me a webmention by letting me know the URL.

Found no Webmentions yet. Be the first!


Continue Reading

  1. Building a Table of Contents (TOC) from markdown for your React blog

    How to create a Table of Contents (TOC) from markdown for your React blog with Javascript without any third party dependencies.

    Continue reading...

  2. How to create a custom cookie banner for your React application

    Recently I implemented a custom cookie banner solution on my Next.js site which you probably have seen a few seconds before. There are a lot of prebuilt cookie banners you can use for React or Next js sites but i wanted to create a custom cookie banner which also has some personal touch and keeps the design with the website in line.

    Continue reading...

  3. Fetching and storing activities from Garmin Connect with Strapi and visualizing them with NextJS

    Step-by-step guide explaining how to fetch data from Garmin Connect, store it in Strapi and visualize it with NextJS and React-Leaflet.

    Continue reading...