Closed pi0 closed 5 months ago
It seems for custom components they implemented kinda of the same way in nuxt/ui -> https://github.com/nuxt/ui/blob/dev/docs/composables/useShikiHighlighter.ts
That's not good :( I hope there was one standard shiki module that provided this functionality at least. /cc @antfu @farnabaz what do you think? (thinking could be vue-shiki also or use-shiki but is taken)
Let's see if we can fix it once for all and all of us! https://github.com/nuxt-modules/mdc/issues/148 https://github.com/nuxt/ui/issues/1361
I would also mention they use plugins and also use shiki re-hype etc. I don't if it's good to create ways to implement these within nuxt-shiki
too for them to fully support it. https://github.com/nuxt-modules/mdc/tree/main/src/runtime/highlighter
Also not mention another layer that antfu was working up could be releated but could be merged in with nuxt-shiki
possibly -> https://github.com/antfu/nuxt-content-twoslash
Kinda all over the place assuming a bunch of deps of shiki :)
Feel free to open issues in repo or make PRs to help on it :)
Just for my reference of the current tree:
@nuxt/mdc -> @nuxt/content -> @nuxt/ui
.
Contains the main code for the parser and rehype.
Nuxt content uses mdc to run the shiki code.
Creates a useShikiHighlighter
composable for there custom ui components to parse code blocks
As I checked the repo, I'm suggesting not to run shiki separately. We can achieve with a simple remark plugin to convert pm-x
into code-group
at parse time. (Using latest mdc module)
// mdc.config.ts
import { defineConfig } from '@nuxtjs/mdc/config'
import { visit } from 'unist-util-visit'
export const packageManagers = [
{ name: 'npm', command: 'npm', install: 'i', run: 'run ', x: 'npx' },
{ name: 'yarn', command: 'yarn', install: 'add', run: '', x: 'yarn dlx' },
{ name: 'pnpm', command: 'pnpm', install: 'i', run: '', x: 'pnpx' },
{ name: 'bun', command: 'bun', install: 'i', run: 'run ', x: 'bunx' },
] as const
export default defineConfig({
unified: {
pre: (stream) => {
stream.use(() => {
return (tree) => visit(tree, (node) => node.name === 'pm-x', (node) => {
node.name = 'code-group'
node.children = packageManagers.map((pm) => {
return {
type: 'code',
lang: 'bash',
meta: `[${pm.command}]`,
value: `${pm.x} ${node.attributes.command}`,
}
})
})
})
return stream
}
}
})
This mean that pm-x
component is only useful for typing and meta information and will be replaced by code-group
As for UI Docs, The use case is totally different, in UI Docs we needed to highlight dynamic code in runtime, based on user inputs. Shiki should run in client side. But here we need to highlight codes only at built time.
Thanks but i prefer a real simple way to a real simple problem not making it more complex this way!
Code group does not allows rendering single markdown renderer not even additional comment blocks inside it work (a limitation with UI pro) and MDC does not exposes shiki utils (thatโs why made nuxt-shiki module to be able to reuse)
I don't suggest using ProseCode
this way, but you can use it if you see remark plugin complex for you.
As for shiki utils, we can improve mdc module to simplify usage.
(it seems mission impossible today to fix this in a proper way, i give up)
Example usage: https://github.com/unjs/undocs/blob/main/layers/core/app/components/global/Pm-x.vue
Relavant PR https://github.com/unjs/undocs/pull/41
/cc @farnabaz @benjamincanac if you have any ideas how to properly use UI+MDC to highlight with programmatic tabs that would be really appreciated if can help ๐๐ผ