Shiki transformers

Author: Kocal

assets/controllers/code_highlight_controller.js

@@ -1,14 +1,12 @@
 import { Controller } from "@hotwired/stimulus"
 import { codeToHtml } from 'https://esm.sh/[email protected]'
+import { transformerNotationDiff, transformerNotationHighlight } from 'https://esm.sh/@shikijs/[email protected]'
 import { useIntersection } from 'stimulus-use'
 
-
 /* stimulusFetch: 'lazy' */
 export default class extends Controller {
-    const
     connect() {
         useIntersection(this)
-
     }
 
     async appear() {
@@ -21,6 +19,10 @@ export default class extends Controller {
         this.element.outerHTML = await codeToHtml(this.element.textContent, {
             lang: this.element.dataset.lang || 'plaintext',
             theme: 'one-dark-pro',
+            transformers: [
+                transformerNotationDiff(),
+                transformerNotationHighlight(),
+            ]
         });
     }
 }