fix(docs): code block styles (#222)

* fix(docs): add missing languages to code block

* fix(docs): code block in light mode

* fix(docs): correct indentation inside code blocks

* fix(docs): code block overflow

Author: akash3444

apps/docs/components/docs/code-block.tsx

@@ -6,7 +6,9 @@ import html from "shiki/langs/html.mjs";
 import json from "shiki/langs/json.mjs";
 import jsx from "shiki/langs/jsx.mjs";
 import markdown from "shiki/langs/markdown.mjs";
+import bash from "shiki/langs/bash.mjs";
 import tsx from "shiki/langs/tsx.mjs";
+import http from "shiki/langs/http.mjs";
 import githubLight from "shiki/themes/github-light.mjs";
 import vesper from "shiki/themes/vesper.mjs";
 import { SciFiCard } from "@/components/scifi-card";
@@ -22,7 +24,7 @@ interface CodeBlockProps extends React.ComponentProps<"div"> {
 
 const highlighter = createHighlighterCoreSync({
 	themes: [vesper, githubLight],
-	langs: [tsx, jsx, html, css, json, markdown],
+	langs: [tsx, jsx, html, css, json, markdown, bash, http],
 	engine: createJavaScriptRegexEngine(),
 });
 
@@ -69,12 +71,12 @@ function CodeBlock({
 
 	return (
 		<SciFiCard
-			className="group/code relative my-4 w-full overflow-hidden rounded border border-border bg-[#101010] text-sm backdrop-blur-sm transition-all duration-300 hover:border-primary/20"
+			className="group/code relative my-4 w-full overflow-hidden rounded border border-border bg-muted/50 dark:bg-[#101010] text-sm backdrop-blur-sm transition-all duration-300 hover:border-primary/20"
 			cornerOpacity="opacity-0 group-hover/code:opacity-100"
 			variant="primary"
 		>
 			{(language !== "text" || filename) && (
-				<div className="flex items-center justify-between border-white/5 border-b bg-white/5 px-4 py-2.5">
+				<div className="flex items-center justify-between border-foreground/5 border-b bg-foreground/5 px-4 py-2.5">
 					<div className="flex items-center gap-3">
 						{filename && (
 							<span className="font-medium text-foreground/80 text-xs tracking-tight">
@@ -104,9 +106,9 @@ function CodeBlock({
 				{highlightedCode ? (
 					<div
 						className={cn(
-							"overflow-x-auto font-mono text-[13px] leading-relaxed",
+							"font-mono! text-[13px] leading-relaxed",
 							"[&>pre]:m-0 [&>pre]:overflow-visible [&>pre]:p-4 [&>pre]:leading-relaxed",
-							"[&>pre>code]:block [&>pre>code]:w-full",
+							"[&>pre>code]:overflow-x-auto [&>pre>code]:block [&>pre>code]:w-full [&>pre>code]:p-4",
 							"[&_.line]:min-h-5",
 							className
 						)}
@@ -115,7 +117,7 @@ function CodeBlock({
 				) : (
 					<pre
 						className={cn(
-							"overflow-x-auto p-4 font-mono text-foreground text-sm leading-relaxed",
+							"overflow-x-auto p-4 font-mono! text-foreground text-sm leading-relaxed",
 							"[&>code]:block [&>code]:w-full [&>code]:p-0 [&>code]:text-inherit",
 							className
 						)}
@@ -133,7 +135,7 @@ function InlineCode({ className, ...props }: React.ComponentProps<"code">) {
 	return (
 		<code
 			className={cn(
-				"relative rounded border border-accent bg-accent/50 px-1.5 py-0.5 font-medium font-mono text-primary text-sm",
+				"relative rounded border border-accent bg-accent/50 px-1.5 py-0.5 font-medium font-mono! text-primary text-sm",
 				className
 			)}
 			{...props}

apps/docs/content/docs/api-keys.mdx

@@ -96,19 +96,19 @@ Authentication/authorization failures return structured errors:
 <CodeBlock 
   language="json"
   code={`{
-  "success": false,
-  "error": "Authentication required",
-  "code": "AUTH_REQUIRED"
-}`}
+    "success": false,
+    "error": "Authentication required",
+    "code": "AUTH_REQUIRED"
+  }`}
 />
 
 <CodeBlock 
   language="json"
   code={`{
-  "success": false,
-  "error": "Insufficient permissions",
-  "code": "FORBIDDEN"
-}`}
+    "success": false,
+    "error": "Insufficient permissions",
+    "code": "FORBIDDEN"
+  }`}
 />
 
 ### Rotation and revocation