add shiki and code snippet

Author: alissacrane-cb

apps/web/app/(base-org)/developers/onchainkit/page.tsx

@@ -8,7 +8,7 @@ import { InfoCards } from 'apps/web/src/components/Developers/Onchainkit/InfoCar
 import { Templates } from 'apps/web/src/components/Developers/Onchainkit/Templates';
 import { Testmonials } from 'apps/web/src/components/Developers/Onchainkit/Testimonials';
 import { CtaBanner } from 'apps/web/src/components/Developers/Shared/CtaBanner';
-import Image from 'next/image';
+import Image, { StaticImageData } from 'next/image';
 import onchainkit from 'apps/web/src/components/Developers/Onchainkit/onchainkit.svg';
 
 export default async function OnchainKit() {
@@ -18,7 +18,13 @@ export default async function OnchainKit() {
         {/* Header  */}
         <div className="flex flex-col items-center gap-1 pt-20">
           <div className="flex items-center gap-2 pb-6 text-[#C9A4FA]">
-            <Image src={onchainkit} alt="onchainkit" width={32} height={32} className="h-5 w-5" />
+            <Image
+              src={onchainkit as StaticImageData}
+              alt="onchainkit"
+              width={32}
+              height={32}
+              className="h-5 w-5"
+            />
             <Title level={TitleLevel.Title3}>OnchainKit</Title>
           </div>
           <Title level={TitleLevel.Display3}>Full-stack onchain components</Title>

apps/web/package.json

@@ -73,6 +73,7 @@
     "recharts": "^2.12.7",
     "satori": "^0.10.14",
     "sharp": "^0.33.4",
+    "shiki": "^2.3.2",
     "three": "^0.168.0",
     "three-stdlib": "^2.33.0",
     "twemoji": "^14.0.2",

apps/web/src/components/Developers/Shared/CodeSnippet.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+import { createHighlighter } from 'shiki';
+
+export default function CodeSnippet({ code }: { code: string }) {
+  const [highlightedCode, setHighlightedCode] = useState('');
+
+  useEffect(() => {
+    async function highlightCode() {
+      const highlighter = await createHighlighter({
+        themes: ['github-light', 'github-dark'],
+        langs: ['typescript'],
+      });
+
+      const formattedCode = highlighter.codeToHtml(code, {
+        lang: 'typescript',
+        themes: {
+          light: 'github-light',
+          dark: 'github-dark',
+        },
+        defaultColor: false,
+      });
+
+      // Remove Shiki formatting
+      const cleanedCode = formattedCode.replace(
+        /<pre[^>]*class="([^"]*)"[^>]*>/,
+        (_match: string, className: string) =>
+          `<pre class="${className}" style="margin: 0; padding: 0; background: transparent">`,
+      );
+
+      setHighlightedCode(cleanedCode);
+    }
+
+    void highlightCode();
+  }, [code]);
+
+  const dangerouslySetInnerHTML = useMemo(() => {
+    return { __html: highlightedCode };
+  }, [highlightedCode]);
+
+  if (!highlightedCode) {
+    return (
+      <div className="h-full overflow-auto rounded-lg transition-colors">
+        <div className="text-neutral-400">Loading...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="code-snippet h-full overflow-auto rounded-lg transition-colors"
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={dangerouslySetInnerHTML}
+    />
+  );
+}