diff --git a/docs/guide/markdown.md b/docs/guide/markdown.md index 7936e9a8..7520d722 100644 --- a/docs/guide/markdown.md +++ b/docs/guide/markdown.md @@ -495,6 +495,38 @@ export default { Please see [`markdown` options](../config/app-configs#markdown) for more details. +You can add `:line-numbers` / `:no-line-numbers` mark in your fenced code blocks to override the value set in config. + +**Input** + +````md +```ts {1} +// line-numbers is disabled by default +const line2 = 'This is line 2' +const line3 = 'This is line 3' +``` + +```ts:line-numbers {1} +// line-numbers is enabled +const line2 = 'This is line 2' +const line3 = 'This is line 3' +``` +```` + +**Output** + +```ts {1} +// line-numbers is disabled by default +const line2 = 'This is line 2' +const line3 = 'This is line 3' +``` + +```ts:line-numbers {1} +// line-numbers is enabled +const line2 = 'This is line 2' +const line3 = 'This is line 3' +``` + ## Import Code Snippets You can import code snippets from existing files via following syntax: @@ -551,6 +583,10 @@ You can also specify the language inside the braces (`{}`) like this: <<< @/snippets/snippet.cs{1,2,4-6 c#} + + + +<<< @/snippets/snippet.cs{1,2,4-6 c#:line-numbers} ``` This is helpful if source language cannot be inferred from your file extension. diff --git a/src/node/markdown/markdown.ts b/src/node/markdown/markdown.ts index d01cf8a4..d1c60a8f 100644 --- a/src/node/markdown/markdown.ts +++ b/src/node/markdown/markdown.ts @@ -76,13 +76,10 @@ export const createMarkdownRenderer = async ( .use(imagePlugin) .use( linkPlugin, - { - target: '_blank', - rel: 'noreferrer', - ...options.externalLinks - }, + { target: '_blank', rel: 'noreferrer', ...options.externalLinks }, base ) + .use(lineNumberPlugin, options.lineNumbers) // 3rd party plugins if (!options.attrs?.disable) { @@ -115,8 +112,5 @@ export const createMarkdownRenderer = async ( options.config(md) } - if (options.lineNumbers) { - md.use(lineNumberPlugin) - } return md } diff --git a/src/node/markdown/plugins/highlight.ts b/src/node/markdown/plugins/highlight.ts index 8df4f3d3..c2152438 100644 --- a/src/node/markdown/plugins/highlight.ts +++ b/src/node/markdown/plugins/highlight.ts @@ -74,10 +74,12 @@ export async function highlight( const styleRE = /
]*(style=".*?")/ const preRE = /^/ const vueRE = /-vue$/ + const lineNoRE = /:(no-)?line-numbers$/ return (str: string, lang: string, attrs: string) => { const vPre = vueRE.test(lang) ? '' : 'v-pre' - lang = lang.replace(vueRE, '').toLowerCase() || defaultLang + lang = + lang.replace(lineNoRE, '').replace(vueRE, '').toLowerCase() || defaultLang const lineOptions = attrsToLines(attrs) const cleanup = (str: string) => diff --git a/src/node/markdown/plugins/lineNumbers.ts b/src/node/markdown/plugins/lineNumbers.ts index 076f3a78..e7dd2fc6 100644 --- a/src/node/markdown/plugins/lineNumbers.ts +++ b/src/node/markdown/plugins/lineNumbers.ts @@ -3,10 +3,21 @@ import MarkdownIt from 'markdown-it' -export const lineNumberPlugin = (md: MarkdownIt) => { +export const lineNumberPlugin = (md: MarkdownIt, enable = false) => { const fence = md.renderer.rules.fence! md.renderer.rules.fence = (...args) => { const rawCode = fence(...args) + + const [tokens, idx] = args + const info = tokens[idx].info + + if ( + (!enable && !/:line-numbers($| )/.test(info)) || + (enable && /:no-line-numbers($| )/.test(info)) + ) { + return rawCode + } + const code = rawCode.slice( rawCode.indexOf(''), rawCode.indexOf('
') diff --git a/src/node/markdown/plugins/preWrapper.ts b/src/node/markdown/plugins/preWrapper.ts index 547b91e4..710f4405 100644 --- a/src/node/markdown/plugins/preWrapper.ts +++ b/src/node/markdown/plugins/preWrapper.ts @@ -19,6 +19,7 @@ export function extractTitle(info: string) { const extractLang = (info: string) => { return info .trim() + .replace(/:(no-)?line-numbers$/, '') .replace(/(-vue|{| ).*$/, '') .replace(/^vue-html$/, 'template') }