feat(transformers): add optional message to error level notation

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

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