Code highlighting doesn't work

shuding / nextra

Simple, powerful and flexible site generation framework with everything you love from Next.js.

https://nextra.site

MIT License

11.63k stars 1.26k forks source link

Code highlighting doesn't work #253

Closed aidenybai closed 2 years ago

aidenybai commented 2 years ago

I'm having issues getting code highlighting to work for https://million.js.org (repo: https://github.com/millionjs/docs) on both dev and prod.

I've tried switching package managers (npm/yarn/pnpm), hard installing prismjs and prism-react-renderer as hard dependencies.

I've also tried to manually add support for the languages I use for codeblock highlighting via this doc, but it doesn't seem to work

Versions:

"next": "^12.0.4",
"nextra": "^1.1.0",
"nextra-theme-docs": "^1.2.6",
"react": "^17.0.2",
"react-dom": "^17.0.2"

Wondering if anyone can repro this issue? If so, anybody know a fix?

algoritmau commented 2 years ago

I'm having the same issue with the same set of dependencies and versions. No syntax highlighting at all.

aidenybai commented 2 years ago

@spaceinvadev do you currently have any workarounds?

algoritmau commented 2 years ago

Well, I decided to use another package for syntax highlighting: https://www.npmjs.com/package/react-syntax-highlighter

kanadgupta commented 2 years ago

I thought this was due to the mismatching MDX versions (which was addressed in #251), but I just tried this on v2.0.0-beta.3 (released a few hours ago) and can confirm it's still broken. Maybe https://github.com/shuding/nextra/issues/262 will address this?

shuding commented 2 years ago

Unfortunately Prism is a bit hard to use with React, I'm wondering if we should switch to https://github.com/react-syntax-highlighter/react-syntax-highlighter or https://github.com/shikijs/shiki. Shiki seems pretty well designed for today's ecosystem. And with #262 I'm trying to make all major languages supported with ease.

algoritmau commented 2 years ago

Shiki seems way much stronger and a better option to me.

aidenybai commented 2 years ago

Looks like #312 has fixed this issue! Install the alpha to fix

shuding commented 2 years ago

Friendly note: the new alpha version currently requires pnpm (yarn doesn't work, it's a bug that I'll look into :)) but feel free to try and give us feedback!

dsousa12 commented 1 year ago

Guys I can't put my code with colors. Already follow the steps on documentation, but I have errors because I'm using TypeScript. Anyone can help me?