Syntax Highlighting mit Prism und Next.js

Bildquelle: ESA/DLR/FU Berlin; CC BY-SA 3.0 IGO (bearbeitet)

ReactCSSNext.js

Syntax Highlighting mit Prism und Next.js

Prism ist ein kompakter, erweiterbarer Syntax-Highlighter, der unter Berücksichtigung moderner Webstandards entwickelt wurde.

Um Prism mit Next.js nutzen zu können muss man als aller Erstes prism installieren: Das kann man entweder über das npm-package mit

npm install prismjs bzw. yarn add prismjs

oder unter https://prismjs.com/download.html eine entsprechendes CSS- und JS-File herunterladen.

Am Besten man importiert Prism direkt in ein separates Layout-Component mit:

 // in Layout.js
  import React,  { useEffect } from "react"
  import Prism from "Prismjs";
  
  function Layout(props) {
    useEffect(() => {
      Prism.highlightAll();
    }, []);
    
    // ...
  }

Damit werden über einen React-Hook alle Code-Tags hervorgehoben.

Nun fehlt nurnoch die passende Darstellung, welche man in [_app.js] einfach importieren kann

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

More Articles: