Installing Prism Syntax Highlighting In NextJS

November - 2021

NOTE - This may not be the best way to do this

I'm having problems with line highlighting with errors like:

Warning: Prop `className` did not match. Server: "line-numbers language-jsx" Client: "line-numbers"

I'm now looking at this:

Install with NPM

npm install prismjs

In your pages, do:

(NOTE: I haven't fully tested this code yet so there may be a compile bug in it)

import { useEffect } from 'react'

import Prism from 'prismjs'
import 'prismjs/themes/prism-tomorrow.css'

export default function Page() {
    useEffect(() => {
        if (typeof window !== 'undefined') {
    }, [])

return <pre><code class="language-css">YOUR CSS GOES HERE</code></pre>

You can see the themes in your projects node_modules/prismjs/themes directory.

When I installed it, the were:

prism-coy.css                prism-okaidia.css            prism-twilight.css
prism-coy.min.css            prism-okaidia.min.css        prism-twilight.min.css
prism-dark.css               prism-solarizedlight.css     prism.css
prism-dark.min.css           prism-solarizedlight.min.css prism.min.css
prism-funky.css              prism-tomorrow.css
prism-funky.min.css          prism-tomorrow.min.css

There are other themes here, but I haven't looked at how to install them yet.

Original notes to review:

This is the basics of what got me going.

TODO: Make my own version of the example.

TODO: See if pygments can be setup for different styles