feat: highlight code blocks

packages/app/package.json

@@ -19,6 +19,7 @@
     "debug": "^4.3.4",
     "dexie": "^3.2.4",
     "emojilib": "^3.0.10",
+    "highlight.js": "^11.8.0",
     "light-bolt11-decoder": "^2.1.0",
     "match-sorter": "^6.3.1",
     "qr-code-styling": "^1.6.0-rc.1",

packages/app/src/Element/CodeBlock.css

@@ -0,0 +1,14 @@
+.codeblock {
+  overflow: auto;
+  position: relative;
+}
+
+.codeblock pre {
+  overflow: auto;
+  line-height: 1.4;
+  font-size: var(--font-size);
+}
+
+.hljs {
+  background: #f6f8fa;
+}

packages/app/src/Element/CodeBlock.tsx

@@ -0,0 +1,24 @@
+import { useEffect } from "react";
+import "highlight.js/styles/github.css";
+import "./CodeBlock.css";
+
+const CodeBlock = ({ content, language }: { content: string; language?: string }) => {
+  useEffect(() => {
+    const importHljs = async () => {
+      const hljs = (await import("highlight.js")).default;
+      hljs.highlightAll();
+    };
+
+    importHljs();
+  });
+
+  return (
+    <div className={`codeblock ${language && `language-${language}`}`} dir="auto">
+      <pre>
+        <code className={language && `language-${language}`}>{content.trim()}</code>
+      </pre>
+    </div>
+  );
+};
+
+export default CodeBlock;

packages/app/src/Element/Text.tsx

@@ -11,6 +11,7 @@ import { ProxyImg } from "./ProxyImg";
 import { SpotlightMediaModal } from "./Deck/SpotlightMedia";
 import HighlightedText from "./HighlightedText";
 import { useTextTransformer } from "Hooks/useTextTransformCache";
+import CodeBlock from "./CodeBlock";
 
 export interface TextProps {
   id: string;
@@ -254,6 +255,9 @@ export default function Text({
       if (element.type === "custom_emoji") {
         chunks.push(<ProxyImg src={element.content} size={15} className="custom-emoji" />);
       }
+      if (element.type === "code_block") {
+        chunks.push(<CodeBlock content={element.content} language={element.language} />);
+      }
       if (element.type === "text") {
         chunks.push(
           <div className="text-frag">