feat(build): fence-level config for line-numbers (#1733)

Author: brc-dd

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:
 <!-- with line highlighting: -->
 
 <<< @/snippets/snippet.cs{1,2,4-6 c#}
+
+<!-- with line numbers: -->
+
+<<< @/snippets/snippet.cs{1,2,4-6 c#:line-numbers}
 ```
 
 This is helpful if source language cannot be inferred from your file extension.

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
 }

src/node/markdown/plugins/highlight.ts

@@ -74,10 +74,12 @@ export async function highlight(
   const styleRE = /<pre[^>]*(style=".*?")/
   const preRE = /^<pre(.*?)>/
   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) =>

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('<code>'),
       rawCode.indexOf('</code>')

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')
 }