feat(rehype-shikiji): add language class to code element (#33)

shikijs · Nov 28, 2023 · ddcc309 · ddcc309
1 parent c8528c1
commit ddcc309
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 0 deletions.
diff --git a/packages/rehype-shikiji/src/index.ts b/packages/rehype-shikiji/src/index.ts
@@ -21,6 +21,13 @@ export type RehypeShikijiOptions = CodeOptionsThemes<BuiltinTheme> & {
    */
   highlightLines?: boolean | string
 
+  /**
+   * Add `language-*` class to code element
+   *
+   * @default false
+   */
+  addLanguageClass?: boolean
+
   /**
    * Extra meta data to pass to the highlighter
    */
@@ -40,6 +47,7 @@ export type RehypeShikijiOptions = CodeOptionsThemes<BuiltinTheme> & {
 const rehypeShikiji: Plugin<[RehypeShikijiOptions], Root> = function (options = {} as any) {
   const {
     highlightLines = true,
+    addLanguageClass = false,
     parseMetaString,
     ...rest
   } = options
@@ -93,6 +101,17 @@ const rehypeShikiji: Plugin<[RehypeShikijiOptions], Root> = function (options =
         },
       }
 
+      if (addLanguageClass) {
+        codeOptions.transformers ||= []
+        codeOptions.transformers.push({
+          name: 'rehype-shikiji:code-language-class',
+          code(node) {
+            addClassToHast(node, language)
+            return node
+          },
+        })
+      }
+
       if (highlightLines && typeof attrs === 'string') {
         const lines = parseHighlightLines(attrs)
         if (lines) {

diff --git a/packages/rehype-shikiji/test/fixtures/b.md b/packages/rehype-shikiji/test/fixtures/b.md
@@ -0,0 +1,8 @@
+# Hello
+
+…world!
+
+```js
+const b = 2
+console.log(b)
+```
diff --git a/packages/rehype-shikiji/test/fixtures/b.out.html b/packages/rehype-shikiji/test/fixtures/b.out.html
@@ -0,0 +1,5 @@
+<h1>Hello</h1>
+<p>…world!</p>
+<pre class="shiki vitesse-light" style="background-color:#ffffff;color:#393a34" tabindex="0"><code class="language-js"><span class="line"><span style="color:#AB5959">const</span><span style="color:#B07D48"> b</span><span style="color:#999999"> =</span><span style="color:#2F798A"> 2</span></span>
+<span class="line"><span style="color:#B07D48">console</span><span style="color:#999999">.</span><span style="color:#59873A">log</span><span style="color:#999999">(</span><span style="color:#B07D48">b</span><span style="color:#999999">)</span></span>
+<span class="line"></span></code></pre>
diff --git a/packages/rehype-shikiji/test/index.test.ts b/packages/rehype-shikiji/test/index.test.ts
@@ -27,3 +27,17 @@ it('run', async () => {
 
   expect(file.toString()).toMatchFileSnapshot('./fixtures/a.out.html')
 })
+
+it('code-add-language-class', async () => {
+  const file = await unified()
+    .use(remarkParse)
+    .use(remarkRehype)
+    .use(rehypeShikiji, {
+      theme: 'vitesse-light',
+      addLanguageClass: true,
+    })
+    .use(rehypeStringify)
+    .process(await fs.readFile(new URL('./fixtures/b.md', import.meta.url)))
+
+  expect(file.toString()).toMatchFileSnapshot('./fixtures/b.out.html')
+})