feat: add code highlighting (#100)

txpipe · Nov 28, 2024 · 79d3d06 · 79d3d06
1 parent 28c1aba
commit 79d3d06
Show file tree

Hide file tree

Showing 7 changed files with 709 additions and 549 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -19,6 +19,7 @@
     "next-mdx-remote": "^5.0.0",
     "react": "^18",
     "react-dom": "^18",
+    "shiki": "^1.23.1",
     "zustand": "^5.0.1"
   },
   "devDependencies": {

diff --git a/frontend/src/components/CodeBlock.tsx b/frontend/src/components/CodeBlock.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { codeToHtml } from "shiki";
+
+const CodeBlock = ({
+  content,
+}: {
+  content: string;
+}) => {
+  const [code, setCode] = useState<string>('<div></div>');
+
+  useEffect(() => {
+    codeToHtml(content, { lang: 'typescript', theme: 'dark-plus' }).then(setCode);
+  }, [content]);
+
+  return <div dangerouslySetInnerHTML={{ __html: code }} />;
+}
+
+export default CodeBlock;