feat: remove notation escape (#709)

Author: sor4chi

docs/.vitepress/config.ts

@@ -4,7 +4,7 @@ import { bundledThemes } from 'shiki'
 
 // @ts-expect-error missing types
 import { withMermaid } from 'vitepress-plugin-mermaid'
-import { transformerMetaWordHighlight, transformerNotationWordHighlight } from '../../packages/transformers/src'
+import { transformerMetaWordHighlight, transformerNotationWordHighlight, transformerRemoveNotationEscape } from '../../packages/transformers/src'
 import { defaultHoverInfoProcessor, transformerTwoslash } from '../../packages/vitepress-twoslash/src/index'
 import { version } from '../../package.json'
 import vite from './vite.config'
@@ -120,12 +120,7 @@ export default withMermaid(defineConfig({
             .replace(/_shikijs_core\w*\./g, '')
         },
       }),
-      {
-        name: 'shiki:remove-escape',
-        postprocess(code) {
-          return code.replace(/\[\\!code/g, '[!code')
-        },
-      },
+      transformerRemoveNotationEscape(),
     ],
   },
 

docs/packages/transformers.md

@@ -341,3 +341,10 @@ Support for `shiki`'s `lineOptions` that is removed in `shiki`.
 ### `transformerRemoveLineBreak`
 
 Remove line breaks between `<span class="line">`. Useful when you set `display: block` to `.line` in CSS.
+
+---
+
+### `transformerRemoveNotationEscape`
+
+Transform `// [\!code ...]` to `// [!code ...]`.
+Avoid rendering the escaped notation syntax as it is.

packages/transformers/src/index.ts

@@ -1,5 +1,6 @@
 export * from './transformers/render-whitespace'
 export * from './transformers/remove-line-breaks'
+export * from './transformers/remove-notation-escape'
 export * from './transformers/compact-line-options'
 export * from './transformers/notation-focus'
 export * from './transformers/notation-highlight'

packages/transformers/src/transformers/remove-notation-escape.ts

@@ -0,0 +1,15 @@
+import type { ShikiTransformer } from 'shiki'
+
+/**
+ * Remove notation escapes.
+ * Useful when you want to write `// [!code` in markdown.
+ * If you process `// [\!code ...]` expression, you can get `// [!code ...]` in the output.
+ */
+export function transformerRemoveNotationEscape(): ShikiTransformer {
+  return {
+    name: '@shikijs/transformers:remove-notation-escape',
+    postprocess(code) {
+      return code.replace(/\[\\!code/g, '[!code')
+    },
+  }
+}