diff --git a/docs/guide/markdown.md b/docs/guide/markdown.md
index 41f6017e0a4b..54fcdcb8545d 100644
--- a/docs/guide/markdown.md
+++ b/docs/guide/markdown.md
@@ -353,9 +353,23 @@ export default { // Highlighted
 
 ## Line Numbers
 
-You can enable line numbers for each code blocks via config:
+You can enable line numbers for each code blocks via config or you can specify `{showLineNumbers}` for a single code block:
 
-```js
+**Input**
+
+````
+```js{showLineNumbers}
+export default {
+  markdown: {
+    lineNumbers: true
+  }
+}
+```
+````
+
+**Output**
+
+```js{showLineNumbers}
 export default {
   markdown: {
     lineNumbers: true
@@ -363,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
diff --git a/src/node/markdown/markdown.ts b/src/node/markdown/markdown.ts
index bd9c3aef2999..304acdff0215 100644
--- a/src/node/markdown/markdown.ts
+++ b/src/node/markdown/markdown.ts
@@ -80,6 +80,7 @@ export const createMarkdownRenderer = async (
       },
       base
     )
+    .use(lineNumberPlugin, options.lineNumbers)
 
   // 3rd party plugins
   if (!options.attrs?.disable) {
@@ -113,9 +114,5 @@ export const createMarkdownRenderer = async (
   if (options.config) {
     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 761aff428f43..8823758d4217 100644
--- a/src/node/markdown/plugins/highlight.ts
+++ b/src/node/markdown/plugins/highlight.ts
@@ -22,7 +22,7 @@ const attrsToLines = (attrs: string): HtmlRendererOptions['lineOptions'] => {
         result.push(
           ...Array.from({ length: end - start + 1 }, (_, i) => start + i)
         )
-      } else {
+      } else if (!isNaN(start)) {
         result.push(start)
       }
     })
diff --git a/src/node/markdown/plugins/highlightLines.ts b/src/node/markdown/plugins/highlightLines.ts
index a1e6c65fde49..b80528f28952 100644
--- a/src/node/markdown/plugins/highlightLines.ts
+++ b/src/node/markdown/plugins/highlightLines.ts
@@ -4,7 +4,7 @@
 
 import MarkdownIt from 'markdown-it'
 
-const RE = /{([\d,-]+)}/
+const RE = /{(([\d,-]|\bshowLineNumbers\b)+)}/
 
 export const highlightLinePlugin = (md: MarkdownIt) => {
   const fence = md.renderer.rules.fence!
@@ -37,7 +37,7 @@ export const highlightLinePlugin = (md: MarkdownIt) => {
     if (!lines) {
       lines = attr![0]
 
-      if (!lines || !/[\d,-]+/.test(lines)) {
+      if (!lines || !/(([\d,-]|\bshowLineNumbers\b)+)/.test(lines)) {
         return fence(...args)
       }
     }
diff --git a/src/node/markdown/plugins/lineNumbers.ts b/src/node/markdown/plugins/lineNumbers.ts
index 0e306d14a0a3..70f3c56d98b5 100644
--- a/src/node/markdown/plugins/lineNumbers.ts
+++ b/src/node/markdown/plugins/lineNumbers.ts
@@ -3,10 +3,24 @@
 
 import MarkdownIt from 'markdown-it'
 
-export const lineNumberPlugin = (md: MarkdownIt) => {
+export const lineNumberPlugin = (
+  md: MarkdownIt,
+  isLineNumberOption: Boolean
+) => {
   const fence = md.renderer.rules.fence!
   md.renderer.rules.fence = (...args) => {
     const rawCode = fence(...args)
+    const [tokens, idx] = args
+    const token = tokens[idx]
+    const attr = token.attrs && token.attrs[0]
+    const info = token.info
+    if (
+      (!isLineNumberOption && !attr && !info) ||
+      (!isLineNumberOption && attr && !attr[0].includes('showLineNumbers')) ||
+      (!isLineNumberOption && info && !info.includes('showLineNumbers'))
+    ) {
+      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 7a6b22e7eca0..1a569ff76674 100644
--- a/src/node/markdown/plugins/preWrapper.ts
+++ b/src/node/markdown/plugins/preWrapper.ts
@@ -9,11 +9,13 @@
 
 import MarkdownIt from 'markdown-it'
 
+const RE = /{(([\d,-]|\bshowLineNumbers\b)+)}/
+
 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 title="Copy Code" class="copy"></button><span class="lang">${
       lang === 'vue-html' ? 'template' : lang