Markdown Content

1import { marked } from "marked";
2import type * as React from "react";
3import { isValidElement, memo, Suspense, useMemo } from "react";
4import ReactMarkdown, { type Components } from "react-markdown";
5import rehypeRaw from "rehype-raw";
6import remarkGfm from "remark-gfm";
7import { cn } from "@/lib/utils";
8 
9const DEFAULT_PRE_BLOCK_CLASS =
10	"my-4 overflow-x-auto w-fit rounded-xl bg-zinc-950 text-zinc-50 dark:bg-zinc-900 border border-border p-4";
11 
12const extractTextContent = (node: React.ReactNode): string => {
13	if (typeof node === "string") {
14		return node;
15	}
16	if (Array.isArray(node)) {
17		return node.map(extractTextContent).join("");
18	}
19	if (isValidElement(node)) {
20		// @ts-expect-error
21		return extractTextContent(node.props.children);
22	}
23	return "";
24};
25 
26interface HighlightedPreProps extends React.HTMLAttributes<HTMLPreElement> {
27	language: string;
28}
29 
30const HighlightedPre = memo(
31	async ({
32		children,
33		className,
34		language,
35		...props
36	}: HighlightedPreProps) => {
37		const { codeToTokens, bundledLanguages } = await import("shiki");
38		const code = extractTextContent(children);
39 
40		if (!(language in bundledLanguages)) {
41			return (
42				<pre
43					{...props}
44					className={cn(DEFAULT_PRE_BLOCK_CLASS, className)}
45				>
46					<code className="whitespace-pre-wrap">{children}</code>
47				</pre>
48			);
49		}
50 
51		const { tokens } = await codeToTokens(code, {
52			lang: language as keyof typeof bundledLanguages,
53			themes: {
54				light: "github-dark",
55				dark: "github-dark",
56			},
57		});
58 
59		return (
60			<pre {...props} className={cn(DEFAULT_PRE_BLOCK_CLASS, className)}>
61				<code className="whitespace-pre-wrap break-all">
62					{tokens.map((line, lineIndex) => (
63						<span
64							key={`line-${
65								// biome-ignore lint/suspicious/noArrayIndexKey: Needed for react key
66								lineIndex
67							}`}
68						>
69							{line.map((token, tokenIndex) => {
70								const style =
71									typeof token.htmlStyle === "string"
72										? undefined
73										: token.htmlStyle;
74 
75								return (
76									<span
77										key={`token-${
78											// biome-ignore lint/suspicious/noArrayIndexKey: Needed for react key
79											tokenIndex
80										}`}
81										style={style}
82									>
83										{token.content}
84									</span>
85								);
86							})}
87							{lineIndex !== tokens.length - 1 && "\n"}
88						</span>
89					))}
90				</code>
91			</pre>
92		);
93	},
94);
95 
96HighlightedPre.displayName = "HighlightedPre";
97 
98interface CodeBlockProps extends React.HTMLAttributes<HTMLPreElement> {
99	language: string;
100}
101 
102// … truncated