feat(blog): add copyable highlighted code blocks

package-lock.json

@@ -55,6 +55,7 @@
         "react-markdown": "^9.0.3",
         "react-qr-code": "^2.0.11",
         "react-resizable-panels": "^2.1.9",
+        "react-syntax-highlighter": "^16.1.1",
         "recharts": "^2.15.4",
         "rehype-raw": "^7.0.0",
         "rehype-sanitize": "^6.0.0",
@@ -72,6 +73,7 @@
         "@types/node": "^22.16.5",
         "@types/react": "^18.3.26",
         "@types/react-dom": "^18.3.7",
+        "@types/react-syntax-highlighter": "^15.5.13",
         "autoprefixer": "^10.4.21",
         "eslint": "^9.32.0",
         "eslint-plugin-react-hooks": "^5.2.0",
@@ -96,9 +98,9 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.28.2",
+      "version": "7.29.7",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.2.tgz",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/@babel/runtime/-/runtime-7.29.7.tgz",
-      "integrity": "sha512-KHp2IflsnGywDjBWDkR9iEqiWSpc8GIi0lgTT3mOElT0PP1tG26P4tmFI2YvAdzgq9RGyoHZQEIEdZy6Ec5xCA==",
+      "integrity": "sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==",
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -2663,6 +2665,12 @@
         "undici-types": "~6.21.0"
       }
     },
+    "node_modules/@types/prismjs": {
+      "version": "1.26.6",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/@types/prismjs/-/prismjs-1.26.6.tgz",
+      "integrity": "sha512-vqlvI7qlMvcCBbVe0AKAb4f97//Hy0EBTaiW8AalRnG/xAN5zOiWWyrNqNXeq8+KAuvRewjCVY1+IPxk4RdNYw==",
+      "license": "MIT"
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.13",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz",
@@ -2694,6 +2702,16 @@
         "@types/react": "^18.0.0"
       }
     },
+    "node_modules/@types/react-syntax-highlighter": {
+      "version": "15.5.13",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/@types/react-syntax-highlighter/-/react-syntax-highlighter-15.5.13.tgz",
+      "integrity": "sha512-uLGJ87j6Sz8UaBAooU0T6lWJ0dBmjZgN1PZTrj05TNql2/XpC6+4HhMT5syIdFUUt+FASfCeLLv4kBygNU+8qA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/unist": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
@@ -4098,6 +4116,19 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/fault": {
+      "version": "1.0.4",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/fault/-/fault-1.0.4.tgz",
+      "integrity": "sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==",
+      "license": "MIT",
+      "dependencies": {
+        "format": "^0.2.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/fflate": {
       "version": "0.8.2",
       "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
@@ -4182,6 +4213,14 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/format": {
+      "version": "0.2.2",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/format/-/format-0.2.2.tgz",
+      "integrity": "sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==",
+      "engines": {
+        "node": ">=0.4.x"
+      }
+    },
     "node_modules/fraction.js": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
@@ -4476,6 +4515,21 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/highlight.js": {
+      "version": "10.7.3",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/highlight.js/-/highlight.js-10.7.3.tgz",
+      "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/highlightjs-vue": {
+      "version": "1.0.0",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/highlightjs-vue/-/highlightjs-vue-1.0.0.tgz",
+      "integrity": "sha512-PDEfEF102G23vHmPhLyPboFCD+BkMGu+GuJe2d9/eH4FsCwvgBpnc9n0pGE+ffKdph38s6foEZiEjdgHdzp+IA==",
+      "license": "CC0-1.0"
+    },
     "node_modules/html-url-attributes": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/html-url-attributes/-/html-url-attributes-3.0.1.tgz",
@@ -4875,6 +4929,20 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/lowlight": {
+      "version": "1.20.0",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/lowlight/-/lowlight-1.20.0.tgz",
+      "integrity": "sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==",
+      "license": "MIT",
+      "dependencies": {
+        "fault": "^1.0.0",
+        "highlight.js": "~10.7.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "10.4.3",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
@@ -6267,6 +6335,15 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prismjs": {
+      "version": "1.30.0",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/prismjs/-/prismjs-1.30.0.tgz",
+      "integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -6530,6 +6607,26 @@
         }
       }
     },
+    "node_modules/react-syntax-highlighter": {
+      "version": "16.1.1",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/react-syntax-highlighter/-/react-syntax-highlighter-16.1.1.tgz",
+      "integrity": "sha512-PjVawBGy80C6YbC5DDZJeUjBmC7skaoEUdvfFQediQHgCL7aKyVHe57SaJGfQsloGDac+gCpTfRdtxzWWKmCXA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "highlight.js": "^10.4.1",
+        "highlightjs-vue": "^1.0.0",
+        "lowlight": "^1.17.0",
+        "prismjs": "^1.30.0",
+        "refractor": "^5.0.0"
+      },
+      "engines": {
+        "node": ">= 16.20.2"
+      },
+      "peerDependencies": {
+        "react": ">= 0.14.0"
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -6599,6 +6696,22 @@
         "decimal.js-light": "^2.4.1"
       }
     },
