fix(plugin-shiki): fix incorrect highlight lines parsing, close #555 (#557)

Author: pengzhanbo

plugins/markdown/plugin-shiki/src/node/markdown/highlightLinesPlugin.ts

@@ -0,0 +1,48 @@
+// Modified from https://github.com/egoist/markdown-it-highlight-lines
+// Now this plugin is only used to normalize line attrs.
+// The else part of line highlights logic is in './highlight.ts'.
+
+import type { Markdown } from 'vuepress/markdown'
+
+const HIGHLIGHT_LINES_REGEXP = /{([\d,-]+)}/
+
+export const highlightLinePlugin = (md: Markdown): void => {
+  const fence = md.renderer.rules.fence!
+  md.renderer.rules.fence = (...args) => {
+    const [tokens, idx] = args
+    const token = tokens[idx]
+
+    // due to use of markdown-it-attrs, the {0} syntax would have been
+    // converted to attrs on the token
+    const attr = token.attrs?.[0]
+
+    let lines: string | null = null
+
+    if (!attr) {
+      // markdown-it-attrs maybe disabled
+      const rawInfo = token.info
+
+      if (!rawInfo || !HIGHLIGHT_LINES_REGEXP.test(rawInfo)) {
+        return fence(...args)
+      }
+
+      const langName = rawInfo.replace(HIGHLIGHT_LINES_REGEXP, '').trim()
+
+      // ensure the next plugin get the correct lang
+      token.info = langName
+
+      lines = HIGHLIGHT_LINES_REGEXP.exec(rawInfo)![1]
+    }
+
+    if (!lines) {
+      lines = attr![0]
+
+      if (!lines || !/[\d,-]+/.test(lines)) {
+        return fence(...args)
+      }
+    }
+
+    token.info += ` ${lines}`
+    return fence(...args)
+  }
+}

plugins/markdown/plugin-shiki/src/node/markdown/index.ts

@@ -1,2 +1,3 @@
 export * from './highlighter/index.js'
 export * from './preWrapperPlugin.js'
+export * from './highlightLinesPlugin.js'

plugins/markdown/plugin-shiki/src/node/shikiPlugin.ts

@@ -17,6 +17,7 @@ import type { MarkdownItPreWrapperOptions } from './markdown/index.js'
 import {
   createShikiHighlighter,
   getHighLightFunction,
+  highlightLinePlugin,
   preWrapperPlugin,
 } from './markdown/index.js'
 import type { ShikiPluginOptions } from './options.js'
@@ -112,7 +113,7 @@ export const shikiPlugin = (options: ShikiPluginOptions = {}): Plugin => {
           loadLang,
           markdownFilePathGetter,
         )
-
+        md.use(highlightLinePlugin)
         md.use<MarkdownItPreWrapperOptions>(preWrapperPlugin, { preWrapper })
         if (preWrapper) {
           md.use<MarkdownItLineNumbersOptions>(lineNumbersPlugin, {

plugins/markdown/plugin-shiki/src/node/utils.ts

@@ -47,9 +47,7 @@ export const resolveLanguage = (info: string): string =>
  * @returns Line options array / 行选项数组
  */
 export const attrsToLines = (attrs: string): TransformerCompactLineOption[] => {
-  const attrsContent = attrs
-    .replace(/^(?:\[.*?\])?.*?\{([\d,-]+)\}.*/, '$1')
-    .trim()
+  const attrsContent = attrs.replace(/^(?:\[.*?\])?.*?([\d,-]+).*/, '$1').trim()
   const result: number[] = []
 
   if (!attrsContent) {