Syntax Highlighting with Prism and Next.js

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

To be able to use Prism with Next.js, the first thing to do is to install prism: You can either use the npm package with

npm install prismjs or yarn add prismjs

or download a corresponding CSS and JS file from

It is best to import Prism directly into a separate layout component with:

 // 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. Also i imported highlighting for Python because it's not included by default.

Now the only thing missing is the appropriate code visualisation, which can simply be imported into _app.js

 // in _app.js
  import "../styles/global.scss";
  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 or for example `prism-okaidia' or just create your own theme.


What’s this?

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

Found no Webmentions yet. Be the first!