+    "node_modules/refractor": {
+      "version": "5.0.0",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/refractor/-/refractor-5.0.0.tgz",
+      "integrity": "sha512-QXOrHQF5jOpjjLfiNk5GFnWhRXvxjUVnlFxkeDmewR5sXkr3iM46Zo+CnRR8B+MDVqkULW4EcLVcRBNOPXHosw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/prismjs": "^1.0.0",
+        "hastscript": "^9.0.0",
+        "parse-entities": "^4.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/regenerator-runtime": {
       "version": "0.13.11",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",

package.json

@@ -57,6 +57,7 @@
     "react-markdown": "^9.0.3",
     "react-qr-code": "^2.0.11",
     "react-resizable-panels": "^2.1.9",
+    "react-syntax-highlighter": "^16.1.1",
     "recharts": "^2.15.4",
     "rehype-raw": "^7.0.0",
     "rehype-sanitize": "^6.0.0",
@@ -74,6 +75,7 @@
     "@types/node": "^22.16.5",
     "@types/react": "^18.3.26",
     "@types/react-dom": "^18.3.7",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "autoprefixer": "^10.4.21",
     "eslint": "^9.32.0",
     "eslint-plugin-react-hooks": "^5.2.0",

src/components/Markdown.tsx

@@ -1,101 +1,164 @@
-import React from 'react';
+"use client";
-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';
 
-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 = '',
+  className = "",
-  dir = 'rtl',
+  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'
+    size === "sm"
-      ? { h1: 'text-xl', h2: 'text-lg', h3: 'text-base', h4: 'text-base' }
+      ? { h1: "text-xl", h2: "text-lg", h3: "text-base", h4: "text-base" }
-      : size === 'base'
+      : size === "base"
-      ? { h1: 'text-3xl', h2: 'text-2xl', h3: 'text-xl', h4: 'text-lg' }
+      ? { h1: "text-3xl", h2: "text-2xl", h3: "text-xl", h4: "text-lg" }
-      : { h1: 'text-4xl', h2: 'text-3xl', h3: 'text-2xl', h4: 'text-xl' };
+      : { 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} />,
+          h1: (p) => <h1 id={nextHeadingId(1)} className={cn("scroll-mt-28 pt-2 font-bold", hScale.h1)} {...p} />,
-          h2: (p) => <h2 className={`mt-6 font-bold ${hScale.h2}`} {...p} />,
+          h2: (p) => <h2 id={nextHeadingId(2)} className={cn("scroll-mt-28 pt-2 font-bold", hScale.h2)} {...p} />,
-          h3: (p) => <h3 className={`mt-5 font-semibold ${hScale.h3}`} {...p} />,
+          h3: (p) => <h3 id={nextHeadingId(3)} className={cn("scroll-mt-28 pt-2 font-semibold", hScale.h3)} {...p} />,
-          h4: (p) => <h4 className={`mt-4 font-semibold ${hScale.h4}`} {...p} />,
+          h4: (p) => <h4 className={cn("mt-4 font-semibold", hScale.h4)} {...p} />,
-          p:  (p) => <p className="my-3" {...p} />,
+          p: (p) => <p className="my-4" {...p} />,
-          a:  (p) => <a className="underline decoration-primary hover:opacity-90 break-all" target="_blank" rel="noopener noreferrer" {...p} />,
+          a: (p) => <a className="break-all underline decoration-primary hover:opacity-90" target="_blank" rel="noopener noreferrer" {...p} />,
-          ul: (p) => <ul className="my-3 list-disc ps-6 space-y-1.5" {...p} />,
+          ul: (p) => <ul className="my-4 list-disc space-y-1.5 pe-0 ps-6" {...p} />,
-          ol: (p) => <ol className="my-3 list-decimal ps-6 space-y-1.5" {...p} />,
+          ol: (p) => <ol className="my-4 list-decimal space-y-1.5 pe-0 ps-6" {...p} />,
-          li: (p) => <li className="[&>ul]:my-1.5 [&>ol]:my-1.5" {...p} />,
+          li: (p) => <li className="[&>ol]:my-1.5 [&>ul]:my-1.5" {...p} />,
-          hr: (p) => <hr className="my-5 border-muted" {...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' &&
+              node?.tagName === "code" &&
-              !/language-/.test(className || '') &&
+              !/language-/.test(className || "") &&
-              !String(children).includes('\n');
+              !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 (
+            return <CodeBlock className={className}>{children}</CodeBlock>;
-              <code className={className} {...p}>
-                {children}
-              </code>
-            );
           },
-          pre: ({ className = '', children, ...p }) => (
+          pre: ({ children }) => <>{children}</>,
-            <pre
-              className={[
-                "my-4 overflow-x-auto rounded-md bg-muted p-4 text-[0.9em]",
-                className,
-              ].filter(Boolean).join(" ")}
-              {...p}
-            >
-              {children}
-            </pre>
-          ),
           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[];
+}