Blog code syntax highlighting
Answered
West African Crocodile posted this in #help-forum
West African CrocodileOP
Has anyone found a library for code syntax highlighting that works with server components?
I tried this library https://www.npmjs.com/package/react-syntax-highlighter but I get an error "Error [TypeError]: Super expression must either be null or a function" when trying to use it in a server component but when I 'use client' it works great. Obviously , I'd like my blog pages to be static generated so this isnt great...
anyways if anyone has a tech blog that has code snippets and has solved this and or has a good library let me know!
I tried this library https://www.npmjs.com/package/react-syntax-highlighter but I get an error "Error [TypeError]: Super expression must either be null or a function" when trying to use it in a server component but when I 'use client' it works great. Obviously , I'd like my blog pages to be static generated so this isnt great...
anyways if anyone has a tech blog that has code snippets and has solved this and or has a good library let me know!
9 Replies
@joulev Try https://rehype-pretty-code.netlify.app/
West African CrocodileOP
awesome on it!
That is for markdown parsing, you could just use shiki server side APIs directly if you don’t need markdown
@joulev That is for markdown parsing, you could just use shiki server side APIs directly if you don’t need markdown
West African CrocodileOP
yea mostly my snips will be SCSS or Javascript
@West African Crocodile yea mostly my snips will be SCSS or Javascript
As in, the above is for code blocks inside markdown so if you write your content in markdown for example it will work very well
But if you don’t use markdown for the content but pass the code string directly to a react component then using markdown utilities might be a bit overkill
But if you don’t use markdown for the content but pass the code string directly to a react component then using markdown utilities might be a bit overkill
In that case just make a server component that wraps shiki’s nodejs API
West African CrocodileOP
this worked! what made it more complext is im using a CMS contentful
just fyi this is how I got it going.
Nice, looks great!