Replace shikiji by shiki (#297)

package.json

@@ -54,7 +54,7 @@
         "remark-rehype": "^11.1.0",
         "rison": "^0.1.1",
         "server-only": "^0.0.1",
-        "shikiji": "^0.8.0",
+        "shiki": "^1.2.0",
         "swagger2openapi": "^7.0.8",
         "tailwind-merge": "^2.2.0",
         "tailwind-shades": "^1.1.2",

src/components/DocumentView/CodeBlock/CodeBlock.tsx

@@ -283,5 +283,5 @@ function CodeHighlightToken(props: {
         return <>{token.token.content}</>;
     }
 
-    return <span style={{ color: colorToCSSVar[token.token.color] }}>{token.token.content}</span>;
+    return <span style={{ color: token.token.color }}>{token.token.content}</span>;
 }

src/components/DocumentView/CodeBlock/highlight.ts

@@ -1,7 +1,13 @@
 import { DocumentBlockCode, DocumentBlockCodeLine, DocumentInlineAnnotation } from '@gitbook/api';
-import { getHighlighter, loadWasm, bundledLanguages, Highlighter, ThemedToken } from 'shikiji';
+import {
+    loadWasm,
+    bundledLanguages,
+    ThemedToken,
+    getHighlighter,
+    createCssVariablesTheme,
+} from 'shiki';
 // @ts-ignore - onigWasm is a Wasm module
-import onigWasm from 'shikiji/onig.wasm?module';
+import onigWasm from 'shiki/onig.wasm?module';
 
 import { singleton } from '@/lib/async';
 import { getNodeText } from '@/lib/document';
@@ -55,11 +61,10 @@ export async function highlight(block: DocumentBlockCode): Promise<HighlightLine
         return plainHighlighting(block);
     }
 
-    const instance = await loadHighlighter();
-    await instance.loadLanguage(langName);
+    const highlighter = await loadHighlighter();
+    await highlighter.loadLanguage(langName);
 
-    const lines = instance.codeToThemedTokens(code, {
-        theme: 'css-variables',
+    const lines = highlighter.codeToTokensBase(code, {
         lang: langName,
     });
     let currentIndex = 0;
@@ -318,7 +323,9 @@ const loadHighlighter = singleton(async () => {
         // Otherwise for Vercel/Cloudflare, we need to load it ourselves.
         await loadWasm((obj) => WebAssembly.instantiate(onigWasm, obj));
     }
-    const instance = await getHighlighter();
-    await instance.loadTheme('css-variables');
-    return instance;
+    const highlighter = await getHighlighter({
+        themes: [createCssVariablesTheme()],
+        langs: [],
+    });
+    return highlighter;
 });