"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", blockquote: "blockquote", code: "code", figure: "figure", h1: "h1", h2: "h2", h3: "h3", p: "p", pre: "pre", span: "span", strong: "strong", table: "table", tbody: "tbody", td: "td", th: "th", thead: "thead", tr: "tr", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://daringfireball.net/projects/markdown/syntax", children: "Markdown" }), " 是一种用于格式化文本的轻量级标记语言。它允许你使用纯文本语法编写，并将其转换为结构有效的 HTML。它常用于编写网站和博客的内容，在Next.js中一般通过", _jsx(_components.code, { children: "MDX" }), "和", _jsx(_components.code, { children: "React-markdown" }), "来实现markdown的渲染"] }), "\n", _jsx(_components.h1, { id: "一mdx渲染", children: "一、MDX渲染" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://mdxjs.com/", children: "MDX" }), " 是 markdown 的超集，它允许你直接在 markdown 文件中编写 ", _jsx(_components.a, { href: "https://react.dev/learn/writing-markup-with-jsx", children: "JSX" }), "。这是一种强大的方式，可以添加动态交互性并在你的内容中嵌入 React 组件。"] }), "\n", _jsx(_components.p, { children: "Next.js 可以支持应用程序内的本地 MDX 内容，以及在服务器上动态获取的远程 MDX 文件。Next.js 插件负责将 markdown 和 React 组件转换为 HTML，包括支持在服务器组件中使用 (在 App Router 中默认使用)。" }), "\n", _jsx(_components.p, { children: _jsx(_components.a, { href: "https://wanyue.me/mdx", children: "渲染效果" }) }), "\n", _jsx(_components.h2, { id: "11本地markdown渲染", children: "1.1.本地markdown渲染" }), "\n", _jsx(_components.h3, { id: "111安装依赖", children: "1.1.1.安装依赖" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "bash", "data-theme": "material-theme-lighter", children: _jsx(_components.code, { "data-language": "bash", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E2931D" }, children: "npm" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " install" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " @next/mdx" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " @mdx-js/loader" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " @mdx-js/react" })] }) }) }) }), "\n", _jsxs(_components.h3, { id: "112配置nextconfigmjs", children: ["1.1.2.配置", _jsx(_components.code, { children: "next.config.mjs" })] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "js", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "js", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "/** " }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "@" }), _jsx(_components.span, { style: { color: "#9C3EDA", fontStyle: "italic" }, children: "type" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " {" }), _jsx(_components.span, { style: { color: "#E2931D", fontStyle: "italic" }, children: "import('next').NextConfig" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "}" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: " */" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: "const" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " nextConfig " }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: " // Configure `pageExtensions`` to include MDX files" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " pageExtensions" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " [" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "js" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "jsx" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "mdx" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "ts" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "tsx" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "]" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: "const" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " withMDX " }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " createMDX" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "{" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " extension" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " /" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "\\." }), _jsx(_components.span, { style: { color: "#91B859" }, children: "mdx" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "?" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "$" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "/" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: " // Add markdown plugins here, as desired" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " options" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " remarkPlugins" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " [remarkFrontmatter]" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " rehypePlugins" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " []" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: ")" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "export" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " default" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " withMDX" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "(nextConfig)" })] })] }) }) }), "\n", _jsx(_components.p, { children: "插件在后面介绍" }), "\n", _jsxs(_components.h3, { id: "113添加mdx-componentstsx", children: ["1.1.3.添加", _jsx(_components.code, { children: "mdx-components.tsx" })] }), "\n", _jsxs(_components.p, { children: ["根目录添加 ", _jsx(_components.code, { children: "mdx-components.tsx" }), "文件，全局 MDX 组件,这里可以对markdown中的一些标签进行", _jsx(_components.strong, { children: "样式定义" }), "，如", _jsx(_components.code, { children: "h1" }), "、", _jsx(_components.code, { children: "h2" }), "等"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "tsx", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "export" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " function" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " useMDXComponents" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "(" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "components" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " MDXComponents" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "):" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " MDXComponents" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " return" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#6182B8" }, children: " h1" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " (" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "props" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ")" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " =>" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " return" }), _jsx(_components.span, { style: { color: "#E53935" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "h1" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "div" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " id" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "={" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "props" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "id" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "} " }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: "className" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "invisible relative -top-24" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "a" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " href" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "={" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "#" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " +" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " props" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "id" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "} " }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: "id" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "={" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "#" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " +" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " props" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "id" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}>" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "props" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "children" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E53935" }, children: " )" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E53935" }, children: " ……" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#6182B8" }, children: " code" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " (" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "info" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ")" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " =>" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: " const" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " children" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " =" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " info" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: " const" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " id" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " =" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " Math" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "random" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "()" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "toString" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#F76D47" }, children: "36" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ")" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "substr" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#F76D47" }, children: "2" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," }), _jsx(_components.span, { style: { color: "#F76D47" }, children: " 9" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ")" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " if" }), _jsx(_components.span, { style: { color: "#E53935" }, children: " (" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "info" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "[" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "data-language" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "]) " }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "{" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " return" }), _jsx(_components.span, { style: { color: "#E53935" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "div" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " className" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "not-prose rounded-md border" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "div" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " className" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "flex h-12 items-center justify-between bg-zinc-100 px-4 dark:bg-zinc-900" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "div" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " className" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "flex items-center gap-2" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "span" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " className" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "text-sm text-zinc-600 dark:text-zinc-400" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "/* @ts-ignore */" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "info[" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "data-language" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "]" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "CopyButton1" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " id" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "={" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "id" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "} />" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "div" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " className" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "overflow-x-auto" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "div" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " id" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "={" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "id" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "} " }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: "className" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "p-4" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "children" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E53935" }, children: " )" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " else" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " return" }), _jsx(_components.span, { style: { color: "#E53935" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "code" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " {..." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "info" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: " className" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "not-prose rounded bg-gray-100 px-1 dark:bg-zinc-900" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " >" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "children" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E53935" }, children: " )" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }," }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " ..." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "components" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" }) })] }) }) }), "\n", _jsxs(_components.p, { children: ["PS:其中props.id需要配合", _jsx(_components.code, { children: "rehypeSlug" }), "使用"] }), "\n", _jsx(_components.h3, { id: "114创建mdx布局和页面", children: "1.1.4.创建mdx布局和页面" }), "\n", _jsx(_components.p, { children: "目录如下：" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { children: " my-project\n ├── app\n │ └── mdx-page\n │ └── layout.tsx\n │ └── page.(mdx/md)\n |── mdx-components.(tsx/js)\n └── package.json\n" }) }), "\n", _jsx(_components.p, { children: "layout.tsx" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "tsx", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "export" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " default" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " function" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " MdxLayout" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "({" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: " children" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }:" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" }), _jsx(_components.span, { style: { color: "#E53935" }, children: " children" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " React" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "ReactNode" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " })" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " return" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "div" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " className" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "markdown m-auto max-w-5xl" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">{" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "children" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" }) })] }) }) }), "\n", _jsx(_components.p, { children: "page.mdx" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "markdown", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "markdown", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "## " }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "Vue3 编译宏" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "### " }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "defineProps" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "-" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " 父子组件传参" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#91B859" }, children: "```" }), _jsx(_components.span, { style: { color: "#90A4AE90" }, children: "vue filename=\"index.js\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE90" }, children: "" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE90" }, children: "" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE90" }, children: "" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#91B859" }, children: "```" }) })] }) }) }), "\n", _jsxs(_components.p, { children: ["mdx可以直接在 markdown 文件中编写 ", _jsx(_components.a, { href: "https://react.dev/learn/writing-markup-with-jsx", children: "JSX" }), "，所以我们可以在页面直接加入我们自己的组件，比如显示一些基本信息，这里以Frontmatter 组件为例子："] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "tsx", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: "type" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " FrontmatterProps" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " =" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " date" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " string" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " author" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " string" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: " // 其它元数据，如分类、标签、来源、阅读时长等" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "export" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " default" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " function" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " Frontmatter" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "({" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: " date" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: " author" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }:" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " FrontmatterProps" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ")" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " return" }), _jsx(_components.span, { style: { color: "#E53935" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "div" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " className" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "my-4 rounded-r border-l-4 border-gray-200 bg-gray-50 px-4 py-3" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "date" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}{" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "author" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E53935" }, children: " )" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" }) })] }) }) }), "\n", _jsx(_components.p, { children: "在page.mdx中可以直接加入" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "markdown", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "markdown", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE" }, children: "import Frontmatter from \"@/components/Frontmatter\"" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "Frontmatter" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " date" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "2024-02-22" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " />" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE" }, children: "...md内容" }) })] }) }) }), "\n", _jsxs(_components.p, { children: ["目前可完成基本渲染，可以配置一些markdown渲染插件优化整体渲染效果在下文", _jsx(_components.a, { href: "https://wanyue.me/posts/Web%E5%89%8D%E7%AB%AF/12#13mdx%E6%B8%B2%E6%9F%93%E6%8F%92%E4%BB%B6%E9%85%8D%E7%BD%AE", children: _jsx(_components.strong, { children: "1.3" }) }), "统一介绍"] }), "\n", _jsx(_components.h2, { id: "12markdown-remote渲染", children: "1.2.Markdown-remote渲染" }), "\n", _jsxs(_components.p, { children: ["除了本地的md文件，通过外部获取的md可以使用", _jsx(_components.code, { children: "next-mdx-remote" }), "来渲染"] }), "\n", _jsx(_components.p, { children: _jsx(_components.a, { href: "https://wanyue.me/mdx-remote", children: "渲染效果" }) }), "\n", _jsx(_components.h3, { id: "121安装依赖", children: "1.2.1.安装依赖" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "bash", "data-theme": "material-theme-lighter", children: _jsx(_components.code, { "data-language": "bash", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E2931D" }, children: "pnpm" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " install" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " next-mdx-remote" })] }) }) }) }), "\n", _jsx(_components.h3, { id: "122使用", children: "1.2.2.使用" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "tsx", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "import" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " CopyButton1" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " from" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "@/components/CopyButton" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "import" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " getPostById" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " from" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "@/lib/post" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "import" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " MDXRemote" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " from" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "next-mdx-remote/rsc" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "export" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " default" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " async" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " function" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " RemoteMdxPage" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "()" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: " const" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " post" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " =" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " await" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " getPostById" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#F76D47" }, children: "3" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ")" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " if" }), _jsx(_components.span, { style: { color: "#E53935" }, children: " (" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "!" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "post" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ") " }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "return" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "div" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ">" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "Post not found" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: " const" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " markdown" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " =" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " post" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "content" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: " const" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " mdxOptions" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " =" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " remarkPlugins" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "[]" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#90A4AE" }, children: " rehypePlugins" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ":[]" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: " const" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " components" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " =" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " return" }), _jsx(_components.span, { style: { color: "#E53935" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "MDXRemote" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: " source" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "={" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "markdown" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: " options" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "={" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "mdxOptions" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: " components" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "={" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "components" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " />" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E53935" }, children: " )" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " })] }) }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "MDXRemote" }), "可直接导入使用，source为外部md的字符串格式，这里由于接口直接"] }), "\n", _jsxs(_components.p, { children: ["其中componets同", _jsx(_components.a, { href: "https://wanyue.me/posts/Web%E5%89%8D%E7%AB%AF/12#13mdx%E6%B8%B2%E6%9F%93%E6%8F%92%E4%BB%B6%E9%85%8D%E7%BD%AE", children: "1.3" }), "中的一致，可设置标签渲染样式等"] }), "\n", _jsxs(_components.p, { children: ["mdxOptions包含两类配置", _jsx(_components.code, { children: "remarkPlugins" }), " 、", _jsx(_components.code, { children: "rehypePlugins" }), "，在", _jsx(_components.a, { href: "https://wanyue.me/posts/Web%E5%89%8D%E7%AB%AF/12#13mdx%E6%B8%B2%E6%9F%93%E6%8F%92%E4%BB%B6%E9%85%8D%E7%BD%AE", children: "1.3" }), "中统一介绍"] }), "\n", _jsx(_components.h2, { id: "13mdx渲染插件配置", children: "1.3.MDX渲染插件配置" }), "\n", _jsxs(_components.p, { children: ["完成md的基础页面渲染后，需要两类插件", _jsx(_components.code, { children: "remarkPlugins" }), " 、", _jsx(_components.code, { children: "rehypePlugins" }), "来辅助实现", _jsx(_components.code, { children: "代码高亮" }), "、", _jsx(_components.code, { children: "表格优化" }), "等"] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "插件列表：" }) }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "插件名称" }), _jsx(_components.th, { children: "插件类别" }), _jsx(_components.th, { children: "插件功能" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.strong, { children: "remark-gfm" }) }), _jsx(_components.td, { children: _jsx(_components.code, { children: "remarkPlugins" }) }), _jsx(_components.td, { children: "支持 GitHub Flavored Markdown 语法，如表格、任务列表、删除线等扩展功能" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.strong, { children: "rehype-slug" }) }), _jsx(_components.td, { children: _jsx(_components.code, { children: "rehypePlugins" }) }), _jsx(_components.td, { children: "为 Markdown 中的标题（h1-h6）自动生成 id 属性，便于创建锚点链接和目录" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.strong, { children: "rehype-pretty-code" }) }), _jsx(_components.td, { children: _jsx(_components.code, { children: "rehypePlugins" }) }), _jsx(_components.td, { children: "提供代码块美化功能，支持行号、高亮特定行、主题定制等" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.strong, { children: "@jsdevtools/rehype-toc" }) }), _jsx(_components.td, { children: _jsx(_components.code, { children: "rehypePlugins" }) }), _jsx(_components.td, { children: "自动生成markdown目录" })] })] })] }), "\n", _jsxs(_components.p, { children: ["这里主要介绍下**", _jsx(_components.code, { children: "rehype-pretty-code" }), _jsx(_components.strong, { children: "以及" }), _jsx(_components.code, { children: "@jsdevtools/rehype-toc" }), "**，根据需求自定义配置"] }), "\n", _jsx(_components.h3, { id: "131代码高亮-rehype-pretty-code", children: "1.3.1.代码高亮-rehype-pretty-code" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://github.com/rehype-pretty/rehype-pretty-code", children: _jsx(_components.code, { children: "rehype-pretty-code" }) }), "是一款由", _jsx(_components.a, { href: "https://github.com/shikijs/shiki", children: _jsx(_components.code, { children: "shiki" }) }), "语法高亮器驱动的 Rehype 插件，可为 Markdown 或 MDX 提供漂亮的代码块。它既可以在构建时在服务器上工作（避免运行时语法高亮），也可以在客户端上进行动态高亮。"] }), "\n", _jsx(_components.p, { children: "安装" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "bash", "data-theme": "material-theme-lighter", children: _jsx(_components.code, { "data-language": "bash", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E2931D" }, children: "npm" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " install" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " rehype-pretty-code" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " shiki" })] }) }) }) }), "\n", _jsxs(_components.p, { children: ["放在", _jsx(_components.code, { children: "rehypePlugins" }), "配置中"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "ts", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "ts", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E2931D" }, children: " rehypePlugins" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " [" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " ()" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " =>" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " (" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "tree" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ")" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " =>" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#6182B8" }, children: " visit" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "tree" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " (" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "node" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ")" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " =>" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " if" }), _jsx(_components.span, { style: { color: "#E53935" }, children: " (" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "node" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "?." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "type" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " ===" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "element" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " &&" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " node" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "?." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "tagName" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " ===" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "pre" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ") " }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "{" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: " const" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " [" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "codeEl" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "]" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " =" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " node" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "children" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " if" }), _jsx(_components.span, { style: { color: "#E53935" }, children: " (" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "codeEl" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "tagName" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " !==" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "code" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ") " }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "return" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#90A4AE" }, children: " node" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "raw" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " =" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " codeEl" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "children" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "?." }), _jsx(_components.span, { style: { color: "#E53935" }, children: "[" }), _jsx(_components.span, { style: { color: "#F76D47" }, children: "0" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "]" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "value" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE" }, children: " [" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#90A4AE" }, children: " rehypePrettyCode" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " theme" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "material-theme-lighter" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#90A4AE" }, children: " ]" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " ()" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " =>" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " (" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "tree" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ")" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " =>" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#6182B8" }, children: " visit" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "tree" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " (" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "node" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ")" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " =>" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " if" }), _jsx(_components.span, { style: { color: "#E53935" }, children: " (" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "node" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "?." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "type" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " ===" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "element" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ") " }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "{" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " if" }), _jsx(_components.span, { style: { color: "#E53935" }, children: " (" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "!" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "data-rehype-pretty-code-fragment" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " in" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " node" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "properties" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ")) " }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "{" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " return" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " for" }), _jsx(_components.span, { style: { color: "#E53935" }, children: " (" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: "const" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " child" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " of" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " node" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "children" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ") " }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "{" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " if" }), _jsx(_components.span, { style: { color: "#E53935" }, children: " (" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "child" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "tagName" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " ===" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "pre" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ") " }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "{" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#90A4AE" }, children: " child" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "properties" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "[" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "raw" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "] " }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "=" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " node" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "raw" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ")" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE" }, children: " ]" }) })] }) }) }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "对插件配置的解释：" }) }), "\n", _jsxs(_components.blockquote, { children: ["\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "代码高亮处理流程是：" }) }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "第一段代码提取并保存原始代码" }) }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "第二段rehype-pretty-code 处理代码高亮" }) }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "第三段代码将原始代码保存到高亮后的结构中" }) }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "这样做是因为代码高亮处理会改变 DOM 结构，所以需要在处理前保存原始代码，然后在处理后重新附加到新的结构上。" }) }), "\n"] }), "\n", _jsx(_components.h3, { id: "132目录生成-jsdevtoolsrehype-toc", children: "1.3.2.目录生成-@jsdevtools/rehype-toc" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "@jsdevtools/rehype-toc" }), "可以根据markdown标签直接生成目录"] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "安装：" }) }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "bash", "data-theme": "material-theme-lighter", children: _jsx(_components.code, { "data-language": "bash", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E2931D" }, children: "pnpm" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " install" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " @jsdevtools/rehype-toc" })] }) }) }) }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "用法：" }) }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "tsx", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E2931D" }, children: "rehypePlugins" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " [" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " ..." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "config" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE" }, children: " [" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: " //@ts-ignore" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#90A4AE" }, children: " toc" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E53935" }, children: " headings" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " [" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "h1" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "h2" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "h3" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "h4" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "h5" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "]" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#6182B8" }, children: " customizeTOC" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " (" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "tocAll" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " any" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ")" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " =>" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#90A4AE" }, children: " data" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " =" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " tocAll" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " return" }), _jsx(_components.span, { style: { color: "#FF5370" }, children: " false" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE" }, children: " ]" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#90A4AE" }, children: "]" }) })] }) }) }), "\n", _jsxs(_components.p, { children: ["根据heading会生成一个目录树通过customizeTOC,通过目录树自行创建目录组件", _jsx(_components.code, { children: "markdown-nav.tsx" })] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "tsx", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "use client" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "import" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " clsx " }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "from" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "clsx" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "import" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " useEffect" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " useState" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " from" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "react" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "export" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " default" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " function" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " MarkdownNav" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "(" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "props" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " any" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ")" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " switch" }), _jsx(_components.span, { style: { color: "#E53935" }, children: " (" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "props" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "tagName" }), _jsx(_components.span, { style: { color: "#E53935" }, children: ") " }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "{" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " case" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "nav" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " return" }), _jsx(_components.span, { style: { color: "#E53935" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "nav" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {..." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "props" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "properties" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}>" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "props" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "children" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "map" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "(" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "item" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " any" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: " index" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " number" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ")" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " =>" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " return" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "MarkdownNav" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {..." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "item" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "} " }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: "key" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "={" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "index" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "} />" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: ")" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E53935" }, children: " )" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " case" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "ol" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " return" }), _jsx(_components.span, { style: { color: "#E53935" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "ol" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {..." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "props" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "properties" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}>" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "props" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "children" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "map" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "(" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "item" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " any" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: " index" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " number" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ")" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " =>" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " return" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "MarkdownNav" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {..." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "item" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "} " }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: "key" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "={" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "index" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "} />" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: ")" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E53935" }, children: " )" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " case" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "li" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " return" }), _jsx(_components.span, { style: { color: "#E53935" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "li" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {..." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "props" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "properties" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}>" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "props" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "children" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "map" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "(" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "item" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " any" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: " index" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " number" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ")" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " =>" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " return" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "MarkdownNav" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {..." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "item" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "} " }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: "key" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "={" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "index" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "} />" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: ")" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E53935" }, children: " )" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " case" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "a" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " return" }), _jsx(_components.span, { style: { color: "#E53935" }, children: " (" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " <>" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E53935" }, children: "a" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " {..." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "props" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "properties" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " >" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "props" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "children" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#6182B8" }, children: "map" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "(" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "(" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: "item" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " any" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: " index" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " number" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ")" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " =>" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " return" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "MarkdownNav" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {..." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "item" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "} " }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: "key" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "={" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "index" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "} />" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: ")" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " " }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E53935" }, children: " )" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " default" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " return" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " <>{" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "props" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "value" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" }) })] }) }) }), "\n", _jsx(_components.h1, { id: "二react-markdown渲染", children: "二、React-markdown渲染" }), "\n", _jsxs(_components.p, { children: ["除了官方提供的mdx渲染以外，还可以使用", _jsx(_components.code, { children: "react-markdown" }), "来渲染"] }), "\n", _jsx(_components.p, { children: "这里简单介绍一个使用例子作为了解，使用还是以官方MDX优先" }), "\n", _jsx(_components.h2, { id: "21安装依赖", children: "2.1.安装依赖" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "bash", "data-theme": "material-theme-lighter", children: _jsx(_components.code, { "data-language": "bash", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E2931D" }, children: "pnpm" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " install" }), _jsx(_components.span, { style: { color: "#91B859" }, children: " react-markdown" })] }) }) }) }), "\n", _jsx(_components.h2, { id: "22使用", children: "2.2.使用" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#FAFAFA", color: "#90A4AE" }, tabIndex: "0", "data-language": "tsx", "data-theme": "material-theme-lighter", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "material-theme-lighter", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "import" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " type" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " Post" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " from" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "@/lib/post" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "import" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " ReactMarkdown " }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "from" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "react-markdown" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "import" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " rehypeHighlight " }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "from" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "rehype-highlight" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "import" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " rehypeRaw " }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "from" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "rehype-raw" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "import" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " rehypeSlug " }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "from" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "rehype-slug" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "import" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " remarkGfm " }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "from" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " \"" }), _jsx(_components.span, { style: { color: "#91B859" }, children: "remark-gfm" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: "export" }), _jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " default" }), _jsx(_components.span, { style: { color: "#9C3EDA" }, children: " function" }), _jsx(_components.span, { style: { color: "#6182B8" }, children: " ReactMarkdownCom" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "({" }), _jsx(_components.span, { style: { color: "#90A4AE", fontStyle: "italic" }, children: " post" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " }:" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" }), _jsx(_components.span, { style: { color: "#E53935" }, children: " post" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: ":" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: " Post" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " })" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5", fontStyle: "italic" }, children: " return" }), _jsx(_components.span, { style: { color: "#E53935" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " <" }), _jsx(_components.span, { style: { color: "#E2931D" }, children: "ReactMarkdown" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: " rehypePlugins" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "={" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "[rehypeHighlight" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " rehypeSlug" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " rehypeRaw" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "," }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: " remarkGfm]" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9C3EDA" }, children: " components" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "={}" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: " >" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " {" }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "post" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "." }), _jsx(_components.span, { style: { color: "#90A4AE" }, children: "content" }), _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#39ADB5" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E53935" }, children: " )" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#39ADB5" }, children: "}" }) })] }) }) }), "\n", _jsxs(_components.p, { children: ["用法与", _jsx(_components.code, { children: "React" }), "一致，插件与", _jsx(_components.a, { href: "https://wanyue.me/posts/Web%E5%89%8D%E7%AB%AF/12#13mdx%E6%B8%B2%E6%9F%93%E6%8F%92%E4%BB%B6%E9%85%8D%E7%BD%AE", children: "1.3" }), "的使用方法相同"] }), "\n", _jsxs(_components.p, { children: ["⚠️**", _jsx(_components.code, { children: "rehype-pretty-code" }), "**不可在ReactMarkdown中使用，有兼容性问题，可采用", _jsx(_components.code, { children: "rehype-highlight" }), "或者", _jsx(_components.code, { children: "react-syntax-highlighter" }), "来实现代码高亮"] }), "\n", _jsx(_components.h1, { id: "三小结", children: "三、小结" }), "\n", _jsxs(_components.p, { children: ["通过使用 ", _jsx(_components.strong, { children: "MDX 渲染" }), " 和 ", _jsx(_components.strong, { children: "React-markdown 渲染" }), "，开发者可以在 Next.js 中优雅地渲染 Markdown 文件，满足不同需求。MDX 提供了更强大的动态渲染能力，适合复杂的页面需求；而 React-markdown 则提供了简单且高效的解决方案，适用于较为静态的内容展示。结合各类插件，开发者可以进一步提升渲染效果，优化用户体验，打造更加优雅和高效的 Markdown 渲染方案。"] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };

Next.js 如何优雅地渲染 Markdown 文件？

目录