feat: add transformers option

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

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)

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>

test/fixtures/transformers.html

@@ -0,0 +1,3 @@
+<shiki lang="js">
+  import { codeToHtml } from 'shiki'
+</shiki>

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')
+        },
+      }
+    ]
+  })
+})