diff --git a/docs/packages/transformers.md b/docs/packages/transformers.md
index cf453634d..43d078ed1 100644
--- a/docs/packages/transformers.md
+++ b/docs/packages/transformers.md
@@ -314,6 +314,22 @@ console.log('Info') // [\!code info]
 - Outputs: `<span class="line highlighted info">` for info
 - The outer `<pre>` tag is modified: `<pre class="has-highlighted">`
 
+You can also provide a message to be displayed:
+
+````md
+```ts
+console.error('Error') // [\!code error:This is an error message]
+```
+````
+
+Renders:
+
+```ts
+console.error('Error') // [!code error:This is an error message]
+```
+
+- Outputs: `<span class="line highlighted error" data-error="This is an error message">`
+
 With some additional CSS rules, you can make it look like this:
 
 ```ts
diff --git a/packages/transformers/src/transformers/notation-error-level.ts b/packages/transformers/src/transformers/notation-error-level.ts
index 88ecae34c..d1db2aebb 100644
--- a/packages/transformers/src/transformers/notation-error-level.ts
+++ b/packages/transformers/src/transformers/notation-error-level.ts
@@ -1,6 +1,6 @@
 import type { ShikiTransformer } from '@shikijs/types'
 import type { MatchAlgorithmOptions } from '../shared/notation-transformer'
-import { transformerNotationMap } from './notation-map'
+import { createCommentNotationTransformer } from '../shared/notation-transformer'
 
 export interface TransformerNotationErrorLevelOptions extends MatchAlgorithmOptions {
   classMap?: Record<string, string | string[]>
@@ -14,6 +14,10 @@ export interface TransformerNotationErrorLevelOptions extends MatchAlgorithmOpti
   classActiveCode?: string
 }
 
+function escapeRegExp(str: string): string {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+}
+
 /**
  * Allow using `[!code error]` `[!code warning]` notation in code to mark highlighted lines.
  */
@@ -30,13 +34,32 @@ export function transformerNotationErrorLevel(
     classActiveCode,
   } = options
 
-  return transformerNotationMap(
-    {
-      classMap,
-      classActivePre,
-      classActiveCode,
-      matchAlgorithm: options.matchAlgorithm,
-    },
+  return createCommentNotationTransformer(
     '@shikijs/transformers:notation-error-level',
+    new RegExp(`\\s*\\[!code (${Object.keys(classMap).map(escapeRegExp).join('|')})(:.*)?\\]`, 'gi'),
+    function ([_, match, rawRange = ''], _line, _comment, lines, index) {
+      const range = rawRange ? rawRange.slice(1) : ''
+      if (/^\d+$/.test(range)) {
+        const lineNum = Number.parseInt(range, 10)
+        for (let i = index; i < Math.min(index + lineNum, lines.length); i++) {
+          this.addClassToHast(lines[i], classMap[match])
+        }
+      }
+      else {
+        this.addClassToHast(lines[index], classMap[match])
+        if (range) {
+          const properties = lines[index].properties || {}
+          properties[`data-${match}`] = range
+          lines[index].properties = properties
+        }
+      }
+
+      if (classActivePre)
+        this.addClassToHast(this.pre, classActivePre)
+      if (classActiveCode)
+        this.addClassToHast(this.code, classActiveCode)
+      return true
+    },
+    options.matchAlgorithm,
   )
 }
diff --git a/packages/transformers/test/fixtures/error-level/message.js b/packages/transformers/test/fixtures/error-level/message.js
new file mode 100644
index 000000000..09a47234f
--- /dev/null
+++ b/packages/transformers/test/fixtures/error-level/message.js
@@ -0,0 +1,4 @@
+export function foo() {
+  console.error('error') // [!code error:This is an error]
+  console.warn('warn') // [!code warning:This is a warning]
+}
diff --git a/packages/transformers/test/fixtures/error-level/message.js.output.html b/packages/transformers/test/fixtures/error-level/message.js.output.html
new file mode 100644
index 000000000..eba3d39dc
--- /dev/null
+++ b/packages/transformers/test/fixtures/error-level/message.js.output.html
@@ -0,0 +1,8 @@
+<pre class="shiki github-dark has-highlighted" style="background-color:#24292e;color:#e1e4e8" tabindex="0"><code><span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> function</span><span style="color:#B392F0"> foo</span><span style="color:#E1E4E8">() {</span></span><span class="line highlighted error" data-error="This is an error"><span style="color:#E1E4E8">  console.</span><span style="color:#B392F0">error</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'error'</span><span style="color:#E1E4E8">) </span></span><span class="line highlighted warning" data-warning="This is a warning"><span style="color:#E1E4E8">  console.</span><span style="color:#B392F0">warn</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'warn'</span><span style="color:#E1E4E8">) </span></span><span class="line"><span style="color:#E1E4E8">}</span></span><span class="line"></span></code></pre>
+<style>
+body { margin: 0; }
+.shiki { padding: 1em; }
+.line { display: block; width: 100%; height: 1.2em; }
+.highlighted.warning { background-color: #9905; }
+.highlighted.error { background-color: #8005; }
+</style>
\ No newline at end of file
diff --git a/packages/transformers/test/fixtures/error-level/numeric.js b/packages/transformers/test/fixtures/error-level/numeric.js
new file mode 100644
index 000000000..132c965c7
--- /dev/null
+++ b/packages/transformers/test/fixtures/error-level/numeric.js
@@ -0,0 +1,6 @@
+export function foo() {
+  console.log('error') // [!code error:2]
+  console.log('error')
+  console.log('warn') // [!code warning:2]
+  console.log('warn')
+}
diff --git a/packages/transformers/test/fixtures/error-level/numeric.js.output.html b/packages/transformers/test/fixtures/error-level/numeric.js.output.html
new file mode 100644
index 000000000..439c4480d
--- /dev/null
+++ b/packages/transformers/test/fixtures/error-level/numeric.js.output.html
@@ -0,0 +1,8 @@
+<pre class="shiki github-dark has-highlighted" style="background-color:#24292e;color:#e1e4e8" tabindex="0"><code><span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> function</span><span style="color:#B392F0"> foo</span><span style="color:#E1E4E8">() {</span></span><span class="line highlighted error"><span style="color:#E1E4E8">  console.</span><span style="color:#B392F0">log</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'error'</span><span style="color:#E1E4E8">) </span></span><span class="line highlighted error"><span style="color:#E1E4E8">  console.</span><span style="color:#B392F0">log</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'error'</span><span style="color:#E1E4E8">)</span></span><span class="line highlighted warning"><span style="color:#E1E4E8">  console.</span><span style="color:#B392F0">log</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'warn'</span><span style="color:#E1E4E8">) </span></span><span class="line highlighted warning"><span style="color:#E1E4E8">  console.</span><span style="color:#B392F0">log</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'warn'</span><span style="color:#E1E4E8">)</span></span><span class="line"><span style="color:#E1E4E8">}</span></span><span class="line"></span></code></pre>
+<style>
+body { margin: 0; }
+.shiki { padding: 1em; }
+.line { display: block; width: 100%; height: 1.2em; }
+.highlighted.warning { background-color: #9905; }
+.highlighted.error { background-color: #8005; }
+</style>
\ No newline at end of file