From c14d41a6b60616c817cae04fd50c61325f51be08 Mon Sep 17 00:00:00 2001
From: Cosmin Popovici <hellocosmin@gmail.com>
Date: Wed, 6 Mar 2024 16:41:30 +0200
Subject: [PATCH] feat: add transformers option

---
 README.md                       | 33 +++++++++++++++++++++++++++++++++
 lib/index.js                    |  5 +++++
 test/expected/transformers.html |  3 +++
 test/fixtures/transformers.html |  3 +++
 test/test.js                    | 12 ++++++++++++
 5 files changed, 56 insertions(+)
 create mode 100644 test/expected/transformers.html
 create mode 100644 test/fixtures/transformers.html

diff --git a/README.md b/README.md
index 135e255..f6e3a50 100644
--- a/README.md
+++ b/README.md
@@ -28,6 +28,7 @@ Features:
 - [x] Wrap code block in custom tag
 - [x] Default color theme
 - [x] Decorations
+- [x] Transformers
 - [ ] Custom themes
 - [ ] Custom languages
 
@@ -351,6 +352,38 @@ posthtml([
 
 The word `const` will be wrapped in a `<span class="highlighted-word">` tag.
 
+### `transformers`
+
+Type: `array`\
+Default: `[]`
+
+Use this option to transform the highlighted code block with Shiki's [Transformers](https://shiki.style/guide/transformers).
+
+```js
+import posthtml from 'posthtml'
+import shiki from 'posthtml-shiki'
+
+posthtml([
+  shiki({
+    transformers: [
+      {
+        code(node) {
+          this.addClassToHast(node, 'language-js')
+        },
+      }
+    ]
+  })
+])
+  .process(`
+    <shiki>
+      const foo = 'bar'
+    </shiki>
+  `)
+  .then(result => result.html)
+```
+
+The generated `<code>` tag will have the `language-js` class added.
+
 [npm]: https://www.npmjs.com/package/posthtml-shiki
 [npm-version-shield]: https://img.shields.io/npm/v/posthtml-shiki.svg
 [npm-stats]: http://npm-stat.com/charts.html?package=posthtml-shiki
diff --git a/lib/index.js b/lib/index.js
index 45c8a54..512b57d 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -9,6 +9,7 @@ const plugin = (options = {}) => tree => {
   options.wrapTag = options.wrapTag || false
   options.tag = options.tag || 'shiki'
   options.decorations = options.decorations || []
+  options.transformers = options.transformers || []
 
   const promises = []
 
@@ -65,6 +66,10 @@ const plugin = (options = {}) => tree => {
             highlighterOptions.decorations = options.decorations
           }
 
+          if (options.transformers) {
+            highlighterOptions.transformers = options.transformers
+          }
+
           node.attrs = {}
           node.tag = wrapTag
           node.content = highlighter.codeToHtml(source, highlighterOptions)
diff --git a/test/expected/transformers.html b/test/expected/transformers.html
new file mode 100644
index 0000000..6ff3994
--- /dev/null
+++ b/test/expected/transformers.html
@@ -0,0 +1,3 @@
+<pre class="shiki nord" style="background-color:#2e3440ff;color:#d8dee9ff" tabindex="0"><code class="language-js"><span class="line"></span>
+<span class="line"><span style="color:#81A1C1">  import</span><span style="color:#ECEFF4"> {</span><span style="color:#8FBCBB"> codeToHtml</span><span style="color:#ECEFF4"> }</span><span style="color:#81A1C1"> from</span><span style="color:#ECEFF4"> '</span><span style="color:#A3BE8C">shiki</span><span style="color:#ECEFF4">'</span></span>
+<span class="line"></span></code></pre>
diff --git a/test/fixtures/transformers.html b/test/fixtures/transformers.html
new file mode 100644
index 0000000..26f268c
--- /dev/null
+++ b/test/fixtures/transformers.html
@@ -0,0 +1,3 @@
+<shiki lang="js">
+  import { codeToHtml } from 'shiki'
+</shiki>
diff --git a/test/test.js b/test/test.js
index 0e814f7..70ff3fb 100644
--- a/test/test.js
+++ b/test/test.js
@@ -67,3 +67,15 @@ test('decorations', t => {
     ]
   })
 })
+
+test('transformers', t => {
+  return process(t, 'transformers', {
+    transformers: [
+      {
+        code(node) {
+          this.addClassToHast(node, 'language-js')
+        },
+      }
+    ]
+  })
+})