2026 Redesign (#2531)

components/code-block.tsx

@@ -1,79 +1,51 @@
-import { CodeIcon, TerminalIcon } from "lucide-react";
+import { codeToHtml } from "shiki";
 import { cacheLife } from "next/cache";
 import CopyButton from "@/components/copy-button";
-import { cn } from "@/lib/utils";
 import reactToText from "react-to-text";
-import { codeToHtml } from "shiki";
 
 interface CodeBlockProps extends React.ComponentProps<"pre"> {
   showLineNumbers?: boolean;
-  showCopyButton?: boolean;
 }
 
-const renderHighlightedCode = async (codeString: string, lang: string) => {
+const renderCode = async (code: string, lang: string): Promise<string> => {
   "use cache";
   cacheLife("max");
 
-  const html = await codeToHtml(codeString, {
+  return codeToHtml(code, {
     lang,
-    themes: {
-      light: "github-light",
-      dark: "github-dark",
-    },
+    themes: { light: "github-light", dark: "github-dark" },
   });
-
-  return html;
 };
 
-const CodeBlock = async (props: CodeBlockProps) => {
-  const { showLineNumbers = false, showCopyButton = true, children, className } = props;
-
-  // escape hatch if this code wasn't meant to be highlighted
+const CodeBlock = async ({ children, className, showLineNumbers = true, ...props }: CodeBlockProps) => {
+  // Escape hatch for non-code pre blocks
   if (!children || typeof children !== "object" || !("props" in children)) {
-    return <pre {...props}>{children}</pre>;
+    return (
+      <pre className={className} {...props}>
+        {children}
+      </pre>
+    );
   }
 
   const codeProps = children.props as React.ComponentProps<"code">;
   const codeString = reactToText(codeProps.children).trim();
+  const lang = codeProps.className?.split("language-")[1] ?? "text";
 
-  // the language set in the markdown is passed as a className
-  const lang = codeProps.className?.split("language-")[1] ?? "";
-
-  const html = await renderHighlightedCode(codeString, lang);
+  const html = await renderCode(codeString, lang);
 
   return (
-    <div className={cn("bg-muted/35 relative isolate rounded-lg border-2 font-mono shadow", className)}>
+    <div className="group not-prose relative">
+      <CopyButton
+        value={codeString}
+        className="absolute top-2 right-2 z-10 opacity-0 transition-opacity group-hover:opacity-100"
+      />
       <div
-        className={cn(
-          "grid max-h-[500px] w-full overflow-x-auto overscroll-x-none p-4 **:bg-transparent! data-language:pt-10 md:max-h-[650px] dark:**:text-[var(--shiki-dark)]! [&_pre]:whitespace-normal",
-          "[&_.line]:inline-block [&_.line]:min-w-full [&_.line]:py-1 [&_.line]:leading-none [&_.line]:whitespace-pre [&_.line]:after:hidden",
-          "data-line-numbers:[&_.line]:before:text-muted-foreground data-line-numbers:[counter-reset:line] data-line-numbers:[&_.line]:[counter-increment:line] data-line-numbers:[&_.line]:before:mr-5 data-line-numbers:[&_.line]:before:inline-block data-line-numbers:[&_.line]:before:w-5 data-line-numbers:[&_.line]:before:text-right data-line-numbers:[&_.line]:before:content-[counter(line)]"
-        )}
-        data-language={lang || undefined}
+        data-slot="code-block"
+        data-lang={lang}
         data-line-numbers={showLineNumbers || undefined}
+        className={className}
         dangerouslySetInnerHTML={{ __html: html }}
       />
-      {lang && (
-        <span className="[&_svg]:stroke-primary/90 text-foreground/75 bg-muted/40 absolute top-0 left-0 z-10 flex items-center gap-[8px] rounded-tl-md rounded-br-lg border-r-2 border-b-2 px-[10px] py-[5px] font-mono text-xs font-medium tracking-wide uppercase backdrop-blur-sm select-none [&_svg]:size-[14px] [&_svg]:shrink-0">
-          {["sh", "bash", "zsh", "shell"].includes(lang) ? (
-            <>
-              <TerminalIcon />
-              <span>Shell</span>
-            </>
-          ) : (
-            <>
-              <CodeIcon />
-              <span>{lang}</span>
-            </>
-          )}
-        </span>
-      )}
-      {showCopyButton && (
-        <CopyButton
-          source={codeString}
-          className="text-foreground/75 hover:text-primary bg-muted/40 absolute top-0 right-0 z-10 size-10 rounded-tr-md rounded-bl-lg border-b-2 border-l-2 p-0 backdrop-blur-sm select-none [&_svg]:my-auto [&_svg]:inline-block [&_svg]:size-4.5 [&_svg]:align-text-bottom"
-        />
-      )}
     </div>
   );
 };