feat(blog): add copyable highlighted code blocks

src/components/Markdown.tsx

@@ -1,101 +1,164 @@
-import React from 'react';
-import ReactMarkdown from 'react-markdown';
-import type { PluggableList } from 'unified';
-import remarkGfm from 'remark-gfm';
-import rehypeRaw from 'rehype-raw';
-import rehypeSanitize from 'rehype-sanitize';
+"use client";
 
-type MarkdownSize = 'sm' | 'base' | 'lg';
+import React, { useState } from "react";
+import { Check, Copy } from "lucide-react";
+import ReactMarkdown from "react-markdown";
+import type { PluggableList } from "unified";
+import remarkGfm from "remark-gfm";
+import rehypeRaw from "rehype-raw";
+import rehypeSanitize from "rehype-sanitize";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
+import { extractMarkdownHeadings } from "@/lib/markdown-headings";
+import { cn } from "@/lib/utils";
+
+type MarkdownSize = "sm" | "base" | "lg";
 
 type MarkdownProps = {
   content?: string;
   allowHtml?: boolean;
   className?: string;
-  dir?: 'rtl' | 'ltr';
+  dir?: "rtl" | "ltr";
   justify?: boolean;
   size?: MarkdownSize;
 };
 
+function CodeBlock({
+  className,
+  children,
+}: {
+  className?: string;
+  children: React.ReactNode;
+}) {
+  const [copied, setCopied] = useState(false);
+  const language = /language-([\w-]+)/.exec(className || "")?.[1] || "text";
+  const code = String(children).replace(/\n$/, "");
+
+  const copyCode = async () => {
+    if (!navigator.clipboard) return;
+    await navigator.clipboard.writeText(code);
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 1600);
+  };
+
+  return (
+    <div
+      dir="ltr"
+      className="my-5 overflow-hidden rounded-2xl border border-slate-700/70 bg-[#0f172a] text-left shadow-xl shadow-slate-950/10"
+    >
+      <div className="flex items-center justify-between border-b border-white/10 bg-white/5 px-4 py-2 text-xs text-slate-300">
+        <span className="font-mono uppercase tracking-wide">{language}</span>
+        <button
+          type="button"
+          onClick={copyCode}
+          className="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-slate-300 transition hover:bg-white/10 hover:text-white"
+        >
+          {copied ? <Check className="h-3.5 w-3.5" /> : <Copy className="h-3.5 w-3.5" />}
+          {copied ? "Copied" : "Copy"}
+        </button>
+      </div>
+      <SyntaxHighlighter
+        language={language}
+        style={oneDark}
+        PreTag="div"
+        customStyle={{
+          margin: 0,
+          background: "transparent",
+          direction: "ltr",
+          padding: "1rem",
+        }}
+        codeTagProps={{
+          dir: "ltr",
+          style: {
+            direction: "ltr",
+            textAlign: "left",
+            fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+          },
+        }}
+      >
+        {code}
+      </SyntaxHighlighter>
+    </div>
+  );
+}
+
 export default function Markdown({
-  content = '',
+  content = "",
   allowHtml = false,
-  className = '',
-  dir = 'rtl',
+  className = "",
+  dir = "rtl",
   justify = false,
-  size = 'sm',
+  size = "sm",
 }: MarkdownProps) {
   const rehypePlugins: PluggableList | undefined = allowHtml ? [rehypeRaw, rehypeSanitize] : undefined;
+  const headings = extractMarkdownHeadings(content);
+  let headingIndex = 0;
 
   const baseSizeClass =
-    size === 'sm' ? 'text-sm' : size === 'lg' ? 'text-lg' : 'text-base';
+    size === "sm" ? "text-sm" : size === "lg" ? "text-lg" : "text-base";
 
   const hScale =
-    size === 'sm'
-      ? { h1: 'text-xl', h2: 'text-lg', h3: 'text-base', h4: 'text-base' }
-      : size === 'base'
-      ? { h1: 'text-3xl', h2: 'text-2xl', h3: 'text-xl', h4: 'text-lg' }
-      : { h1: 'text-4xl', h2: 'text-3xl', h3: 'text-2xl', h4: 'text-xl' };
+    size === "sm"
+      ? { h1: "text-xl", h2: "text-lg", h3: "text-base", h4: "text-base" }
+      : size === "base"
+      ? { h1: "text-3xl", h2: "text-2xl", h3: "text-xl", h4: "text-lg" }
+      : { h1: "text-4xl", h2: "text-3xl", h3: "text-2xl", h4: "text-xl" };
 
   const justifyStyle: React.CSSProperties | undefined = justify
-    ? { textAlign: 'justify', textJustify: 'inter-word' }
+    ? { textAlign: "justify", textJustify: "inter-word" }
     : undefined;
 
+  const nextHeadingId = (level: 1 | 2 | 3) => {
+    while (headingIndex < headings.length) {
+      const heading = headings[headingIndex];
+      headingIndex += 1;
+      if (heading.level === level) return heading.id;
+    }
+    return undefined;
+  };
+
   return (
     <div
       dir={dir}
-      className={`markdown-body ${baseSizeClass} text-right leading-7 break-words ${className}`}
+      className={cn("markdown-body break-words text-right leading-8", baseSizeClass, className)}
       style={justifyStyle}
     >
       <ReactMarkdown
         remarkPlugins={[remarkGfm]}
         rehypePlugins={rehypePlugins}
         components={{
-          h1: (p) => <h1 className={`mt-6 font-bold ${hScale.h1}`} {...p} />,
-          h2: (p) => <h2 className={`mt-6 font-bold ${hScale.h2}`} {...p} />,
-          h3: (p) => <h3 className={`mt-5 font-semibold ${hScale.h3}`} {...p} />,
-          h4: (p) => <h4 className={`mt-4 font-semibold ${hScale.h4}`} {...p} />,
-          p:  (p) => <p className="my-3" {...p} />,
-          a:  (p) => <a className="underline decoration-primary hover:opacity-90 break-all" target="_blank" rel="noopener noreferrer" {...p} />,
-          ul: (p) => <ul className="my-3 list-disc ps-6 space-y-1.5" {...p} />,
-          ol: (p) => <ol className="my-3 list-decimal ps-6 space-y-1.5" {...p} />,
-          li: (p) => <li className="[&>ul]:my-1.5 [&>ol]:my-1.5" {...p} />,
-          hr: (p) => <hr className="my-5 border-muted" {...p} />,
+          h1: (p) => <h1 id={nextHeadingId(1)} className={cn("scroll-mt-28 pt-2 font-bold", hScale.h1)} {...p} />,
+          h2: (p) => <h2 id={nextHeadingId(2)} className={cn("scroll-mt-28 pt-2 font-bold", hScale.h2)} {...p} />,
+          h3: (p) => <h3 id={nextHeadingId(3)} className={cn("scroll-mt-28 pt-2 font-semibold", hScale.h3)} {...p} />,
+          h4: (p) => <h4 className={cn("mt-4 font-semibold", hScale.h4)} {...p} />,
+          p: (p) => <p className="my-4" {...p} />,
+          a: (p) => <a className="break-all underline decoration-primary hover:opacity-90" target="_blank" rel="noopener noreferrer" {...p} />,
+          ul: (p) => <ul className="my-4 list-disc space-y-1.5 pe-0 ps-6" {...p} />,
+          ol: (p) => <ol className="my-4 list-decimal space-y-1.5 pe-0 ps-6" {...p} />,
+          li: (p) => <li className="[&>ol]:my-1.5 [&>ul]:my-1.5" {...p} />,
+          hr: (p) => <hr className="my-6 border-muted" {...p} />,
           blockquote: (p) => (
-            <blockquote className="my-3 border-r-4 pr-4 italic text-muted-foreground" {...p} />
+            <blockquote className="my-4 rounded-2xl border-r-4 border-primary bg-muted/40 py-3 pr-4 italic text-muted-foreground" {...p} />
           ),
           code: ({ className, children, node, ...p }) => {
             const isInline =
-              node?.tagName === 'code' &&
-              !/language-/.test(className || '') &&
-              !String(children).includes('\n');
+              node?.tagName === "code" &&
+              !/language-/.test(className || "") &&
+              !String(children).includes("\n");
 
             if (isInline) {
               return (
-                <code className="rounded bg-muted px-1 py-0.5 text-[0.9em]" {...p}>
+                <code dir="ltr" className="rounded bg-muted px-1.5 py-0.5 text-[0.9em]" {...p}>
                   {children}
                 </code>
               );
             }
 
-            return (
-              <code className={className} {...p}>
-                {children}
-              </code>
-            );
+            return <CodeBlock className={className}>{children}</CodeBlock>;
           },
-          pre: ({ className = '', children, ...p }) => (
-            <pre
-              className={[
-                "my-4 overflow-x-auto rounded-md bg-muted p-4 text-[0.9em]",
-                className,
-              ].filter(Boolean).join(" ")}
-              {...p}
-            >
-              {children}
-            </pre>
-          ),
+          pre: ({ children }) => <>{children}</>,
           table: (p) => (
-            <div className="my-3 overflow-x-auto">
+            <div className="my-4 overflow-x-auto">
               <table className="w-full border-collapse" {...p} />
             </div>
           ),

src/lib/markdown-headings.ts

@@ -0,0 +1,52 @@
+export type MarkdownHeading = {
+  id: string;
+  level: 1 | 2 | 3;
+  text: string;
+};
+
+function plainHeadingText(value: string) {
+  return value
+    .replace(/`([^`]+)`/g, "$1")
+    .replace(/\*\*([^*]+)\*\*/g, "$1")
+    .replace(/\*([^*]+)\*/g, "$1")
+    .replace(/\[([^\]]+)\]\([^)]+\)/g, "$1")
+    .replace(/<[^>]*>/g, " ")
+    .replace(/\s+/g, " ")
+    .trim();
+}
+
+function headingIdBase(text: string) {
+  const normalized = text
+    .normalize("NFKC")
+    .toLowerCase()
+    .replace(/[^\p{L}\p{N}\s_-]/gu, "")
+    .trim()
+    .replace(/\s+/g, "-")
+    .slice(0, 80);
+
+  return normalized || "section";
+}
+
+export function extractMarkdownHeadings(content?: string): MarkdownHeading[] {
+  const counters = new Map<string, number>();
+
+  return (content || "")
+    .split(/\r?\n/)
+    .map((line) => {
+      const match = /^(#{1,3})\s+(.+?)\s*#*$/.exec(line.trim());
+      if (!match) return null;
+
+      const level = match[1].length as 1 | 2 | 3;
+      const text = plainHeadingText(match[2]);
+      const base = headingIdBase(text);
+      const nextCount = (counters.get(base) || 0) + 1;
+      counters.set(base, nextCount);
+
+      return {
+        id: nextCount === 1 ? base : `${base}-${nextCount}`,
+        level,
+        text,
+      };
+    })
+    .filter(Boolean) as MarkdownHeading[];
+}