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

or

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")
  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

 // 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.

About The Author

Max Dietrich
Max Dietrich

Geospatial Developer

Currently i work as IT-Architect at Bayernwerk. Beside that I ride my mountain bike in the alps, code and design my website and publish new content on my website whenever i can.

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!

Newsletter

Continue Reading

  • How to create web maps with Leaflet, React and functional components

    In this article I will explain how you can create a basic web map with Leaflet and React by using functional components without any third party packages. Continue reading...
  • How to create a custom cookie banner for your React application

    How I created and designed my cookie banner which hopefully will help you in creating your own for your Next.js or React application. Continue reading...
  • How to add Google Adsense to Next.js applications

    In this article I am going to explain how you can implement Google Adsense in Next.js applications. There are several approaches for implementing Adsense on a react site and I will show how you can add Adsense with privacy in mind. Continue reading...