feat: add :line-numbers=number supports (#161)

docs/.vuepress/config.ts

@@ -72,20 +72,6 @@ export default defineUserConfig({
 
   extendsMarkdown: (md) => {
     md.use(footnote)
-
-    // FIXME: Should be removed with next vuepress version
-    const rawFence = md.renderer.rules.fence!
-    const rawCodeInline = md.renderer.rules.code_inline!
-
-    md.renderer.rules.fence = (...args) => {
-      const result = rawFence(...args)
-      return result.replace('<pre', '<pre v-pre ')
-    }
-
-    md.renderer.rules.code_inline = (...args) => {
-      const result = rawCodeInline(...args)
-      return `<code v-pre${result.slice('<code'.length)}`
-    }
   },
 
   // configure default theme

docs/plugins/prismjs.md

@@ -59,6 +59,8 @@ export default {
 
   You can add `:line-numbers` / `:no-line-numbers` mark in your fenced code blocks to override the value set in config.
 
+  You can also customize the starting line number by adding `=` after `:line-numbers`. For example, `:line-numbers=2` means the line numbers in code blocks will start from `2`.
+
 **Input:**
 
 ````md
@@ -73,6 +75,12 @@ const line3 = 'This is line 3'
 const line2 = 'This is line 2'
 const line3 = 'This is line 3'
 ```
+
+```ts:line-numbers=2
+// line-numbers is enabled and start from 2
+const line3 = 'This is line 3'
+const line4 = 'This is line 4'
+```
 ````
 
 **Output:**
@@ -89,6 +97,12 @@ const line2 = 'This is line 2'
 const line3 = 'This is line 3'
 ```
 
+```ts:line-numbers=2
+// line-numbers is enabled and start from 2
+const line3 = 'This is line 3'
+const line4 = 'This is line 4'
+```
+
 ### highlightLines
 
 - Type: `boolean`

docs/plugins/shiki.md

@@ -112,6 +112,8 @@ export default {
 
   You can add `:line-numbers` / `:no-line-numbers` mark in your fenced code blocks to override the value set in config.
 
+  You can also customize the starting line number by adding `=` after `:line-numbers`. For example, `:line-numbers=2` means the line numbers in code blocks will start from `2`.
+
 **Input:**
 
 ````md
@@ -127,8 +129,10 @@ const line2 = 'This is line 2'
 const line3 = 'This is line 3'
 ```
 
-```
-
+```ts:line-numbers=2
+// line-numbers is enabled and start from 2
+const line3 = 'This is line 3'
+const line4 = 'This is line 4'
 ```
 ````
 
@@ -146,6 +150,12 @@ const line2 = 'This is line 2'
 const line3 = 'This is line 3'
 ```
 
+```ts:line-numbers=2
+// line-numbers is enabled and start from 2
+const line3 = 'This is line 3'
+const line4 = 'This is line 4'
+```
+
 ### highlightLines
 
 - Type: `boolean`

docs/zh/plugins/prismjs.md

@@ -59,6 +59,8 @@ export default {
 
   你可以在代码块添加 `:line-numbers` / `:no-line-numbers` 标记来覆盖配置项中的设置。
 
+  还可以通过在 `:line-numbers` 之后添加 `=` 来自定义起始行号，例如 `:line-numbers=2` 表示代码块中的行号从 `2` 开始。
+
 **输入：**
 
 ````md
@@ -73,6 +75,12 @@ const line3 = 'This is line 3'
 const line2 = 'This is line 2'
 const line3 = 'This is line 3'
 ```
+
+```ts:line-numbers=2
+// 行号已启用，并从 2 开始
+const line3 = 'This is line 3'
+const line4 = 'This is line 4'
+```
 ````
 
 **输出：**
@@ -89,6 +97,12 @@ const line2 = 'This is line 2'
 const line3 = 'This is line 3'
 ```
 
+```ts:line-numbers=2
+// 行号已启用，并从 2 开始
+const line3 = 'This is line 3'
+const line4 = 'This is line 4'
+```
+
 ### highlightLines
 
 - 类型： `boolean`

docs/zh/plugins/shiki.md

@@ -111,6 +111,8 @@ export default {
 
   你可以在代码块添加 `:line-numbers` / `:no-line-numbers` 标记来覆盖配置项中的设置。
 
+  还可以通过在 `:line-numbers` 之后添加 `=` 来自定义起始行号，例如 `:line-numbers=2` 表示代码块中的行号从 `2` 开始。
+
 **输入：**
 
 ````md
@@ -125,6 +127,12 @@ const line3 = 'This is line 3'
 const line2 = 'This is line 2'
 const line3 = 'This is line 3'
 ```
+
+```ts:line-numbers=2
+// 行号已启用，并从 2 开始
+const line3 = 'This is line 3'
+const line4 = 'This is line 4'
+```
 ````
 
 **输出：**
@@ -141,6 +149,12 @@ const line2 = 'This is line 2'
 const line3 = 'This is line 3'
 ```
 
+```ts:line-numbers=2
+// 行号已启用，并从 2 开始
+const line3 = 'This is line 3'
+const line4 = 'This is line 4'
+```
+
 ### highlightLines
 
 - 类型： `boolean`

plugins/plugin-prismjs/src/node/markdown/lineNumbersPlugin.ts

@@ -2,6 +2,8 @@ import type { Markdown } from 'vuepress/markdown'
 import type { LineNumbersOptions } from '../types.js'
 import { resolveLineNumbers } from '../utils/index.js'
 
+const LINE_NUMBERS_START_REGEXP = /:line-numbers=(\d+)\b/
+
 export const lineNumbersPlugin = (
   md: Markdown,
   { lineNumbers = true }: LineNumbersOptions = {},
@@ -33,11 +35,15 @@ export const lineNumbersPlugin = (
       return rawCode
     }
 
+    const startNumbers =
+      Number(info.match(LINE_NUMBERS_START_REGEXP)?.[1] ?? 1) - 1
+    const lineNumbersStyle = `style="counter-reset:line-number ${startNumbers}"`
+
     const lineNumbersCode = [...Array(lines.length)]
       .map(() => `<div class="line-number"></div>`)
       .join('')
 
-    const lineNumbersWrapperCode = `<div class="line-numbers" aria-hidden="true">${lineNumbersCode}</div>`
+    const lineNumbersWrapperCode = `<div class="line-numbers" aria-hidden="true" ${lineNumbersStyle}>${lineNumbersCode}</div>`
 
     const finalCode = rawCode
       .replace(/<\/div>$/, `${lineNumbersWrapperCode}</div>`)