From 0e944ea6093d106822fc4d06cd1dcbec52ea8702 Mon Sep 17 00:00:00 2001 From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com> Date: Sat, 24 Dec 2022 12:17:30 +0530 Subject: [PATCH 1/4] feat(build): fence-level config for line-numbers --- src/node/markdown/markdown.ts | 10 ++-------- src/node/markdown/plugins/highlight.ts | 4 +++- src/node/markdown/plugins/lineNumbers.ts | 13 ++++++++++++- src/node/markdown/plugins/preWrapper.ts | 1 + 4 files changed, 18 insertions(+), 10 deletions(-) diff --git a/src/node/markdown/markdown.ts b/src/node/markdown/markdown.ts index d01cf8a4351b..d1c60a8fabb5 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 8df4f3d30e5f..c21524384e06 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 076f3a78f292..dbfb0c0c1a18 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 && !info.endsWith(':line-numbers')) || + (enable && info.endsWith(':no-line-numbers')) + ) { + 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 547b91e47448..710f44054f89 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') } From ba4b880a6c62452cfd7ded2ec801368fa7613ad9 Mon Sep 17 00:00:00 2001 From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com> Date: Sat, 24 Dec 2022 12:32:03 +0530 Subject: [PATCH 2/4] fix: make line-numbers work with snippets --- src/node/markdown/plugins/lineNumbers.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/node/markdown/plugins/lineNumbers.ts b/src/node/markdown/plugins/lineNumbers.ts index dbfb0c0c1a18..e7dd2fc67112 100644 --- a/src/node/markdown/plugins/lineNumbers.ts +++ b/src/node/markdown/plugins/lineNumbers.ts @@ -12,8 +12,8 @@ export const lineNumberPlugin = (md: MarkdownIt, enable = false) => { const info = tokens[idx].info if ( - (!enable && !info.endsWith(':line-numbers')) || - (enable && info.endsWith(':no-line-numbers')) + (!enable && !/:line-numbers($| )/.test(info)) || + (enable && /:no-line-numbers($| )/.test(info)) ) { return rawCode } From 787d9d2426b88a55bcf39a47e02b69af92dbc566 Mon Sep 17 00:00:00 2001 From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com> Date: Sat, 24 Dec 2022 12:38:20 +0530 Subject: [PATCH 3/4] docs: add line-numbers --- docs/guide/markdown.md | 36 ++++++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/docs/guide/markdown.md b/docs/guide/markdown.md index 7936e9a8b70f..a996980a2ffe 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 +// line-numbers is disabled by default +const line2 = 'This is line 2' +const line3 = 'This is line 3' +``` + +```ts:line-numbers +// line-numbers is enabled +const line2 = 'This is line 2' +const line3 = 'This is line 3' +``` +```` + +**Output** + +```ts +// line-numbers is disabled by default +const line2 = 'This is line 2' +const line3 = 'This is line 3' +``` + +```ts:line-numbers +// 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. From e641b4301e01fa59bacc1c66ea39f6af9c856bde Mon Sep 17 00:00:00 2001 From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com> Date: Sat, 24 Dec 2022 12:42:28 +0530 Subject: [PATCH 4/4] docs: show line highlighting with line numbers too --- docs/guide/markdown.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/guide/markdown.md b/docs/guide/markdown.md index a996980a2ffe..7520d7226896 100644 --- a/docs/guide/markdown.md +++ b/docs/guide/markdown.md @@ -500,13 +500,13 @@ You can add `:line-numbers` / `:no-line-numbers` mark in your fenced code blocks **Input** ````md -```ts +```ts {1} // line-numbers is disabled by default const line2 = 'This is line 2' const line3 = 'This is line 3' ``` -```ts:line-numbers +```ts:line-numbers {1} // line-numbers is enabled const line2 = 'This is line 2' const line3 = 'This is line 3' @@ -515,13 +515,13 @@ const line3 = 'This is line 3' **Output** -```ts +```ts {1} // line-numbers is disabled by default const line2 = 'This is line 2' const line3 = 'This is line 3' ``` -```ts:line-numbers +```ts:line-numbers {1} // line-numbers is enabled const line2 = 'This is line 2' const line3 = 'This is line 3'