feat: syntax highlighting with shiki and copy-to-clipboard for all docs code blocks

apps/web/src/components/code-block.tsx

@@ -0,0 +1,34 @@
+import { codeToHtml } from "shiki";
+import { CopyButton } from "./copy-button";
+
+export async function CodeBlock({
+  children,
+  title,
+  language = "text",
+}: {
+  children: string;
+  title?: string;
+  language?: string;
+}) {
+  const html = await codeToHtml(children, {
+    lang: language,
+    theme: "github-dark",
+  });
+
+  return (
+    <div className="rounded-xl overflow-hidden border border-neutral-800 bg-neutral-900/50 my-4">
+      {title && (
+        <div className="px-4 py-2.5 border-b border-neutral-800 text-xs text-neutral-500 font-mono">
+          {title}
+        </div>
+      )}
+      <div className="relative">
+        <CopyButton text={children} />
+        <div
+          className="p-4 overflow-x-auto text-sm leading-relaxed [&_pre]:!bg-transparent [&_code]:!bg-transparent"
+          dangerouslySetInnerHTML={{ __html: html }}
+        />
+      </div>
+    </div>
+  );
+}

apps/web/src/components/copy-button.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { useState } from "react";
+import { Copy, Check } from "lucide-react";
+
+export function CopyButton({ text }: { text: string }) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <button
+      onClick={handleCopy}
+      className="absolute top-3 right-3 p-1.5 rounded-md text-neutral-500 hover:text-neutral-300 hover:bg-neutral-800/50 transition-colors"
+      aria-label="Copy to clipboard"
+    >
+      {copied ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
+    </button>
+  );
+}