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.
Webmentions
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!