Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 11 commits into from
May 29, 2024
14 changes: 0 additions & 14 deletions docs/.vuepress/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
14 changes: 14 additions & 0 deletions docs/plugins/prismjs.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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:**
Expand All @@ -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`
Expand Down
14 changes: 12 additions & 2 deletions docs/plugins/shiki.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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'
```
````

Expand All @@ -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`
Expand Down
14 changes: 14 additions & 0 deletions docs/zh/plugins/prismjs.md
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,8 @@ export default {

你可以在代码块添加 `:line-numbers` / `:no-line-numbers` 标记来覆盖配置项中的设置。

还可以通过在 `:line-numbers` 之后添加 `=` 来自定义起始行号,例如 `:line-numbers=2` 表示代码块中的行号从 `2` 开始。

**输入:**

````md
Expand All @@ -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'
```
````

**输出:**
Expand All @@ -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`
Expand Down
14 changes: 14 additions & 0 deletions docs/zh/plugins/shiki.md
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,8 @@ export default {

你可以在代码块添加 `:line-numbers` / `:no-line-numbers` 标记来覆盖配置项中的设置。

还可以通过在 `:line-numbers` 之后添加 `=` 来自定义起始行号,例如 `:line-numbers=2` 表示代码块中的行号从 `2` 开始。

**输入:**

````md
Expand All @@ -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'
```
````

**输出:**
Expand All @@ -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`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {},
Expand Down Expand Up @@ -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>`)
Expand Down
Loading
Loading