feat(blog): add copyable highlighted code blocks
This commit is contained in:
@@ -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>
|
||||
),
|
||||
|
||||
Reference in New Issue
Block a user