Allow endusers to modify the shiki configuration

[lurr]

Is your feature request related to a problem? Please describe.

I've been writing a small website on the side, and am looking to add custom languages (e.g. LC-3) to shiki for the articles.
I've noticed there's no way to configure this within .vitepress/config.ts, and I do not want to resort to modifying the shiki package to do this.

Describe the solution you'd like

As described on https://shiki.matsu.io/, custom languages can be loaded during the getHighlighter call:

getHighlighter({
  theme: 'nord',
  langs: [
    {
      id: 'rockstar',
      scopeName: 'source.rockstar',
      path: './rockstar.tmLanguage.json' // this can also be a JSON object describing the grammar, doesn't need to load from a file.
    }
  ]
})

Another method is to use highlighter.loadLanguage(lang) afterwards.

It would be great if we could specify arguments to shiki.getHighlighter in .vitepress/config.{js,ts} as we can with markdown-it, vue, etc.

Describe alternatives you've considered

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the docs.
• Read the Contributing Guidelines.
• Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.

[brc-dd]

You can directly pass your highlighter function.

[lurr]

You can directly pass your highlighter function.

Took a while to figure this one out - had to add @types/markdown-it to my devDependencies to make it happy with that.
Thanks for the pointer! This was actually resolved by #857

[brc-dd]

Yeah, it's not documented yet.

Also, I don't think it'll work with shiki. Shiki's APIs are async, and we are just asking for options.highlight. So unless one can do top-level await in vitepress config file, how will they get the highligher instance?! 👀 How did you do it?

[lurr]

Yeah, it's not documented yet.

Also, I don't think it'll work with shiki. Shiki's APIs are async, and we are just asking for options.highlight. So unless one can do top-level await in vitepress config file, how will they get the highligher instance?! eyes How did you do it?

I defined the following:

export async function highlighter() {
    const highlighter = await getHighlighter({
        theme: 'material-palenight'
    })

    // Inject another grammar
    highlighter.loadLanguage(lc3)

    const preRE = /^<pre.*?>/
    const vueRE = /-vue$/

    return (str: string, lang: string) => {
        const vPre = vueRE.test(lang) ? '' : 'v-pre'
        lang = lang.replace(vueRE, '')

        return highlighter
            .codeToHtml(str, { lang, theme: 'material-palenight' })
            .replace(preRE, `<pre ${vPre}>`)
    }
}

I figured out that vitepress loads the configuration by awaiting the config; which allows you to do things such as

export default async () => defineConfig({
    ...
    markdown: {
        highlight: await highlighter()
    },
    ...
})

From there, I had access to an async context and could do anything.

[brc-dd]

I figured out that vitepress loads the configuration by awaiting the config; which allows you to do things such as

Ah, we actually use Vite's loadConfigFromFile. Good to know it supports async config too. 👍