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 https://prismjs.com/download.html.

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")
  require('prismjs/components/prism-python');

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

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.