feat: support shiki's object token.htmlStyle (#55)

ocavue · Oct 11, 2024 · 70fc971 · 70fc971
1 parent c6c47c4
commit 70fc971
Show file tree

Hide file tree

Showing 3 changed files with 166 additions and 11 deletions.
diff --git a/package.json b/package.json
@@ -118,7 +118,7 @@
     "prosemirror-transform": "^1.10.0",
     "prosemirror-view": "^1.34.1",
     "refractor": "^4.8.1",
-    "shiki": "^1.15.2",
+    "shiki": "^1.22.0",
     "sugar-high": "^0.7.0",
     "tsup": "^8.2.4",
     "typescript": "^5.5.4",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/shiki.ts b/src/shiki.ts
@@ -34,7 +34,9 @@ export function createParser(
 
         const decoration = Decoration.inline(from, to, {
           // When using `options.themes` the `htmlStyle` field will be set, otherwise `color` will be set
-          style: token.htmlStyle ?? `color: ${token.color}`,
+          style: stringifyTokenStyle(
+            token.htmlStyle ?? `color: ${token.color}`,
+          ),
           class: 'shiki',
         })
 
@@ -49,3 +51,15 @@ export function createParser(
     return decorations
   }
 }
+
+/**
+ * Copied from https://github.com/shikijs/shiki/blob/f76a371dbc2752cba341023df00ebfe9b66cb3f6/packages/core/src/utils.ts#L213
+ *
+ * Copy instead of import it from `shiki` to avoid importing the `shiki` package in this file.
+ */
+function stringifyTokenStyle(token: string | Record<string, string>): string {
+  if (typeof token === 'string') return token
+  return Object.entries(token)
+    .map(([key, value]) => `${key}:${value}`)
+    .join(';')
+}