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>
+  );
+}