The words Under construction in black text on a yellow background with diagonal black stipes surrounding it
I'm in the process of moving my site. It's still a work in progress. Please excuse the mess and broken links.

Installing Prism Syntax Highlighting In NextJS

TODO: Pull subtitle into page object

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

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

code_start_default_section code_end_default_section

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

https://github.com/PrismJS/prism-themes

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

https://mxd.codes/articles/syntax-highlighting-with-prism-and-next-js

Debugging Stuff

I'm moving stuff around right now. All this below is helping me figure out where to put stuff

        -- title

Installing Prism Syntax Highlighting In NextJS

-- p

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

-- p

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

-- code/

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

-- /code

-- p

I'm now looking at this:

-- p

https://github.com/FormidableLabs/prism-react-renderer

-- p

Install with NPM

-- code/

npm install prismjs

-- /code

-- p

In your pages, do:

-- p

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

-- code/

import { useEffect } from 'react'

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


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



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

-- /code

-- p

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

-- p

When I installed it, the were:

-- code/

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

-- /code

-- p

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

-- p

https://github.com/PrismJS/prism-themes

-- p

Original notes to review:

-- p

This is the basics of what got me going.

-- p

TODO: Make my own version of the example.

-- p

TODO: See if pygments can be setup for different styles

-- p

https://mxd.codes/articles/syntax-highlighting-with-prism-and-next-js


-- categories
-- JavaScript
-- Next.js

-- metadata
-- date: 2021-11-14 15:35:32
-- id: 20vpy7wk
-- status: draft
-- type: post
-- SCRUBBED_NEO: false
-- site: aws