fix: language in code block when markdown-it-attrs is disabled and li…

…ne numbers are compatible even when markdown-it-attrs is disabled. Also, added example of line numbers code block with line highlightning

Signed-off-by: GurkiranSingh <gurkiransinghk@gmail.com>

docs/guide/markdown.md

@@ -358,7 +358,7 @@ You can enable line numbers for each code blocks via config or you can specify `
 **Input**
 
 ````
-```js {showLineNumbers}
+```js{showLineNumbers}
 export default {
   markdown: {
     lineNumbers: true
@@ -377,6 +377,43 @@ export default {
 }
 ```
 
+
+You can also highlight lines along with specifying line numbers.
+
+**Input**
+
+````
+```js{1,4,6-8,showLineNumbers}
+export default { // Highlighted
+  data () {
+    return {
+      msg: `Highlighted!
+      This line isn't highlighted,
+      but this and the next 2 are.`,
+      motd: 'VitePress is awesome',
+      lorem: 'ipsum'
+    }
+  }
+}
+```
+````
+
+**Output**
+
+```js{1,4,6-8,showLineNumbers}
+export default { // Highlighted
+  data () {
+    return {
+      msg: `Highlighted!
+      This line isn't highlighted,
+      but this and the next 2 are.`,
+      motd: 'VitePress is awesome',
+      lorem: 'ipsum',
+    }
+  }
+}
+```
+
 Please see [`markdown` options](../config/app-configs#markdown) for more details.
 
 ## Import Code Snippets

src/node/markdown/plugins/highlightLines.ts

@@ -4,7 +4,7 @@
 
 import MarkdownIt from 'markdown-it'
 
-const RE = /{([\d,-]+)}/
+const RE = /{([\w,-]+)}/
 
 export const highlightLinePlugin = (md: MarkdownIt) => {
   const fence = md.renderer.rules.fence!
@@ -37,7 +37,10 @@ export const highlightLinePlugin = (md: MarkdownIt) => {
     if (!lines) {
       lines = attr![0]
 
-      if (!lines || !/[\d,-]+/.test(lines)) {
+      if (
+        !lines ||
+        (!/[\d,-]+/.test(lines) && !lines.includes('showLineNumbers'))
+      ) {
         return fence(...args)
       }
     }

src/node/markdown/plugins/lineNumbers.ts

@@ -13,9 +13,11 @@ export const lineNumberPlugin = (
     const [tokens, idx] = args
     const token = tokens[idx]
     const attr = token.attrs && token.attrs[0]
+    const info = token.info
     if (
-      (!isLineNumberOption && !attr) ||
-      (!isLineNumberOption && attr && !attr[0].includes('showLineNumbers'))
+      (!isLineNumberOption && !attr && !info) ||
+      (!isLineNumberOption && attr && !attr[0].includes('showLineNumbers')) ||
+      (!isLineNumberOption && info && !info.includes('showLineNumbers'))
     ) {
       return rawCode
     }

src/node/markdown/plugins/preWrapper.ts

@@ -9,11 +9,13 @@
 
 import MarkdownIt from 'markdown-it'
 
+const RE = /{([\w,-]+)}/
+
 export const preWrapperPlugin = (md: MarkdownIt) => {
   const fence = md.renderer.rules.fence!
   md.renderer.rules.fence = (...args) => {
     const [tokens, idx] = args
-    const lang = tokens[idx].info.trim().replace(/-vue$/, '')
+    const lang = tokens[idx].info.trim().replace(/-vue$/, '').replace(RE, '')
     const rawCode = fence(...args)
     return `<div class="language-${lang}"><button class="copy"></button><span class="lang">${
       lang === 'vue-html' ? 'template' : lang