search

vuepress / core

Vue-Powered Static Site Generator
https://vuepress.vuejs.org
MIT License
2.16k stars 922 forks source link

[Feature request] Removing fence related plugin in @vuepress/markdown #1550

Closed Mister-Hope closed 1 month ago

Mister-Hope commented 2 months ago

Clear and concise description of the problem

Our built-in plugins about code fence are breaking shiki highlighter, e.g., shiki has an own implementation about higlight lines, and shiki's twoslash is powerful

See https://plume.pengzhanbo.cn/guide/markdown/experiment/#%E5%BC%80%E5%90%AF%E5%8A%9F%E8%83%BD as an example, the community is patching our official pacakge to bypass this.

Suggested solution

Move the highlight lines and line number part into @vuepress/plugin-prismjs and @vuepress/plugin-shiki so that users can do more things with shiki and do not break current prismjs behvaior.

Alternative

No response

Additional context

I am planning to migrate the default highlighter to shiki for theme default.

pengzhanbo commented 1 month ago

A crucial missing parameter is at codePlugin/codePlugin.ts#L76 where the third argument of options.highlight(code, lang, meta) should be passed as token.info instead of an empty string. Some transformers when using shiki can be controlled based on token.info.

pengzhanbo commented 1 month ago

When using twoslash with VuePress, the line numbers are not functioning properly. This is because twoslash inserts additional <span>xx</span>\n into <code>, causing miscalculation of extra lines due to line numbers being counted based on \n. In plugin-shiki, there is no control over line-numbers.

Mister-Hope commented 1 month ago

Can you open a pr for this? And maybe removing the line number plugin and implement it in plugin-prismjs?

pengzhanbo commented 1 month ago

Can you open a pr for this? And maybe removing the line number plugin and implement it in plugin-prismjs?

Currently, the adjustment plan involves removing the codePlugin from @vuepress/markdown and transferring its functionality to be independently implemented in @vuepress/plugin-prismjs and @vuepress/plugin-shiki.

Mister-Hope commented 1 month ago

You can open a pr to remove it, and use a patch to have plugin-prismjs and plugin-shiki implement the original feature, and we can then moving on upstream here.