[Feature request] plugin-shiki migrate to use shikiji

[meteorlxy]

Clear and concise description of the problem

Shikiji is a pure esm rewrite of shiki, with some improvement.

Suggested solution

Migrate from shiki to shikiji. No need to update the plugin name, as shikiji might become shiki 1.0 in the future

Alternative

No response

Additional context

No response

[nruffing]

@meteorlxy @Mister-Hope

Looking for someone to pick this up? I would be happy to help.

[Mister-Hope]

sure, just pick it up. I am really busy with my article

[nruffing]

It doesn't look like I have permissions to assign the issue to myself but I will start working on this.

[nruffing]

Actually, is plugin-shiki even necessary anymore? Should we just use markdown-it-shikiji directly now?

[meteorlxy]

@nruffing As I remember, that plugin has its own highlightLine and language class implementation. I'm not sure if that's compatible with our default theme, or may introduce some breaking change to theme authors. You can investigate a little more about that.

[nruffing]

The breaking changes between shiki and shikiji are documented here. There is a shim build that restores most of them if necessary but there are still a couple potential breaking changes to theme developers (e.g. the css-variables theme is no longer supported).

It does appear that other than the css-variables theme all the same languages and themes are supported but the options contract passed to codeToHtml is changed to allow for dark and light themes to be configured. It also looks like the rendered markup is likely to be different as well.

We might be able to have the plugin use markdown-it-shikiji and shim the options to maybe support both the current themes type and the existing one but ultimately its a breaking change that seems like should be migrated to at some point.

The simple solution here though might be to just leave the shiki plugin as it is, migrate the vuepress docs to use markdown-it-shikiji directly, and update docs to recommend transitioning to this approach.

UPDATE: Using markdown-it-shikiji is actually not going to work because that changes the order of operations and the highlighting happens before vue processing and it breaks v-pre handling.