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

bash
Copy code
npm install prismjs

or

bash
Copy code
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:

javascript
Copy code
// 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. 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

javascript
Copy code
// 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 https://prismjs.com/download.html to find all premade themes. Of course you can also create a custom theme.