From 4091069d3ff33397783d5900d74412ea0ca0ed24 Mon Sep 17 00:00:00 2001 From: pengzhanbo Date: Fri, 17 May 2024 08:15:28 +0800 Subject: [PATCH 01/10] feat: deprecated `markdown.code`, migrate to the ecosystem --- packages/markdown/src/markdown.ts | 6 +++++- packages/markdown/src/types.ts | 4 ++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/markdown/src/markdown.ts b/packages/markdown/src/markdown.ts index abe1235235..2bebeabe0a 100644 --- a/packages/markdown/src/markdown.ts +++ b/packages/markdown/src/markdown.ts @@ -1,4 +1,5 @@ import { slugify as defaultSlugify } from '@mdit-vue/shared' +import { logger } from '@vuepress/utils' import MarkdownIt from 'markdown-it' import { anchorPlugin, @@ -82,7 +83,10 @@ export const createMarkdown = ({ } // process code fence - if (code !== false) { + if (code) { + logger.warn( + `\`markdown.code\` option is deprecated, use '@vuepress/plugin-shiki' or '@vuepress/plugin-prismjs' instead.\n See https://v2.vuepress.vuejs.org/reference/config.html#markdown-code`, + ) md.use(codePlugin, code) } diff --git a/packages/markdown/src/types.ts b/packages/markdown/src/types.ts index bc123f70b6..452414625e 100644 --- a/packages/markdown/src/types.ts +++ b/packages/markdown/src/types.ts @@ -22,6 +22,10 @@ export type { MarkdownSfcBlocks } export interface MarkdownOptions extends Options { anchor?: false | AnchorPluginOptions assets?: false | AssetsPluginOptions + + /** + * @deprecated This feature has been deprecated. Please use `@vuepress/prismjs` or `@vuepress/shiki` to instead it. + */ code?: false | CodePluginOptions component?: false emoji?: false | EmojiPluginOptions From 9bde4f531d1b111300695f5d08268af23ded7086 Mon Sep 17 00:00:00 2001 From: pengzhanbo Date: Fri, 17 May 2024 08:55:30 +0800 Subject: [PATCH 02/10] chore:tweak MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: 张怀文 --- packages/markdown/src/types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/markdown/src/types.ts b/packages/markdown/src/types.ts index 452414625e..c7964293c4 100644 --- a/packages/markdown/src/types.ts +++ b/packages/markdown/src/types.ts @@ -24,7 +24,7 @@ export interface MarkdownOptions extends Options { assets?: false | AssetsPluginOptions /** - * @deprecated This feature has been deprecated. Please use `@vuepress/prismjs` or `@vuepress/shiki` to instead it. + * @deprecated This feature has been deprecated. Please use `@vuepress/plugin-prismjs` or `@vuepress/plugin-shiki` to instead it. */ code?: false | CodePluginOptions component?: false From e909bfbf6292813f48e8153e9c879aee383aacc9 Mon Sep 17 00:00:00 2001 From: pengzhanbo Date: Fri, 17 May 2024 12:34:56 +0800 Subject: [PATCH 03/10] feat: remove codePlugin --- packages/markdown/src/markdown.ts | 6 +++--- packages/markdown/src/types.ts | 5 +++-- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/markdown/src/markdown.ts b/packages/markdown/src/markdown.ts index 2bebeabe0a..dc5bebcd1f 100644 --- a/packages/markdown/src/markdown.ts +++ b/packages/markdown/src/markdown.ts @@ -4,7 +4,7 @@ import MarkdownIt from 'markdown-it' import { anchorPlugin, assetsPlugin, - codePlugin, + // codePlugin, componentPlugin, emojiPlugin, frontmatterPlugin, @@ -18,7 +18,7 @@ import { import type { AnchorPluginOptions, AssetsPluginOptions, - CodePluginOptions, + // CodePluginOptions, EmojiPluginOptions, FrontmatterPluginOptions, HeadersPluginOptions, @@ -87,7 +87,7 @@ export const createMarkdown = ({ logger.warn( `\`markdown.code\` option is deprecated, use '@vuepress/plugin-shiki' or '@vuepress/plugin-prismjs' instead.\n See https://v2.vuepress.vuejs.org/reference/config.html#markdown-code`, ) - md.use(codePlugin, code) + // md.use(codePlugin, code) } // treat unknown html tags as components diff --git a/packages/markdown/src/types.ts b/packages/markdown/src/types.ts index c7964293c4..ee9f30f72b 100644 --- a/packages/markdown/src/types.ts +++ b/packages/markdown/src/types.ts @@ -6,7 +6,7 @@ import type { Options } from 'markdown-it' import type { AnchorPluginOptions, AssetsPluginOptions, - CodePluginOptions, + // CodePluginOptions, EmojiPluginOptions, FrontmatterPluginOptions, HeadersPluginOptions, @@ -26,7 +26,8 @@ export interface MarkdownOptions extends Options { /** * @deprecated This feature has been deprecated. Please use `@vuepress/plugin-prismjs` or `@vuepress/plugin-shiki` to instead it. */ - code?: false | CodePluginOptions + code?: never + // code?: false | CodePluginOptions component?: false emoji?: false | EmojiPluginOptions frontmatter?: false | FrontmatterPluginOptions From c91ea4490188126703d42457c696263be0d9fd2c Mon Sep 17 00:00:00 2001 From: pengzhanbo Date: Fri, 17 May 2024 15:42:14 +0800 Subject: [PATCH 04/10] feat: remove codePlugin --- packages/markdown/src/markdown.ts | 2 - packages/markdown/src/plugins.ts | 4 - .../src/plugins/codePlugin/codePlugin.ts | 151 ------ .../src/plugins/codePlugin/languages.ts | 105 ----- .../src/plugins/codePlugin/resolveAttr.ts | 12 - .../codePlugin/resolveHighlightLines.ts | 34 -- .../src/plugins/codePlugin/resolveLanguage.ts | 46 -- .../plugins/codePlugin/resolveLineNumbers.ts | 14 - .../src/plugins/codePlugin/resolveVPre.ts | 14 - packages/markdown/src/types.ts | 2 - .../__snapshots__/codePlugin.spec.ts.snap | 428 ------------------ .../markdown/tests/plugins/codePlugin.spec.ts | 372 --------------- 12 files changed, 1184 deletions(-) delete mode 100644 packages/markdown/src/plugins/codePlugin/codePlugin.ts delete mode 100644 packages/markdown/src/plugins/codePlugin/languages.ts delete mode 100644 packages/markdown/src/plugins/codePlugin/resolveAttr.ts delete mode 100644 packages/markdown/src/plugins/codePlugin/resolveHighlightLines.ts delete mode 100644 packages/markdown/src/plugins/codePlugin/resolveLanguage.ts delete mode 100644 packages/markdown/src/plugins/codePlugin/resolveLineNumbers.ts delete mode 100644 packages/markdown/src/plugins/codePlugin/resolveVPre.ts delete mode 100644 packages/markdown/tests/plugins/__snapshots__/codePlugin.spec.ts.snap delete mode 100644 packages/markdown/tests/plugins/codePlugin.spec.ts diff --git a/packages/markdown/src/markdown.ts b/packages/markdown/src/markdown.ts index dc5bebcd1f..b0b8cd812f 100644 --- a/packages/markdown/src/markdown.ts +++ b/packages/markdown/src/markdown.ts @@ -4,7 +4,6 @@ import MarkdownIt from 'markdown-it' import { anchorPlugin, assetsPlugin, - // codePlugin, componentPlugin, emojiPlugin, frontmatterPlugin, @@ -18,7 +17,6 @@ import { import type { AnchorPluginOptions, AssetsPluginOptions, - // CodePluginOptions, EmojiPluginOptions, FrontmatterPluginOptions, HeadersPluginOptions, diff --git a/packages/markdown/src/plugins.ts b/packages/markdown/src/plugins.ts index 8c2161e71f..6e2fe8fbf9 100644 --- a/packages/markdown/src/plugins.ts +++ b/packages/markdown/src/plugins.ts @@ -22,10 +22,6 @@ export { assetsPlugin, type AssetsPluginOptions, } from './plugins/assetsPlugin/assetsPlugin.js' -export { - codePlugin, - type CodePluginOptions, -} from './plugins/codePlugin/codePlugin.js' export { emojiPlugin, type EmojiPluginOptions } from './plugins/emojiPlugin.js' export { importCodePlugin, diff --git a/packages/markdown/src/plugins/codePlugin/codePlugin.ts b/packages/markdown/src/plugins/codePlugin/codePlugin.ts deleted file mode 100644 index c930933468..0000000000 --- a/packages/markdown/src/plugins/codePlugin/codePlugin.ts +++ /dev/null @@ -1,151 +0,0 @@ -import type { PluginWithOptions } from 'markdown-it' -import { resolveAttr } from './resolveAttr.js' -import { - isHighlightLine, - resolveHighlightLines, -} from './resolveHighlightLines.js' -import { resolveLanguage } from './resolveLanguage.js' -import { resolveLineNumbers } from './resolveLineNumbers.js' -import { resolveVPre } from './resolveVPre.js' - -export interface CodePluginOptions { - /** - * Enable highlight lines or not - */ - highlightLines?: boolean - - /** - * Enable line numbers or not - * - * - A `boolean` value is to enable line numbers or not. - * - A `number` value is the minimum number of lines to enable line numbers - */ - lineNumbers?: boolean | number - - /** - * Wrap the `
` tag with an extra `
` or not. Do not disable it unless you
-   * understand what's it for
-   *
-   * - Required for `highlightLines`
-   * - Required for `lineNumbers`
-   * - Required for title display of default theme
-   */
-  preWrapper?: boolean
-
-  /**
-   * Add `v-pre` directive or not
-   */
-  vPre?: {
-    /**
-     * Add `v-pre` directive to `
` tag of code block or not
-     */
-    block?: boolean
-
-    /**
-     * Add `v-pre` directive to `` tag of inline code or not
-     */
-    inline?: boolean
-  }
-}
-
-/**
- * Code plugin
- */
-export const codePlugin: PluginWithOptions = (
-  md,
-  {
-    highlightLines = true,
-    lineNumbers = true,
-    preWrapper = true,
-    vPre: { block: vPreBlock = true, inline: vPreInline = true } = {},
-  }: CodePluginOptions = {},
-): void => {
-  // override default fence renderer
-  md.renderer.rules.fence = (tokens, idx, options, env, slf) => {
-    const token = tokens[idx]
-
-    // get token info
-    const info = token.info ? md.utils.unescapeAll(token.info).trim() : ''
-
-    // resolve language from token info
-    const language = resolveLanguage(info)
-    const languageClass = `${options.langPrefix}${language.name}`
-
-    // try to get highlighted code
-    const code =
-      options.highlight?.(token.content, language.name, '') ||
-      md.utils.escapeHtml(token.content)
-
-    token.attrJoin('class', languageClass)
-
-    // wrap highlighted code with `
` and ``
-    let result = code.startsWith('${code}
`
-
-    // resolve v-pre mark from token info
-    const useVPre = resolveVPre(info) ?? vPreBlock
-    if (useVPre) {
-      result = `
 {
-          if (isHighlightLine(index + 1, highlightLinesRanges)) {
-            return '
 
'
-          }
-          return '
'
-        })
-        .join('')
-
-      result = `${result}
${highlightLinesCode}
`
-    }
-
-    // resolve line-numbers mark from token info
-    const useLineNumbers =
-      resolveLineNumbers(info) ??
-      (typeof lineNumbers === 'number'
-        ? lines.length >= lineNumbers
-        : lineNumbers)
-    // generate line numbers
-    if (useLineNumbers) {
-      // generate line numbers code
-      const lineNumbersCode = lines
-        .map(() => `
`)
-        .join('')
-
-      result = `${result}`
-    }
-
-    // resolve title from token info
-    const title = resolveAttr(info, 'title') ?? language.ext
-
-    result = `
${result}
`
-
-    return result
-  }
-
-  if (vPreInline) {
-    const rawInlineCodeRule = md.renderer.rules.code_inline!
-    md.renderer.rules.code_inline = (tokens, idx, options, env, slf) => {
-      const result = rawInlineCodeRule(tokens, idx, options, env, slf)
-      return ` {
-  // try to match specified attr mark
-  const pattern = `\\b${attr}\\s*=\\s*(?['"])(?.+?)\\k(\\s|$)`
-  const regex = new RegExp(pattern, 'i')
-  const match = info.match(regex)
-
-  // return content if matched, null if not specified
-  return match?.groups?.content ?? null
-}
diff --git a/packages/markdown/src/plugins/codePlugin/resolveHighlightLines.ts b/packages/markdown/src/plugins/codePlugin/resolveHighlightLines.ts
deleted file mode 100644
index 6c41120144..0000000000
--- a/packages/markdown/src/plugins/codePlugin/resolveHighlightLines.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-export type HighlightLinesRange = [start: number, end: number]
-
-/**
- * Resolve highlight-lines ranges from token info
- */
-export const resolveHighlightLines = (
-  info: string,
-): HighlightLinesRange[] | null => {
-  // try to match highlight-lines mark
-  const match = info.match(/{([\d,-]+)}/)
-
-  // no highlight-lines mark, return `null`
-  if (match === null) {
-    return null
-  }
-
-  // resolve lines ranges from the highlight-lines mark
-  return match[1].split(',').map((item) => {
-    const range = item.split('-')
-    if (range.length === 1) {
-      range.push(range[0])
-    }
-    return range.map((str) => Number.parseInt(str, 10)) as HighlightLinesRange
-  })
-}
-
-/**
- * Check if a line number is in ranges
- */
-export const isHighlightLine = (
-  lineNumber: number,
-  ranges: HighlightLinesRange[],
-): boolean =>
-  ranges.some(([start, end]) => lineNumber >= start && lineNumber <= end)
diff --git a/packages/markdown/src/plugins/codePlugin/resolveLanguage.ts b/packages/markdown/src/plugins/codePlugin/resolveLanguage.ts
deleted file mode 100644
index 8f2bde24f7..0000000000
--- a/packages/markdown/src/plugins/codePlugin/resolveLanguage.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import * as languages from './languages.js'
-import type { HighlightLanguage } from './languages.js'
-
-type LanguagesMap = Record
-
-/**
- * A key-value map to get language info from alias
- *
- * - key: alias
- * - value: language
- */
-let languagesMap: LanguagesMap
-
-/**
- * Lazy generate languages map
- */
-const getLanguagesMap = (): LanguagesMap => {
-  if (!languagesMap) {
-    languagesMap = Object.values(languages).reduce((result, item) => {
-      item.aliases.forEach((alias) => {
-        result[alias] = item
-      })
-      return result
-    }, {} as LanguagesMap)
-  }
-
-  return languagesMap
-}
-
-/**
- * Resolve language for highlight from token info
- */
-export const resolveLanguage = (info: string): HighlightLanguage => {
-  // get user-defined language alias
-  const alias = info.match(/^([^ :[{]+)/)?.[1] || 'text'
-
-  // if the alias does not have a match in the map
-  // fallback to the alias itself
-  return (
-    getLanguagesMap()[alias] ?? {
-      name: alias,
-      ext: alias,
-      aliases: [alias],
-    }
-  )
-}
diff --git a/packages/markdown/src/plugins/codePlugin/resolveLineNumbers.ts b/packages/markdown/src/plugins/codePlugin/resolveLineNumbers.ts
deleted file mode 100644
index 73cd43a83c..0000000000
--- a/packages/markdown/src/plugins/codePlugin/resolveLineNumbers.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * Resolve the `:line-numbers` / `:no-line-numbers` mark from token info
- */
-export const resolveLineNumbers = (info: string): boolean | null => {
-  if (/:line-numbers\b/.test(info)) {
-    return true
-  }
-
-  if (/:no-line-numbers\b/.test(info)) {
-    return false
-  }
-
-  return null
-}
diff --git a/packages/markdown/src/plugins/codePlugin/resolveVPre.ts b/packages/markdown/src/plugins/codePlugin/resolveVPre.ts
deleted file mode 100644
index 81bee597c0..0000000000
--- a/packages/markdown/src/plugins/codePlugin/resolveVPre.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * Resolve the `:v-pre` / `:no-v-pre` mark from token info
- */
-export const resolveVPre = (info: string): boolean | null => {
-  if (/:v-pre\b/.test(info)) {
-    return true
-  }
-
-  if (/:no-v-pre\b/.test(info)) {
-    return false
-  }
-
-  return null
-}
diff --git a/packages/markdown/src/types.ts b/packages/markdown/src/types.ts
index ee9f30f72b..b3670ef17c 100644
--- a/packages/markdown/src/types.ts
+++ b/packages/markdown/src/types.ts
@@ -6,7 +6,6 @@ import type { Options } from 'markdown-it'
 import type {
   AnchorPluginOptions,
   AssetsPluginOptions,
-  // CodePluginOptions,
   EmojiPluginOptions,
   FrontmatterPluginOptions,
   HeadersPluginOptions,
@@ -27,7 +26,6 @@ export interface MarkdownOptions extends Options {
    * @deprecated This feature has been deprecated. Please use `@vuepress/plugin-prismjs` or `@vuepress/plugin-shiki` to instead it.
    */
   code?: never
-  // code?: false | CodePluginOptions
   component?: false
   emoji?: false | EmojiPluginOptions
   frontmatter?: false | FrontmatterPluginOptions
diff --git a/packages/markdown/tests/plugins/__snapshots__/codePlugin.spec.ts.snap b/packages/markdown/tests/plugins/__snapshots__/codePlugin.spec.ts.snap
deleted file mode 100644
index 3d5781bef4..0000000000
--- a/packages/markdown/tests/plugins/__snapshots__/codePlugin.spec.ts.snap
+++ /dev/null
@@ -1,428 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`@vuepress/markdown > plugins > codePlugin > :line-numbers / :no-line-numbers > should work properly if \`lineNumbers\` is disabled by default 1`] = `
-"
Raw text
-
Raw text
-
Raw text
-
const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-
const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-
const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-
const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-
 
 



const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-
 
 



const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-
 
 



"
-`;
-
-exports[`@vuepress/markdown > plugins > codePlugin > :line-numbers / :no-line-numbers > should work properly if \`lineNumbers\` is enabled by default 1`] = `
-"
Raw text
-
Raw text
-
Raw text
-
const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-
const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-
const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-
const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-
 
 



const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-
 
 



const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-
 
 



"
-`;
-
-exports[`@vuepress/markdown > plugins > codePlugin > :line-numbers / :no-line-numbers > should work properly if \`lineNumbers\` is set to a number by default 1`] = `
-"
Raw text
-
Raw text
-
Raw text
-
const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-
const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-
const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-
const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-
 
 



const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-
 
 



const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-
 
 



"
-`;
-
-exports[`@vuepress/markdown > plugins > codePlugin > :v-pre / :no-v-pre > should work properly if \`vPre.block\` is disabled by default 1`] = `
-"
Raw text
-
Raw text
-
Raw text
-
const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-
const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-
const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-
const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-
 
 



const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-
 
 



const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-
 
 



"
-`;
-
-exports[`@vuepress/markdown > plugins > codePlugin > :v-pre / :no-v-pre > should work properly if \`vPre.block\` is enabled by default 1`] = `
-"
Raw text
-
Raw text
-
Raw text
-
const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-
const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-
const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-
const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-
 
 



const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-
 
 



const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-
 
 



"
-`;
-
-exports[`@vuepress/markdown > plugins > codePlugin > plugin options > should disable \`highlightLines\` 1`] = `
-"
Raw text
-
const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-
const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-
const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-
-const baz = () => {
-  return 2048
-}
-
{{ inlineCode }}

-"
-`;
-
-exports[`@vuepress/markdown > plugins > codePlugin > plugin options > should disable \`lineNumbers\` 1`] = `
-"
Raw text
-
const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-
const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-
 
 



const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-
-const baz = () => {
-  return 2048
-}
-
 
 
 
 
 




{{ inlineCode }}

-"
-`;
-
-exports[`@vuepress/markdown > plugins > codePlugin > plugin options > should disable \`preWrapper\` 1`] = `
-"
Raw text
-
const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-
const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-
const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-
-const baz = () => {
-  return 2048
-}
-
{{ inlineCode }}

-"
-`;
-
-exports[`@vuepress/markdown > plugins > codePlugin > plugin options > should disable \`vPre.block\` 1`] = `
-"
Raw text
-
const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-
const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-
 
 



const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-
-const baz = () => {
-  return 2048
-}
-
 
 
 
 
 




{{ inlineCode }}

-"
-`;
-
-exports[`@vuepress/markdown > plugins > codePlugin > plugin options > should disable \`vPre.inline\` 1`] = `
-"
Raw text
-
const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-
const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-
 
 



const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-
-const baz = () => {
-  return 2048
-}
-
 
 
 
 
 




{{ inlineCode }}

-"
-`;
-
-exports[`@vuepress/markdown > plugins > codePlugin > plugin options > should disable \`vPre.inline\` and \`vPre.block\` 1`] = `
-"
Raw text
-
const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-
const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-
 
 



const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-
-const baz = () => {
-  return 2048
-}
-
 
 
 
 
 




{{ inlineCode }}

-"
-`;
-
-exports[`@vuepress/markdown > plugins > codePlugin > plugin options > should enable \`lineNumbers\` according to number of code lines 1`] = `
-"
Raw text
-
const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-
const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-
 
 



const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-
-const baz = () => {
-  return 2048
-}
-
 
 
 
 
 




{{ inlineCode }}

-"
-`;
-
-exports[`@vuepress/markdown > plugins > codePlugin > plugin options > should process code fences with default options 1`] = `
-"
Raw text
-
const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-
const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-
 
 



const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-
-const baz = () => {
-  return 2048
-}
-
 
 
 
 
 




{{ inlineCode }}

-"
-`;
-
-exports[`@vuepress/markdown > plugins > codePlugin > syntax highlighting > should work if highlighted code is not wrapped with \`
\` 1`] = `
-"
highlighted code: Raw text
-, lang: text
highlighted code: const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-, lang: javascript
highlighted code: const foo: string = 'foo'
-
-function bar (): number {
-  return 1024
-}
-, lang: typescript
highlighted code: 
-
-, lang: vue-html
"
-`;
-
-exports[`@vuepress/markdown > plugins > codePlugin > syntax highlighting > should work if highlighted code is wrapped with \`
\` 1`] = `
-"
highlighted code: Raw text
-, lang: text
highlighted code: const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-, lang: javascript
highlighted code: const foo: string = 'foo'
-
-function bar (): number {
-  return 1024
-}
-, lang: typescript
highlighted code: 
-
-, lang: vue-html
"
-`;
diff --git a/packages/markdown/tests/plugins/codePlugin.spec.ts b/packages/markdown/tests/plugins/codePlugin.spec.ts
deleted file mode 100644
index 2033a74072..0000000000
--- a/packages/markdown/tests/plugins/codePlugin.spec.ts
+++ /dev/null
@@ -1,372 +0,0 @@
-import MarkdownIt from 'markdown-it'
-import { describe, expect, it, vi } from 'vitest'
-import { codePlugin } from '../../src/index.js'
-
-const codeFence = '```'
-
-describe('@vuepress/markdown > plugins > codePlugin', () => {
-  describe('plugin options', () => {
-    const source = `\
-${codeFence}
-Raw text
-${codeFence}
-
-${codeFence}ts
-const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-${codeFence}
-
-${codeFence}ts{1,2}
-const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-${codeFence}
-
-${codeFence}ts title="config/foo.ts" foo="foo" {1,2-4,5-5}
-const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-
-const baz = () => {
-  return 2048
-}
-${codeFence}
-
-${codeFence}{{ inlineCode }}${codeFence}
-`
-
-    it('should process code fences with default options', () => {
-      const md = MarkdownIt().use(codePlugin)
-
-      expect(md.render(source)).toMatchSnapshot()
-    })
-
-    it('should disable `highlightLines`', () => {
-      const md = MarkdownIt().use(codePlugin, {
-        highlightLines: false,
-      })
-
-      expect(md.render(source)).toMatchSnapshot()
-    })
-
-    it('should disable `lineNumbers`', () => {
-      const md = MarkdownIt().use(codePlugin, {
-        lineNumbers: false,
-      })
-
-      expect(md.render(source)).toMatchSnapshot()
-    })
-
-    it('should enable `lineNumbers` according to number of code lines', () => {
-      const md = MarkdownIt().use(codePlugin, {
-        lineNumbers: 4,
-      })
-
-      expect(md.render(source)).toMatchSnapshot()
-    })
-
-    it('should disable `preWrapper`', () => {
-      const md = MarkdownIt().use(codePlugin, {
-        preWrapper: false,
-      })
-
-      expect(md.render(source)).toMatchSnapshot()
-    })
-
-    it('should disable `vPre.block`', () => {
-      const md = MarkdownIt().use(codePlugin, {
-        vPre: {
-          block: false,
-          inline: true,
-        },
-      })
-
-      expect(md.render(source)).toMatchSnapshot()
-    })
-
-    it('should disable `vPre.inline`', () => {
-      const md = MarkdownIt().use(codePlugin, {
-        vPre: {
-          block: true,
-          inline: false,
-        },
-      })
-
-      expect(md.render(source)).toMatchSnapshot()
-    })
-
-    it('should disable `vPre.inline` and `vPre.block`', () => {
-      const md = MarkdownIt().use(codePlugin, {
-        vPre: {
-          block: false,
-          inline: false,
-        },
-      })
-
-      expect(md.render(source)).toMatchSnapshot()
-    })
-
-    it('should always disable `highlightLines` if `preWrapper` is disabled', () => {
-      const mdWithHighlightLines = MarkdownIt().use(codePlugin, {
-        highlightLines: true,
-        preWrapper: false,
-      })
-      const mdWithoutHighlightLine = MarkdownIt().use(codePlugin, {
-        highlightLines: false,
-        preWrapper: false,
-      })
-
-      expect(mdWithHighlightLines.render(source)).toBe(
-        mdWithoutHighlightLine.render(source),
-      )
-    })
-
-    it('should always disable `lineNumbers` if `preWrapper` is disabled', () => {
-      const mdWithLineNumbers = MarkdownIt().use(codePlugin, {
-        lineNumbers: true,
-        preWrapper: false,
-      })
-      const mdWithoutLineNumbers = MarkdownIt().use(codePlugin, {
-        lineNumbers: false,
-        preWrapper: false,
-      })
-
-      expect(mdWithLineNumbers.render(source)).toBe(
-        mdWithoutLineNumbers.render(source),
-      )
-    })
-  })
-
-  describe(':line-numbers / :no-line-numbers', () => {
-    const source = `\
-${codeFence}
-Raw text
-${codeFence}
-
-${codeFence}:line-numbers
-Raw text
-${codeFence}
-
-${codeFence}:no-line-numbers
-Raw text
-${codeFence}
-
-${codeFence}ts
-const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-${codeFence}
-
-${codeFence}ts:line-numbers
-const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-${codeFence}
-
-${codeFence}ts:no-line-numbers
-const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-${codeFence}
-
-${codeFence}ts{1,2}
-const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-${codeFence}
-
-${codeFence}ts{1,2}:line-numbers
-const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-${codeFence}
-
-${codeFence}ts title="config/foo.ts" foo="foo" {1,2}:no-line-numbers
-const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-${codeFence}
-`
-
-    it('should work properly if `lineNumbers` is enabled by default', () => {
-      const md = MarkdownIt().use(codePlugin, {
-        lineNumbers: true,
-      })
-
-      expect(md.render(source)).toMatchSnapshot()
-    })
-
-    it('should work properly if `lineNumbers` is disabled by default', () => {
-      const md = MarkdownIt().use(codePlugin, {
-        lineNumbers: false,
-      })
-
-      expect(md.render(source)).toMatchSnapshot()
-    })
-
-    it('should work properly if `lineNumbers` is set to a number by default', () => {
-      const md = MarkdownIt().use(codePlugin, {
-        lineNumbers: 4,
-      })
-
-      expect(md.render(source)).toMatchSnapshot()
-    })
-  })
-
-  describe(':v-pre / :no-v-pre', () => {
-    const source = `\
-${codeFence}
-Raw text
-${codeFence}
-
-${codeFence}:v-pre
-Raw text
-${codeFence}
-
-${codeFence}:no-v-pre
-Raw text
-${codeFence}
-
-${codeFence}ts
-const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-${codeFence}
-
-${codeFence}ts:v-pre
-const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-${codeFence}
-
-${codeFence}ts:no-v-pre
-const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-${codeFence}
-
-${codeFence}ts{1,2}
-const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-${codeFence}
-
-${codeFence}ts{1,2}:v-pre
-const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-${codeFence}
-
-${codeFence}ts{1,2}:no-v-pre
-const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-${codeFence}
-`
-
-    it('should work properly if `vPre.block` is enabled by default', () => {
-      const md = MarkdownIt().use(codePlugin, {
-        vPre: {
-          block: true,
-        },
-      })
-
-      expect(md.render(source)).toMatchSnapshot()
-    })
-
-    it('should work properly if `vPre.block` is disabled by default', () => {
-      const md = MarkdownIt().use(codePlugin, {
-        vPre: {
-          block: false,
-        },
-      })
-
-      expect(md.render(source)).toMatchSnapshot()
-    })
-  })
-
-  describe('syntax highlighting', () => {
-    const source = `\
-${codeFence}
-Raw text
-${codeFence}
-
-${codeFence}js
-const foo = 'foo'
-
-function bar () {
-  return 1024
-}
-${codeFence}
-
-${codeFence}ts
-const foo: string = 'foo'
-
-function bar (): number {
-  return 1024
-}
-${codeFence}
-
-${codeFence}vue-html
-
-
-${codeFence}
-`
-
-    it('should work if highlighted code is wrapped with `
`', () => {
-      const highlight = vi.fn(
-        (code, lang) =>
-          `
highlighted code: ${code}, lang: ${lang}
`,
-      )
-      const md = MarkdownIt({ highlight }).use(codePlugin)
-
-      expect(md.render(source)).toMatchSnapshot()
-      expect(highlight).toHaveBeenCalledTimes(4)
-    })
-
-    it('should work if highlighted code is not wrapped with `
`', () => {
-      const highlight = vi.fn(
-        (code, lang) => `highlighted code: ${code}, lang: ${lang}`,
-      )
-      const md = MarkdownIt({ highlight }).use(codePlugin)
-
-      expect(md.render(source)).toMatchSnapshot()
-      expect(highlight).toHaveBeenCalledTimes(4)
-    })
-  })
-})

From ba9db9f763d43ef7aa1f6de5b4c1d4c641d32254 Mon Sep 17 00:00:00 2001
From: pengzhanbo 
Date: Fri, 17 May 2024 15:49:39 +0800
Subject: [PATCH 05/10] chore: tweak

---
 packages/markdown/src/markdown.ts             |  1 -
 .../importCodePlugin.spec.ts.snap             | 15 --------
 .../tests/plugins/importCodePlugin.spec.ts    | 36 +++++++++----------
 3 files changed, 18 insertions(+), 34 deletions(-)
 delete mode 100644 packages/markdown/tests/plugins/__snapshots__/importCodePlugin.spec.ts.snap

diff --git a/packages/markdown/src/markdown.ts b/packages/markdown/src/markdown.ts
index b0b8cd812f..865d2d9b1a 100644
--- a/packages/markdown/src/markdown.ts
+++ b/packages/markdown/src/markdown.ts
@@ -85,7 +85,6 @@ export const createMarkdown = ({
     logger.warn(
       `\`markdown.code\` option is deprecated, use '@vuepress/plugin-shiki' or '@vuepress/plugin-prismjs' instead.\n See https://v2.vuepress.vuejs.org/reference/config.html#markdown-code`,
     )
-    // md.use(codePlugin, code)
   }
 
   // treat unknown html tags as components
diff --git a/packages/markdown/tests/plugins/__snapshots__/importCodePlugin.spec.ts.snap b/packages/markdown/tests/plugins/__snapshots__/importCodePlugin.spec.ts.snap
deleted file mode 100644
index 5f6171d6f2..0000000000
--- a/packages/markdown/tests/plugins/__snapshots__/importCodePlugin.spec.ts.snap
+++ /dev/null
@@ -1,15 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`@vuepress/markdown > plugins > importCodePlugin > compatibility with codePlugin > should work with syntax supported by codePlugin 1`] = `
-"
const msg = 'hello from js'
-
-console.log(msg)
-
-console.log('foo bar')
-
 

 
 

# msg
-
-hello from md
-
-## foo bar
-
"
-`;
diff --git a/packages/markdown/tests/plugins/importCodePlugin.spec.ts b/packages/markdown/tests/plugins/importCodePlugin.spec.ts
index 66e467cc97..1ec0daca92 100644
--- a/packages/markdown/tests/plugins/importCodePlugin.spec.ts
+++ b/packages/markdown/tests/plugins/importCodePlugin.spec.ts
@@ -9,7 +9,7 @@ import {
   it,
   vi,
 } from 'vitest'
-import { codePlugin, importCodePlugin } from '../../src/index.js'
+import { importCodePlugin } from '../../src/index.js'
 import type { MarkdownEnv } from '../../src/index.js'
 
 const jsFixturePathRelative = '../__fixtures__/importCode.js'
@@ -283,21 +283,21 @@ foo
     })
   })
 
-  describe('compatibility with codePlugin', () => {
-    it('should work with syntax supported by codePlugin', () => {
-      const source = `\
-@[code js{1,3-4}](${jsFixturePathRelative})
-@[code md:no-line-numbers title="no-line-numbers.md"](${mdFixturePathRelative})
-`
-
-      const md = MarkdownIt().use(importCodePlugin).use(codePlugin)
-      const env: MarkdownEnv = {
-        filePath: __filename,
-      }
-      const rendered = md.render(source, env)
-
-      expect(rendered).toMatchSnapshot()
-      expect(env.importedFiles).toEqual([jsFixturePath, mdFixturePath])
-    })
-  })
+  //   describe('compatibility with codePlugin', () => {
+  //     it('should work with syntax supported by codePlugin', () => {
+  //       const source = `\
+  // @[code js{1,3-4}](${jsFixturePathRelative})
+  // @[code md:no-line-numbers title="no-line-numbers.md"](${mdFixturePathRelative})
+  // `
+
+  //       const md = MarkdownIt().use(importCodePlugin).use(codePlugin)
+  //       const env: MarkdownEnv = {
+  //         filePath: __filename,
+  //       }
+  //       const rendered = md.render(source, env)
+
+  //       expect(rendered).toMatchSnapshot()
+  //       expect(env.importedFiles).toEqual([jsFixturePath, mdFixturePath])
+  //     })
+  //   })
 })

From 395d63ce8c7ba179c2886ae338fafb3b451c5f8d Mon Sep 17 00:00:00 2001
From: pengzhanbo 
Date: Sun, 19 May 2024 19:41:54 +0800
Subject: [PATCH 06/10] feat: add vPrePlugin

---
 packages/markdown/src/markdown.ts             |   8 ++
 packages/markdown/src/plugins.ts              |   5 +
 .../src/plugins/vPrePlugin/resolveVPre.ts     |  14 ++
 .../src/plugins/vPrePlugin/vPrePlugin.ts      |  43 ++++++
 packages/markdown/src/types.ts                |   3 +
 .../__snapshots__/vPrePlugin.spec.ts.snap     | 101 +++++++++++++
 .../markdown/tests/plugins/vPrePlugin.spec.ts | 136 ++++++++++++++++++
 7 files changed, 310 insertions(+)
 create mode 100644 packages/markdown/src/plugins/vPrePlugin/resolveVPre.ts
 create mode 100644 packages/markdown/src/plugins/vPrePlugin/vPrePlugin.ts
 create mode 100644 packages/markdown/tests/plugins/__snapshots__/vPrePlugin.spec.ts.snap
 create mode 100644 packages/markdown/tests/plugins/vPrePlugin.spec.ts

diff --git a/packages/markdown/src/markdown.ts b/packages/markdown/src/markdown.ts
index 865d2d9b1a..aa159cf5a1 100644
--- a/packages/markdown/src/markdown.ts
+++ b/packages/markdown/src/markdown.ts
@@ -13,6 +13,7 @@ import {
   sfcPlugin,
   titlePlugin,
   tocPlugin,
+  vPrePlugin,
 } from './plugins.js'
 import type {
   AnchorPluginOptions,
@@ -24,6 +25,7 @@ import type {
   LinksPluginOptions,
   SfcPluginOptions,
   TocPluginOptions,
+  VPrePluginOptions,
 } from './plugins.js'
 import type { Markdown, MarkdownOptions } from './types.js'
 
@@ -34,6 +36,7 @@ export const createMarkdown = ({
   anchor,
   assets,
   code,
+  vPre,
   component,
   emoji,
   frontmatter,
@@ -87,6 +90,11 @@ export const createMarkdown = ({
     )
   }
 
+  // add v-pre to `
` and ``
+  if (vPre !== false) {
+    md.use(vPrePlugin, vPre)
+  }
+
   // treat unknown html tags as components
   if (component !== false) {
     md.use(componentPlugin)
diff --git a/packages/markdown/src/plugins.ts b/packages/markdown/src/plugins.ts
index 6e2fe8fbf9..a65a4418e4 100644
--- a/packages/markdown/src/plugins.ts
+++ b/packages/markdown/src/plugins.ts
@@ -31,3 +31,8 @@ export {
   linksPlugin,
   type LinksPluginOptions,
 } from './plugins/linksPlugin/linksPlugin.js'
+
+export {
+  vPrePlugin,
+  type VPrePluginOptions,
+} from './plugins/vPrePlugin/vPrePlugin.js'
diff --git a/packages/markdown/src/plugins/vPrePlugin/resolveVPre.ts b/packages/markdown/src/plugins/vPrePlugin/resolveVPre.ts
new file mode 100644
index 0000000000..81bee597c0
--- /dev/null
+++ b/packages/markdown/src/plugins/vPrePlugin/resolveVPre.ts
@@ -0,0 +1,14 @@
+/**
+ * Resolve the `:v-pre` / `:no-v-pre` mark from token info
+ */
+export const resolveVPre = (info: string): boolean | null => {
+  if (/:v-pre\b/.test(info)) {
+    return true
+  }
+
+  if (/:no-v-pre\b/.test(info)) {
+    return false
+  }
+
+  return null
+}
diff --git a/packages/markdown/src/plugins/vPrePlugin/vPrePlugin.ts b/packages/markdown/src/plugins/vPrePlugin/vPrePlugin.ts
new file mode 100644
index 0000000000..1266e8c1bb
--- /dev/null
+++ b/packages/markdown/src/plugins/vPrePlugin/vPrePlugin.ts
@@ -0,0 +1,43 @@
+import type { PluginWithOptions } from 'markdown-it'
+import { resolveVPre } from './resolveVPre.js'
+
+export interface VPrePluginOptions {
+  /**
+   * Add `v-pre` directive to `
` tag of code block or not
+   */
+  block?: boolean
+
+  /**
+   * Add `v-pre` directive to `` tag of inline code or not
+   */
+  inline?: boolean
+}
+
+export const vPrePlugin: PluginWithOptions = (
+  md,
+  { inline = true, block = true }: VPrePluginOptions = {},
+) => {
+  const rawFence = md.renderer.rules.fence!
+  md.renderer.rules.fence = (...args) => {
+    const [tokens, idx] = args
+    const token = tokens[idx]
+
+    // get token info
+    const info = token.info ? md.utils.unescapeAll(token.info).trim() : ''
+
+    let result = rawFence(...args)
+
+    if (resolveVPre(info) ?? block) {
+      result = `
 {
+      const result = rawInlineCodeRule(...args)
+      return ` plugins > vPrePlugin > :v-pre / :no-v-pre > should work if \`block\` is disabled 1`] = `
+"
const a = 1
+

+
const a = 1
+

+
const a = 1
+

+
const a = 1
+

+
const a = 1
+

+
const a = 1
+

+
const a = 1
+

+"
+`;
+
+exports[`@vuepress/markdown > plugins > vPrePlugin > :v-pre / :no-v-pre > should work if \`block\` is enabled by default 1`] = `
+"
const a = 1
+

+
const a = 1
+

+
const a = 1
+

+
const a = 1
+

+
const a = 1
+

+
const a = 1
+

+
const a = 1
+

+"
+`;
+
+exports[`@vuepress/markdown > plugins > vPrePlugin > plugin options > should disable \`block\` 1`] = `
+"
const a = 1
+

+
inline

+"
+`;
+
+exports[`@vuepress/markdown > plugins > vPrePlugin > plugin options > should disable \`block\` and \`inline\` 1`] = `
+"
const a = 1
+

+
inline

+"
+`;
+
+exports[`@vuepress/markdown > plugins > vPrePlugin > plugin options > should disable \`inline\` 1`] = `
+"
const a = 1
+

+
inline

+"
+`;
+
+exports[`@vuepress/markdown > plugins > vPrePlugin > plugin options > should process code with default options 1`] = `
+"
const a = 1
+

+
inline

+"
+`;
+
+exports[`@vuepress/markdown > plugins > vPrePlugin > syntax highlighting > should work highlighted code is wrapped with \`
\` 1`] = `
+"
highlighted code: const a = 1
+, lang: js:v-pre

+
highlighted code: const a = 1
+, lang: js:no-v-pre

+
highlighted code: const a = 1
+, lang: js{1,2}:v-pre

+
highlighted code: const a = 1
+, lang: js{1,2}:no-v-pre

+
highlighted code: const a = 1
+, lang: js:other-syntax:v-pre

+
highlighted code: const a = 1
+, lang: js:other-syntax:no-v-pre

+
highlighted code: const a = 1
+, lang: js

+"
+`;
+
+exports[`@vuepress/markdown > plugins > vPrePlugin > syntax highlighting > should work if highlighted code is not wrapped with \`
\` 1`] = `
+"
highlighted code: const a = 1
+, lang: js:v-pre

+
highlighted code: const a = 1
+, lang: js:no-v-pre

+
highlighted code: const a = 1
+, lang: js{1,2}:v-pre

+
highlighted code: const a = 1
+, lang: js{1,2}:no-v-pre

+
highlighted code: const a = 1
+, lang: js:other-syntax:v-pre

+
highlighted code: const a = 1
+, lang: js:other-syntax:no-v-pre

+
highlighted code: const a = 1
+, lang: js

+"
+`;
diff --git a/packages/markdown/tests/plugins/vPrePlugin.spec.ts b/packages/markdown/tests/plugins/vPrePlugin.spec.ts
new file mode 100644
index 0000000000..1bda5aaf05
--- /dev/null
+++ b/packages/markdown/tests/plugins/vPrePlugin.spec.ts
@@ -0,0 +1,136 @@
+import MarkdownIt from 'markdown-it'
+import { describe, expect, it, vi } from 'vitest'
+import { vPrePlugin } from '../../src/index.js'
+
+const codeFence = '```'
+
+describe('@vuepress/markdown > plugins > vPrePlugin', () => {
+  describe('plugin options', () => {
+    const source = `\
+${codeFence}js
+const a = 1
+${codeFence}
+
+\`inline\`
+`
+    it('should process code with default options', () => {
+      const md = MarkdownIt().use(vPrePlugin)
+
+      expect(md.render(source)).toMatchSnapshot()
+    })
+
+    it('should disable `block`', () => {
+      const md = MarkdownIt().use(vPrePlugin, { block: false })
+
+      expect(md.render(source)).toMatchSnapshot()
+    })
+
+    it('should disable `inline`', () => {
+      const md = MarkdownIt().use(vPrePlugin, { inline: false })
+
+      expect(md.render(source)).toMatchSnapshot()
+    })
+
+    it('should disable `block` and `inline`', () => {
+      const md = MarkdownIt().use(vPrePlugin, { block: false, inline: false })
+
+      expect(md.render(source)).toMatchSnapshot()
+    })
+  })
+
+  describe(':v-pre / :no-v-pre', () => {
+    const source = `\
+${codeFence}js:v-pre
+const a = 1
+${codeFence}
+
+${codeFence}js:no-v-pre
+const a = 1
+${codeFence}
+
+${codeFence}js{1,2}:v-pre
+const a = 1
+${codeFence}
+
+${codeFence}js{1,2}:no-v-pre
+const a = 1
+${codeFence}
+
+${codeFence}js:other-syntax:v-pre
+const a = 1
+${codeFence}
+
+${codeFence}js:other-syntax:no-v-pre
+const a = 1
+${codeFence}
+
+${codeFence}js
+const a = 1
+${codeFence}
+`
+    it('should work if `block` is enabled by default', () => {
+      const md = MarkdownIt().use(vPrePlugin)
+
+      expect(md.render(source)).toMatchSnapshot()
+    })
+
+    it('should work if `block` is disabled', () => {
+      const md = MarkdownIt().use(vPrePlugin, { block: false })
+
+      expect(md.render(source)).toMatchSnapshot()
+    })
+  })
+
+  describe('syntax highlighting', () => {
+    const source = `\
+${codeFence}js:v-pre
+const a = 1
+${codeFence}
+
+${codeFence}js:no-v-pre
+const a = 1
+${codeFence}
+
+${codeFence}js{1,2}:v-pre
+const a = 1
+${codeFence}
+
+${codeFence}js{1,2}:no-v-pre
+const a = 1
+${codeFence}
+
+${codeFence}js:other-syntax:v-pre
+const a = 1
+${codeFence}
+
+${codeFence}js:other-syntax:no-v-pre
+const a = 1
+${codeFence}
+
+${codeFence}js
+const a = 1
+${codeFence}
+`
+    it('should work highlighted code is wrapped with `
`', () => {
+      const highlight = vi.fn(
+        (code, lang) =>
+          `
highlighted code: ${code}, lang: ${lang}
`,
+      )
+
+      const md = MarkdownIt({ highlight }).use(vPrePlugin)
+
+      expect(md.render(source)).toMatchSnapshot()
+      expect(highlight).toHaveBeenCalledTimes(7)
+    })
+
+    it('should work if highlighted code is not wrapped with `
`', () => {
+      const highlight = vi.fn(
+        (code, lang) => `highlighted code: ${code}, lang: ${lang}`,
+      )
+      const md = MarkdownIt({ highlight }).use(vPrePlugin)
+
+      expect(md.render(source)).toMatchSnapshot()
+      expect(highlight).toHaveBeenCalledTimes(7)
+    })
+  })
+})

From 3ce495932ccb96435598b8bb5e409860e682f654 Mon Sep 17 00:00:00 2001
From: pengzhanbo 
Date: Sun, 19 May 2024 19:50:12 +0800
Subject: [PATCH 07/10] chore: tweak

---
 .../tests/plugins/importCodePlugin.spec.ts     | 18 ------------------
 1 file changed, 18 deletions(-)

diff --git a/packages/markdown/tests/plugins/importCodePlugin.spec.ts b/packages/markdown/tests/plugins/importCodePlugin.spec.ts
index 1ec0daca92..3ffe475583 100644
--- a/packages/markdown/tests/plugins/importCodePlugin.spec.ts
+++ b/packages/markdown/tests/plugins/importCodePlugin.spec.ts
@@ -282,22 +282,4 @@ foo
       expect(mockConsoleError).toHaveBeenCalledTimes(1)
     })
   })
-
-  //   describe('compatibility with codePlugin', () => {
-  //     it('should work with syntax supported by codePlugin', () => {
-  //       const source = `\
-  // @[code js{1,3-4}](${jsFixturePathRelative})
-  // @[code md:no-line-numbers title="no-line-numbers.md"](${mdFixturePathRelative})
-  // `
-
-  //       const md = MarkdownIt().use(importCodePlugin).use(codePlugin)
-  //       const env: MarkdownEnv = {
-  //         filePath: __filename,
-  //       }
-  //       const rendered = md.render(source, env)
-
-  //       expect(rendered).toMatchSnapshot()
-  //       expect(env.importedFiles).toEqual([jsFixturePath, mdFixturePath])
-  //     })
-  //   })
 })

From 4b276a610c1336feb843afd1ba980b4757a422b6 Mon Sep 17 00:00:00 2001
From: Mister-Hope 
Date: Tue, 21 May 2024 12:26:21 +0800
Subject: [PATCH 08/10] test: add e2e test with vPre plugin in importCodePlugin

---
 .../importCodePlugin.spec.ts.snap             | 21 ++++++
 .../tests/plugins/importCodePlugin.spec.ts    | 66 ++++++++++++++++++-
 2 files changed, 86 insertions(+), 1 deletion(-)
 create mode 100644 packages/markdown/tests/plugins/__snapshots__/importCodePlugin.spec.ts.snap

diff --git a/packages/markdown/tests/plugins/__snapshots__/importCodePlugin.spec.ts.snap b/packages/markdown/tests/plugins/__snapshots__/importCodePlugin.spec.ts.snap
new file mode 100644
index 0000000000..afce065776
--- /dev/null
+++ b/packages/markdown/tests/plugins/__snapshots__/importCodePlugin.spec.ts.snap
@@ -0,0 +1,21 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`@vuepress/markdown > plugins > importCodePlugin > compatibility with otherPlugin > should preserve the things after code as fence info 1`] = `
+"
const msg = 'hello from js'
+
+console.log(msg)
+
+console.log('foo bar')
+

+"
+`;
+
+exports[`@vuepress/markdown > plugins > importCodePlugin > compatibility with otherPlugin > should preserve the things after code as fence info 2`] = `
+"
# msg
+
+hello from md
+
+## foo bar
+

+"
+`;
diff --git a/packages/markdown/tests/plugins/importCodePlugin.spec.ts b/packages/markdown/tests/plugins/importCodePlugin.spec.ts
index 3ffe475583..157c6a6fef 100644
--- a/packages/markdown/tests/plugins/importCodePlugin.spec.ts
+++ b/packages/markdown/tests/plugins/importCodePlugin.spec.ts
@@ -9,7 +9,7 @@ import {
   it,
   vi,
 } from 'vitest'
-import { importCodePlugin } from '../../src/index.js'
+import { importCodePlugin, vPrePlugin } from '../../src/index.js'
 import type { MarkdownEnv } from '../../src/index.js'
 
 const jsFixturePathRelative = '../__fixtures__/importCode.js'
@@ -282,4 +282,68 @@ foo
       expect(mockConsoleError).toHaveBeenCalledTimes(1)
     })
   })
+
+  describe('compatibility with otherPlugin', () => {
+    it('should preserve the things after code as fence info', () => {
+      const source1 = `\
+@[code js{1,3-4}](${jsFixturePathRelative})
+`
+      const source2 = `\
+@[code md:no-line-numbers:no-v-pre title="no-line-numbers.md"](${mdFixturePathRelative})
+`
+
+      const md = MarkdownIt().use(importCodePlugin)
+      const env1: MarkdownEnv = {
+        filePath: __filename,
+      }
+
+      const rendered1 = md.render(source1, env1)
+
+      expect(rendered1).toEqual(
+        md.render(`\
+\`\`\`js{1,3-4}
+${jsFixtureContent}\
+\`\`\`
+`),
+      )
+      expect(rendered1).toMatchSnapshot()
+      expect(env1.importedFiles).toEqual([jsFixturePath])
+
+      const env2: MarkdownEnv = {
+        filePath: __filename,
+      }
+
+      const rendered2 = md.render(source2, env2)
+
+      expect(rendered2).toEqual(
+        md.render(`\
+\`\`\`md:no-line-numbers:no-v-pre title="no-line-numbers.md"
+${mdFixtureContent}\
+\`\`\`
+`),
+      )
+      expect(rendered2).toMatchSnapshot()
+      expect(env2.importedFiles).toEqual([mdFixturePath])
+    })
+
+    it('should work with syntax supported by vPrePlugin', () => {
+      const source1 = `\
+@[code js{1,3-4}](${jsFixturePathRelative})
+`
+      const source2 = `\
+@[code md:no-line-numbers:no-v-pre title="no-line-numbers.md"](${mdFixturePathRelative})
+`
+
+      const md = MarkdownIt().use(importCodePlugin).use(vPrePlugin)
+      const env: MarkdownEnv = {
+        filePath: __filename,
+      }
+
+      const rendered1 = md.render(source1, env)
+      const rendered2 = md.render(source2, env)
+
+      expect(rendered1).to.contain('v-pre')
+      expect(rendered2).to.not.contain(' v-pre')
+    })
+  })
 })

From 7a94405af38a2627d1825b41fa197267f63557c8 Mon Sep 17 00:00:00 2001
From: meteorlxy 
Date: Wed, 22 May 2024 12:35:01 +0800
Subject: [PATCH 09/10] chore: tweaks

---
 packages/markdown/src/markdown.ts                    |  2 +-
 packages/markdown/src/plugins.ts                     |  1 -
 .../markdown/src/plugins/vPrePlugin/vPrePlugin.ts    |  3 +++
 packages/markdown/src/types.ts                       | 12 +++++-------
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/markdown/src/markdown.ts b/packages/markdown/src/markdown.ts
index aa159cf5a1..9467c595dd 100644
--- a/packages/markdown/src/markdown.ts
+++ b/packages/markdown/src/markdown.ts
@@ -86,7 +86,7 @@ export const createMarkdown = ({
   // process code fence
   if (code) {
     logger.warn(
-      `\`markdown.code\` option is deprecated, use '@vuepress/plugin-shiki' or '@vuepress/plugin-prismjs' instead.\n See https://v2.vuepress.vuejs.org/reference/config.html#markdown-code`,
+      `\`markdown.code\` option has been removed, please use '@vuepress/plugin-shiki' or '@vuepress/plugin-prismjs' instead.\n See https://v2.vuepress.vuejs.org/reference/config.html#markdown-code`,
     )
   }
 
diff --git a/packages/markdown/src/plugins.ts b/packages/markdown/src/plugins.ts
index a65a4418e4..a1ceb31f29 100644
--- a/packages/markdown/src/plugins.ts
+++ b/packages/markdown/src/plugins.ts
@@ -31,7 +31,6 @@ export {
   linksPlugin,
   type LinksPluginOptions,
 } from './plugins/linksPlugin/linksPlugin.js'
-
 export {
   vPrePlugin,
   type VPrePluginOptions,
diff --git a/packages/markdown/src/plugins/vPrePlugin/vPrePlugin.ts b/packages/markdown/src/plugins/vPrePlugin/vPrePlugin.ts
index 1266e8c1bb..78787f4f30 100644
--- a/packages/markdown/src/plugins/vPrePlugin/vPrePlugin.ts
+++ b/packages/markdown/src/plugins/vPrePlugin/vPrePlugin.ts
@@ -13,6 +13,9 @@ export interface VPrePluginOptions {
   inline?: boolean
 }
 
+/**
+ * v-pre plugin
+ */
 export const vPrePlugin: PluginWithOptions = (
   md,
   { inline = true, block = true }: VPrePluginOptions = {},
diff --git a/packages/markdown/src/types.ts b/packages/markdown/src/types.ts
index 2efd34a753..274baabe08 100644
--- a/packages/markdown/src/types.ts
+++ b/packages/markdown/src/types.ts
@@ -22,13 +22,6 @@ export type { MarkdownSfcBlocks }
 export interface MarkdownOptions extends Options {
   anchor?: false | AnchorPluginOptions
   assets?: false | AssetsPluginOptions
-
-  /**
-   * @deprecated This feature has been deprecated. Please use `@vuepress/plugin-prismjs` or `@vuepress/plugin-shiki` to instead it.
-   */
-  code?: never
-
-  vPre?: false | VPrePluginOptions
   component?: false
   emoji?: false | EmojiPluginOptions
   frontmatter?: false | FrontmatterPluginOptions
@@ -39,6 +32,11 @@ export interface MarkdownOptions extends Options {
   sfc?: false | SfcPluginOptions
   slugify?: MarkdownSlugifyFunction
   toc?: false | TocPluginOptions
+  vPre?: false | VPrePluginOptions
+  /**
+   * @deprecated This feature has been removed. Please use `@vuepress/plugin-prismjs` or `@vuepress/plugin-shiki` instead.
+   */
+  code?: never
 }
 
 /**

From c787268118db09d797e89d5a5500e46841cb24c2 Mon Sep 17 00:00:00 2001
From: meteorlxy 
Date: Wed, 22 May 2024 12:36:48 +0800
Subject: [PATCH 10/10] chore: tweaks

---
 packages/markdown/src/markdown.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/markdown/src/markdown.ts b/packages/markdown/src/markdown.ts
index 9467c595dd..88aeb05e83 100644
--- a/packages/markdown/src/markdown.ts
+++ b/packages/markdown/src/markdown.ts
@@ -90,11 +90,6 @@ export const createMarkdown = ({
     )
   }
 
-  // add v-pre to `
` and ``
-  if (vPre !== false) {
-    md.use(vPrePlugin, vPre)
-  }
-
   // treat unknown html tags as components
   if (component !== false) {
     md.use(componentPlugin)
@@ -155,5 +150,10 @@ export const createMarkdown = ({
     md.use(titlePlugin)
   }
 
+  // add v-pre to `
` and ``
+  if (vPre !== false) {
+    md.use(vPrePlugin, vPre)
+  }
+
   return md
 }