Add syntax highlighting for bash

yen223 · Nov 6, 2024 · 17a0842 · 17a0842
1 parent 16ba918
commit 17a0842
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 3 deletions.
diff --git a/app/lib/markdown/syntaxHighlight.tsx b/app/lib/markdown/syntaxHighlight.tsx
@@ -1,14 +1,21 @@
 import { Highlight, themes } from "prism-react-renderer"
-
+import { Prism } from 'prism-react-renderer'
+import bashLang from 'refractor/lang/bash';
 
 type FenceProps = {
   children: string;
   language?: string;
 };
 
 export function Fence({ children, language }: FenceProps) {
+  bashLang(Prism)
   return (
-    <Highlight code={children.trim()} language={language || ""} theme={themes.vsDark}>
+    <Highlight 
+      prism={Prism}
+      code={children.trim()} 
+      language={language || ""} 
+      theme={themes.vsDark}
+    >
       {({ className, style, tokens, getLineProps, getTokenProps }) => (
         <pre style={style}>
           {tokens.map((line, i) => (

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,13 +21,15 @@
     "@remix-run/cloudflare": "2.13.1",
     "@remix-run/cloudflare-pages": "2.13.1",
     "@remix-run/react": "2.13.1",
+    "@types/refractor": "3.4.1",
     "clsx": "2.1.1",
     "headlessui": "0.0.0",
     "isbot": "4.1.0",
     "js-yaml": "4.1.0",
     "prism-react-renderer": "2.4.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "refractor": "4.8.1",
     "zod": "3.23.8"
   },
   "devDependencies": {