lib/mdx.ts

@@ -0,0 +1,71 @@
+import "server-only";
+
+import { compileMDX } from "next-mdx-remote/rsc";
+import rehypePrettyCode, {
+	type Options as PrettyCodeOptions,
+} from "rehype-pretty-code";
+import rehypeSlug from "rehype-slug";
+import rehypeAutolinkHeadings from "rehype-autolink-headings";
+import remarkGfm from "remark-gfm";
+import { mdxComponents } from "@/components/mdx/mdx-components";
+
+/**
+ * MDX 编译管线。
+ *
+ * 插件顺序（rehype 在 remark 之后执行）：
+ * 1. remark-gfm         → 表格、任务列表、删除线
+ * 2. rehype-slug        → 为标题生成 id（TOC 锚点依赖它）
+ * 3. rehype-autolink-headings → 标题旁生成可点击的 # 锚点
+ * 4. rehype-pretty-code → 基于 Shiki 的语法高亮 + 行号/高亮行
+ *
+ * Shiki 在构建期完成高亮，输出静态 HTML，运行时零 JS 开销。
+ */
+
+/** 代码高亮主题：深色 surface-code (#1c1c1e) 上对比度良好 */
+const CODE_THEME = "github-dark-default";
+
+const prettyCodeOptions: PrettyCodeOptions = {
+	theme: CODE_THEME,
+	// 保留默认的 pre/code 结构，样式由 globals.css 的 .prose-blog 控制
+	keepBackground: true,
+	defaultLang: "plaintext",
+};
+
+export interface CompiledMdx {
+	content: React.ReactElement;
+}
+
+/** 编译 MDX 正文为可渲染的 React 元素树 */
+export async function compilePostMdx(source: string): Promise<CompiledMdx> {
+	const { content } = await compileMDX({
+		source,
+		components: mdxComponents,
+		options: {
+			parseFrontmatter: false,
+			mdxOptions: {
+				remarkPlugins: [remarkGfm],
+				rehypePlugins: [
+					rehypeSlug,
+					[
+						rehypeAutolinkHeadings,
+						{
+							behavior: "append",
+							properties: {
+								className: "heading-anchor",
+								ariaLabel: "锚点链接",
+								tabIndex: -1,
+							},
+							content: {
+								type: "text",
+								value: "#",
+							},
+						},
+					],
+					[rehypePrettyCode, prettyCodeOptions],
+				],
+			},
+		},
+	});
+
+	return { content };
+}