From c048076370b081acc69c04754bf5deba2b8f5cd5 Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Sat, 24 Dec 2022 12:44:22 +0530
Subject: [PATCH] feat(build): fence-level config for line-numbers (#1733)

---
 docs/guide/markdown.md                   | 36 ++++++++++++++++++++++++
 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 +
 5 files changed, 54 insertions(+), 10 deletions(-)

diff --git a/docs/guide/markdown.md b/docs/guide/markdown.md
index 7936e9a8b70..7520d722689 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:
 <!-- 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.
diff --git a/src/node/markdown/markdown.ts b/src/node/markdown/markdown.ts
index d01cf8a4351..d1c60a8fabb 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 8df4f3d30e5..c21524384e0 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 = /<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) =>
diff --git a/src/node/markdown/plugins/lineNumbers.ts b/src/node/markdown/plugins/lineNumbers.ts
index 076f3a78f29..e7dd2fc6711 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('<code>'),
       rawCode.indexOf('</code>')
diff --git a/src/node/markdown/plugins/preWrapper.ts b/src/node/markdown/plugins/preWrapper.ts
index 547b91e4744..710f44054f8 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')
 }