Support syntax highlight for pm- tabs

[pi0]

Example usage: https://github.com/unjs/undocs/blob/main/layers/core/app/components/global/Pm-x.vue

Relavant PR #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 🙏🏼

[cpreston321]

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

[pi0]

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)

[cpreston321]

Ref: https://github.com/pi0/nuxt-shiki

[pi0]

Let's see if we can fix it once for all and all of us! nuxt-modules/mdc#148 nuxt/ui#1361

[cpreston321]

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

[cpreston321]

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 :)

[pi0]

Feel free to open issues in repo or make PRs to help on it :)

[cpreston321]

Just for my reference of the current tree:

@nuxt/mdc -> @nuxt/content -> @nuxt/ui.

@nuxt/mdc

Contains the main code for the parser and rehype.

• nuxt-modules/mdc@main/src/runtime/highlighter

@nuxt/content

Nuxt content uses mdc to run the shiki code.

• antfu/nuxt-content-twoslash

@nuxt/ui

Creates a useShikiHighlighter composable for there custom ui components to parse code blocks

• nuxt/ui@dev/docs/composables/useShikiHighlighter.ts

[farnabaz]

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.

[pi0]

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)

[farnabaz]

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.

[pi0]

(it seems mission impossible today to fix this in a proper way, i give up)