Open marcofranssen opened 1 year ago
As a workaround I now do following:
cd public
ln -s ../node_modules/shiki/dist dist
ln -s ../node_modules/shiki/themes themes
ln -s ../node_modules/shiki/languages languages
git add public
git commit -m "Add symlinks for shiki client-side integration"
Not sure if there is a better approach.
https://github.com/shikijs/shiki/issues/398#issuecomment-1531314736
However now realizing this breaks the build and only works in the development server.
In my blog I use tailwind and I have followed the instructions from the README.md. The page I share here is using the pages approach.
https://nextjs-blog-git-replace-code-blocks-highlighting-marcofranssen.vercel.app/git-recipes
components/code-block.tsx
lib/highlight.js
On this page I use the code-block as following:
I have following in the next config
What am I missing to make it work? 🤔
For other pages you might notice it does work as there I'm prepocessing the
md
files using rehype. https://nextjs-blog-git-replace-code-blocks-highlighting-marcofranssen.vercel.app/secure-your-software-supply-chain-using-sigstore-and-github-actionsThe code blocks that work are processed via rehype, the ones that don't work are the ones clientside resolving the content on the given url as shown in above example.
It would be really cool if this example could be updated to also show how to use shiki client-side using the wasm module.