custom highlighter.

package.json

@@ -78,7 +78,8 @@
         "shiki": "^0.14.5",
         "slugify": "^1.6.6",
         "unified": "^10.1.1",
-        "unist-util-visit": "^4.1.2"
+        "unist-util-visit": "^4.1.2",
+        "vscode-textmate": "^9.0.0"
     },
     "devDependencies": {
         "@babel/preset-env": "^7.20.2",

remix.config.js

@@ -4,12 +4,6 @@ const config = {
     appDirectory: "src",
     ignoredRouteFiles: ["**/.*"],
     future: {},
-    serverDependenciesToBundle: [
-        "shiki",
-        "shiki/**/*",
-        "shiki/languages/**/*",
-        "shiki/themes/**/*",
-    ],
     serverModuleFormat: "esm",
 }
 

src/utils/markdown.server.ts

@@ -16,6 +16,7 @@ import remarkInlineLinks from "remark-inline-links"
 import remarkParse from "remark-parse"
 import remarkRehype from "remark-rehype"
 import remarkUnwrapImages from "remark-unwrap-images"
+import {getHighlighter} from "shiki"
 import {unified} from "unified"
 
 import {codesandboxTransformer} from "~/transformers/codesandbox"
@@ -51,6 +52,14 @@ const transformMarkdown = async (markdown: string): Promise<string> => {
     const options: Options = {
         theme: json5.parse(theme),
         keepBackground: true,
+        getHighlighter: () =>
+            getHighlighter({
+                theme: json5.parse(theme),
+                paths: {
+                    languages: path.join(process.cwd(), "src/shiki/languages"),
+                    themes: path.join(process.cwd(), "src/shiki/themes"),
+                },
+            }),
     }
 
     const processor = unified()