highlight the json content of the api requests

Author: fulopkovacs

package.json

@@ -64,6 +64,7 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-resizable-panels": "^3.0.6",
+    "shiki": "^3.21.0",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.4.0",
     "tailwindcss": "^4.1.17",

pnpm-lock.yaml

@@ -15,6 +15,7 @@ import { userPreferencesCollection } from "@/collections/UserPreferences";
 import { cn } from "@/lib/utils";
 import { HighlightWrapper } from "@/utils/highlight-collection-related-info";
 import { USER_PLACEHOLDER } from "@/utils/USER_PLACEHOLDER_CONSTANT";
+import { CodeHighlighter } from "./CodeHighlighter";
 import { Badge } from "./ui/badge";
 import { Button } from "./ui/button";
 import {
@@ -58,6 +59,9 @@ function JsonViewer({
     return null;
   }
 
+  const jsonString =
+    typeof data === "string" ? data : JSON.stringify(data, null, 2);
+
   return (
     <Collapsible open={isOpen} onOpenChange={setIsOpen}>
       <CollapsibleTrigger className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors">
@@ -69,9 +73,7 @@ function JsonViewer({
         {label}
       </CollapsibleTrigger>
       <CollapsibleContent>
-        <pre className="mt-1 whitespace-pre-wrap p-2 bg-muted/50 rounded text-xs overflow-x-auto max-h-40 overflow-y-auto">
-          {typeof data === "string" ? data : JSON.stringify(data, null, 2)}
-        </pre>
+        <CodeHighlighter code={jsonString} language="json" />
       </CollapsibleContent>
     </Collapsible>
   );

src/components/ApiRequestsPanel.tsx

@@ -0,0 +1,55 @@
+import { useEffect, useState } from "react";
+import { type BundledLanguage, codeToHtml } from "shiki";
+
+type CodeHighlighterProps = {
+  code: string;
+  language?: BundledLanguage;
+};
+
+const className =
+  "mt-1 rounded-md text-xs overflow-x-auto max-h-40 overflow-y-auto [&_.shiki]:p-3! [&_.shiki]:m-0! [&_.shiki]:bg-muted/50 [&_.shiki]:border [&_.shiki]:border-border/50 [&_.shiki]:rounded-md! [&_.shiki]:[--shiki-light-bg:transparent] [&_.shiki]:[--shiki-dark-bg:transparent] [&_.shiki_span]:[--shiki-light-bg:transparent] [&_.shiki_span]:[--shiki-dark-bg:transparent]";
+
+export function CodeHighlighter({
+  code,
+  language = "json",
+}: CodeHighlighterProps) {
+  const [html, setHtml] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    codeToHtml(code, {
+      lang: language,
+      themes: {
+        light: "material-theme-lighter",
+        dark: "material-theme-darker",
+      },
+      defaultColor: false,
+    }).then((result) => {
+      if (!cancelled) {
+        setHtml(result);
+      }
+    });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [code, language]);
+
+  if (html === null) {
+    // Show plain text while loading
+    return (
+      <pre className={className}>
+        <code>{code}</code>
+      </pre>
+    );
+  }
+
+  return (
+    <div
+      className={className}
+      // biome-ignore lint/security/noDangerouslySetInnerHtml: Shiki output is safe
+      dangerouslySetInnerHTML={{ __html: html }}
+    />
+  );
+}