migrate/support `shikiji`
dimaMachina opened this issue · comments
shikiji has better support for dual themes rather than shiki that renders each code block twice 🫠.
Recently I migrated Nextra to shikiji-compat (compatible build of shikiji to align with shiki) https://github.com/shuding/nextra/blob/22a856dec5c4088e5726cf69fd062f6af3a18969/packages/nextra/package.json#L138
with the following monkey patching of getHighlighter option https://github.com/shuding/nextra/blob/22a856dec5c4088e5726cf69fd062f6af3a18969/packages/nextra/src/server/compile.ts#L57-L81
will be great if rehype-pretty-code migrates or supports shikiji
Just tried to replace shiki with shikiji-compat and give it a try. Seems good so far and I don't need any sort of workaround to make shiki work in SSR (it is needed previously due to the way shiki load theme and languages).
The only issue is when the language is, txt doesn't seem to have color applied, unlike shiki.
Shikiji looks good. So shikiji-compat currently works with this plugin, but native shikiji does not?
Native shikiji not, shiki-compat works but without the support of dual themes - to fix it I patched some stuff mentioned in the initial message
Here is new patch to make works shikiji and dual themes https://github.com/shuding/nextra/blob/63ca28bed7ecc0f92a348bb4b539b714b3dbbc85/packages/nextra/src/server/compile.ts#L57-L81
Ok got it, is that due to getHighlighter needing an explicit array of themes for them to load?
I'll take a look at migrating this weekend.
In shikiji you need always explicitly pass the desired languages, also codeToHtml arguments are different for shikji and shikiji, that was a reason to creating shiki-compat. And, ansiToHtml doesn’t exist in shikiji
Given the compat version is being used, why do you need to patch the codeToHtml? Shouldn't their signatures be identical?
To support dual themes, I don’t remember but I guess rehype-pretty-code renders code blocks twice when you pass multiple themes
Anyway I would suggest to completely drop shiki in favor of shikiji
And completely drop cjs bundle in favour esm only, which I already suggested
Yeah might as well at this point. If someone needs CJS support v0.10 will still exist.
There may be a blocker I found. It doesn't seem like you can load multiple themes in Shikiji if they aren't built-in ones (i.e. a custom JSON object/ThemeRegistrationRaw type)
I published a beta version to try out:
npm i rehype-pretty-code@betaChanges include more semantic/accessible HTML:
- Top-level block
div[data-rehype-pretty-code-fragment]->figure[data-rehype-pretty-code-figure]+figcaptionfor either the title or caption, with the caption taking precedence for that element - Highlighted chars are wrapped in
<mark> data-themeis space-separated since there's only a single block now, with CSS variables.- To enable highlighting with multiple themes, target a space in
data-theme, as variables are then available to use:
[data-rehype-pretty-code-figure] code[data-theme*=' '],
[data-rehype-pretty-code-figure] code[data-theme*=' '] span {
color: var(--shiki-light) !important;
background-color: var(--shiki-light-bg) !important;
}
@media (prefers-color-scheme: dark) {
[data-rehype-pretty-code-figure] code[data-theme*=' '],
[data-rehype-pretty-code-figure] code[data-theme*=' '] span {
color: var(--shiki-dark) !important;
background-color: var(--shiki-dark-bg) !important;
}
}- Other misc changes are Shikiji-based, see here
Why is the doc missing this CCS part you just gave @atomiks. Thanks !
Ah nevermind, the doc is just messy. Thanks :)