"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const toc = [{ "depth": 2, "value": "主要技术", "attributes": { "hProperties": { "id": "主要技术" }, "id": "主要技术" }, "children": [{ "depth": 3, "value": "Nuxt", "attributes": { "hProperties": { "id": "nuxt" }, "id": "nuxt" }, "children": [{ "depth": 4, "value": "Nuxt 插件", "attributes": { "hProperties": { "id": "nuxt-插件" }, "id": "nuxt-插件" }, "children": [] }] }, { "depth": 3, "value": "MDX", "attributes": { "hProperties": { "id": "mdx" }, "id": "mdx" }, "children": [{ "depth": 4, "value": "将 mdx 文件直接导入为 string 类型", "attributes": { "hProperties": { "id": "将-mdx-文件直接导入为-string-类型" }, "id": "将-mdx-文件直接导入为-string-类型" }, "children": [] }, { "depth": 4, "value": "将 mdx 字符串编译为 Vue 组件，并注入组件", "attributes": { "hProperties": { "id": "将-mdx-字符串编译为-vue-组件，并注入组件" }, "id": "将-mdx-字符串编译为-vue-组件，并注入组件" }, "children": [] }, { "depth": 4, "value": "使用 mdx 的插件", "attributes": { "hProperties": { "id": "使用-mdx-的插件" }, "id": "使用-mdx-的插件" }, "children": [] }, { "depth": 4, "value": "代码块高亮", "attributes": { "hProperties": { "id": "代码块高亮" }, "id": "代码块高亮" }, "children": [] }] }, { "depth": 3, "value": "Tailwind CSS", "attributes": { "hProperties": { "id": "tailwind-css" }, "id": "tailwind-css" }, "children": [] }] }]; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", blockquote: "blockquote", code: "code", figure: "figure", h2: "h2", h3: "h3", h4: "h4", li: "li", mark: "mark", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ...props.components }; return _jsxs(_Fragment, { children: [_jsx(_components.h2, { id: "主要技术", children: "主要技术" }), "\n", _jsxs(_components.p, { children: ["个人主页项目使用的技术栈主要是 ", _jsx(_components.strong, { children: "Nuxt" }), "。"] }), "\n", _jsx(_components.h3, { id: "nuxt", children: "Nuxt" }), "\n", _jsx(_components.p, { children: "Nuxt 作为一个全栈框架，既能够构建 SSR 的项目, 也能作为 CSR，也能作为 SSG。" }), "\n", _jsx(_components.p, { children: "实际上 Nuxt 的默认渲染模式为 Universal Rendering. 按照官方的说法，\nUniversal Rendering 实际上是 SSR + CSR。" }), "\n", _jsxs(_components.blockquote, { children: ["\n", _jsx(_components.p, { children: "Nuxt 可以当作 Vue 启动器了" }), "\n"] }), "\n", _jsx(_components.h4, { id: "nuxt-插件", children: "Nuxt 插件" }), "\n", _jsx(_components.p, { children: "目前用到的 Nuxt 插件如下:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "@nuxtjs/tailwindcss: Tailwind 集成" }), "\n", _jsx(_components.li, { children: "@nuxt/eslint" }), "\n", _jsx(_components.li, { children: "@nuxtjs/color-mode: 提供黑暗模式和明亮模式功能（给 body 标签添加一个 class）" }), "\n", _jsx(_components.li, { children: "@nuxtjs/fontaine：字体相关" }), "\n", _jsx(_components.li, { children: "@nuxtjs/i18n: 国际化" }), "\n", _jsx(_components.li, { children: "@vueuse/nuxt: vueuse 的 nuxt 插件" }), "\n", _jsx(_components.li, { children: "@pinia/nuxt: pinia 状态管理" }), "\n", _jsx(_components.li, { children: "@pinia-plugin-persistedstate/nuxt: pinia 的持久化" }), "\n", _jsx(_components.li, { children: "nuxt-primevue: primevue 组件库（可以使用 styless 模式，然后用 tailwind 自定义组件样式）" }), "\n", _jsx(_components.li, { children: "nuxt-file-storage: 提供文件存储服务（上传下载）" }), "\n"] }), "\n", _jsx(_components.h3, { id: "mdx", children: "MDX" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://mdxjs.com/", children: "MDX" }), " 能够在 markdown 中使用 JSX 组件，只要支持 JSX 的框架理论上都可以\n使用 MDX."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "Nuxt" }), " 有一个 mdx 的", _jsx(_components.a, { href: "https://mdx.nuxtjs.org/", children: "集成插件" }), "，但是只支持 Nuxt2。\n", _jsx(_components.code, { children: "Nuxt" }), " 基于 ", _jsx(_components.code, { children: "Vite" }), "，", _jsx(_components.code, { children: "Vite" }), " 使用 ", _jsx(_components.code, { children: "Rollup" }), " 作为打包工具。而 ", _jsx(_components.code, { children: "Rollup" }), " 也有一个 mdx 插件。\n但是缺乏维护，而且并不足够灵活。（得到的直接是 Vue 组件，而无法解析出 Frontmatter 等）。\n只能手动实现 MDX 的编译。"] }), "\n", _jsx(_components.h4, { id: "将-mdx-文件直接导入为-string-类型", children: "将 mdx 文件直接导入为 string 类型" }), "\n", _jsxs(_components.p, { children: ["如果不做任何修改，", _jsx(_components.code, { children: "import mdx from 'path/to/file.mdx'" }), " 导入会报错。"] }), "\n", _jsxs(_components.p, { children: ["Vite 的 ", _jsx(_components.code, { children: "?raw" }), " 后缀导入并不能使用。因为 ", _jsx(_components.code, { children: "Nitro" }), " 直接使用 Rollup 进行打包。在编译时，", _jsx(_components.code, { children: "?raw" }), " 后缀将报错。"] }), "\n", _jsxs(_components.p, { children: ["目前的解决方法是使用一个 ", _jsx(_components.code, { children: "rollup" }), " 的插件 ", _jsx(_components.code, { children: "rollup-plugin-string" })] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { "--shiki-dark": "#cad3f5", "--shiki-light": "#4c4f69", "--shiki-dark-bg": "#24273a", "--shiki-light-bg": "#eff1f5" }, tabIndex: "0", "data-language": "ts", "data-theme": "catppuccin-macchiato catppuccin-latte", children: _jsxs(_components.code, { "data-language": "ts", "data-theme": "catppuccin-macchiato catppuccin-latte", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#6E738D", "--shiki-dark-font-style": "italic", "--shiki-light": "#9CA0B0", "--shiki-light-font-style": "italic" }, children: "// in nuxt.config.ts" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C6A0F6", "--shiki-light": "#8839EF" }, children: "import" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: " {" }), _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " string " }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: "}" }), _jsx(_components.span, { style: { "--shiki-dark": "#C6A0F6", "--shiki-light": "#8839EF" }, children: " from" }), _jsx(_components.span, { style: { "--shiki-dark": "#A6DA95", "--shiki-light": "#40A02B" }, children: " 'rollup-plugin-string'" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C6A0F6", "--shiki-light": "#8839EF" }, children: "export" }), _jsx(_components.span, { style: { "--shiki-dark": "#C6A0F6", "--shiki-light": "#8839EF" }, children: " default" }), _jsx(_components.span, { style: { "--shiki-dark": "#8AADF4", "--shiki-dark-font-style": "italic", "--shiki-light": "#1E66F5", "--shiki-light-font-style": "italic" }, children: " defineNuxtConfig" }), _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: "{" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " vite" }), _jsx(_components.span, { style: { "--shiki-dark": "#8BD5CA", "--shiki-light": "#179299" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " plugins" }), _jsx(_components.span, { style: { "--shiki-dark": "#8BD5CA", "--shiki-light": "#179299" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " [" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#8AADF4", "--shiki-dark-font-style": "italic", "--shiki-light": "#1E66F5", "--shiki-light-font-style": "italic" }, children: " string" }), _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: "{" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " include" }), _jsx(_components.span, { style: { "--shiki-dark": "#8BD5CA", "--shiki-light": "#179299" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#A6DA95", "--shiki-light": "#40A02B" }, children: " '/**/*.mdx'" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: " }" }), _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: ")" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " ]" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#6E738D", "--shiki-dark-font-style": "italic", "--shiki-light": "#9CA0B0", "--shiki-light-font-style": "italic" }, children: " // other config ..." }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: "}" }), _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: ")" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: ";" })] })] }) }) }), "\n", _jsxs(_components.p, { children: ["未来的解决方案可能可以参考", _jsx(_components.a, { href: "https://github.com/unjs/nitro/issues/2390", children: "这个issue" })] }), "\n", _jsxs(_components.blockquote, { children: ["\n", _jsx(_components.p, { children: "截至 2024.5.27，这个 issue 的状态仍为 open" }), "\n"] }), "\n", _jsx(_components.h4, { id: "将-mdx-字符串编译为-vue-组件，并注入组件", children: "将 mdx 字符串编译为 Vue 组件，并注入组件" }), "\n", _jsxs(_components.p, { children: ["参考：", _jsx(_components.a, { href: "https://mdxjs.com/packages/mdx/", children: "https://mdxjs.com/packages/mdx/" })] }), "\n", _jsxs(_components.p, { children: ["MDX 使用 ", _jsx(_components.code, { children: "compile" }), " 函数将 ", _jsx(_components.code, { children: "mdx" }), " 格式的文档转换成 ", _jsx(_components.code, { children: ".jsx" }), " 格式。然后通过 ", _jsx(_components.code, { children: "run" }), " 函数将这个 ", _jsx(_components.code, { children: ".jsx" }), " 渲染。"] }), "\n", _jsxs(_components.p, { children: ["上述步骤可以通过一个函数 ", _jsx(_components.code, { children: "evaluate" }), " 实现。在这个函数中可以同时写入 ", _jsx(_components.code, { children: "compile" }), " 和 ", _jsx(_components.code, { children: "run" }), " 两个函数的 ", _jsx(_components.code, { children: "option" }), "。"] }), "\n", _jsx(_components.p, { children: "以下是我进行 mdx 渲染的相关代码：" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { "--shiki-dark": "#cad3f5", "--shiki-light": "#4c4f69", "--shiki-dark-bg": "#24273a", "--shiki-light-bg": "#eff1f5" }, tabIndex: "0", "data-language": "ts", "data-theme": "catppuccin-macchiato catppuccin-latte", children: _jsxs(_components.code, { "data-language": "ts", "data-theme": "catppuccin-macchiato catppuccin-latte", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C6A0F6", "--shiki-light": "#8839EF" }, children: "import" }), _jsx(_components.span, { style: { "--shiki-dark": "#ED8796", "--shiki-light": "#D20F39" }, children: " *" }), _jsx(_components.span, { style: { "--shiki-dark": "#C6A0F6", "--shiki-light": "#8839EF" }, children: " as" }), _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " runtime " }), _jsx(_components.span, { style: { "--shiki-dark": "#C6A0F6", "--shiki-light": "#8839EF" }, children: "from" }), _jsx(_components.span, { style: { "--shiki-dark": "#A6DA95", "--shiki-light": "#40A02B" }, children: " 'vue/jsx-runtime'" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#6E738D", "--shiki-dark-font-style": "italic", "--shiki-light": "#9CA0B0", "--shiki-light-font-style": "italic" }, children: "// vue 提供的 jsx runtime, 必须引入" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C6A0F6", "--shiki-light": "#8839EF" }, children: "import" }), _jsx(_components.span, { style: { "--shiki-dark": "#C6A0F6", "--shiki-light": "#8839EF" }, children: " type" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: " {" }), _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " run " }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: "}" }), _jsx(_components.span, { style: { "--shiki-dark": "#C6A0F6", "--shiki-light": "#8839EF" }, children: " from" }), _jsx(_components.span, { style: { "--shiki-dark": "#A6DA95", "--shiki-light": "#40A02B" }, children: " '@mdx-js/mdx'" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C6A0F6", "--shiki-light": "#8839EF" }, children: "import" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: " {" }), _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " evaluate " }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: "}" }), _jsx(_components.span, { style: { "--shiki-dark": "#C6A0F6", "--shiki-light": "#8839EF" }, children: " from" }), _jsx(_components.span, { style: { "--shiki-dark": "#A6DA95", "--shiki-light": "#40A02B" }, children: " '@mdx-js/mdx'" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C6A0F6", "--shiki-light": "#8839EF" }, children: "import" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " MDXProvider" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: "," }), _jsx(_components.span, { style: { "--shiki-dark": "#6E738D", "--shiki-dark-font-style": "italic", "--shiki-light": "#9CA0B0", "--shiki-light-font-style": "italic" }, children: " // 提供组件注入的能力" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " useMDXComponents" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: "," }), _jsx(_components.span, { style: { "--shiki-dark": "#6E738D", "--shiki-dark-font-style": "italic", "--shiki-light": "#9CA0B0", "--shiki-light-font-style": "italic" }, children: " // 使用 MDX 组件" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: "}" }), _jsx(_components.span, { style: { "--shiki-dark": "#C6A0F6", "--shiki-light": "#8839EF" }, children: " from" }), _jsx(_components.span, { style: { "--shiki-dark": "#A6DA95", "--shiki-light": "#40A02B" }, children: " '@mdx-js/vue'" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C6A0F6", "--shiki-light": "#8839EF" }, children: "type" }), _jsx(_components.span, { style: { "--shiki-dark": "#EED49F", "--shiki-dark-font-style": "italic", "--shiki-light": "#DF8E1D", "--shiki-light-font-style": "italic" }, children: " MDXContent " }), _jsx(_components.span, { style: { "--shiki-dark": "#8BD5CA", "--shiki-light": "#179299" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#EED49F", "--shiki-dark-font-style": "italic", "--shiki-light": "#DF8E1D", "--shiki-light-font-style": "italic" }, children: " Awaited" }), _jsx(_components.span, { style: { "--shiki-dark": "#91D7E3", "--shiki-light": "#04A5E5" }, children: "<" }), _jsx(_components.span, { style: { "--shiki-dark": "#EED49F", "--shiki-dark-font-style": "italic", "--shiki-light": "#DF8E1D", "--shiki-light-font-style": "italic" }, children: "ReturnType" }), _jsx(_components.span, { style: { "--shiki-dark": "#91D7E3", "--shiki-light": "#04A5E5" }, children: "<" }), _jsx(_components.span, { style: { "--shiki-dark": "#C6A0F6", "--shiki-light": "#8839EF" }, children: "typeof" }), _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-dark-font-style": "italic", "--shiki-light": "#4C4F69", "--shiki-light-font-style": "italic" }, children: " run" }), _jsx(_components.span, { style: { "--shiki-dark": "#91D7E3", "--shiki-light": "#04A5E5" }, children: ">>" }), _jsx(_components.span, { style: { "--shiki-dark": "#EED49F", "--shiki-dark-font-style": "italic", "--shiki-light": "#DF8E1D", "--shiki-light-font-style": "italic" }, children: "[" }), _jsx(_components.span, { style: { "--shiki-dark": "#A6DA95", "--shiki-light": "#40A02B" }, children: "'" }), _jsx(_components.span, { style: { "--shiki-dark": "#A6DA95", "--shiki-dark-font-style": "italic", "--shiki-light": "#40A02B", "--shiki-light-font-style": "italic" }, children: "default" }), _jsx(_components.span, { style: { "--shiki-dark": "#A6DA95", "--shiki-light": "#40A02B" }, children: "'" }), _jsx(_components.span, { style: { "--shiki-dark": "#EED49F", "--shiki-dark-font-style": "italic", "--shiki-light": "#DF8E1D", "--shiki-light-font-style": "italic" }, children: "]" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C6A0F6", "--shiki-light": "#8839EF" }, children: "const" }), _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " Content " }), _jsx(_components.span, { style: { "--shiki-dark": "#8BD5CA", "--shiki-light": "#179299" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#8AADF4", "--shiki-dark-font-style": "italic", "--shiki-light": "#1E66F5", "--shiki-light-font-style": "italic" }, children: " ref" }), _jsx(_components.span, { style: { "--shiki-dark": "#91D7E3", "--shiki-light": "#04A5E5" }, children: "<" }), _jsx(_components.span, { style: { "--shiki-dark": "#EED49F", "--shiki-dark-font-style": "italic", "--shiki-light": "#DF8E1D", "--shiki-light-font-style": "italic" }, children: "MDXContent" }), _jsx(_components.span, { style: { "--shiki-dark": "#91D7E3", "--shiki-light": "#04A5E5" }, children: ">" }), _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: "()" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C6A0F6", "--shiki-light": "#8839EF" }, children: "const" }), _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " content " }), _jsx(_components.span, { style: { "--shiki-dark": "#8BD5CA", "--shiki-light": "#179299" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#8AADF4", "--shiki-dark-font-style": "italic", "--shiki-light": "#1E66F5", "--shiki-light-font-style": "italic" }, children: " ref" }), _jsx(_components.span, { style: { "--shiki-dark": "#91D7E3", "--shiki-light": "#04A5E5" }, children: "<" }), _jsx(_components.span, { style: { "--shiki-dark": "#C6A0F6", "--shiki-light": "#8839EF" }, children: "string" }), _jsx(_components.span, { style: { "--shiki-dark": "#91D7E3", "--shiki-light": "#04A5E5" }, children: ">" }), _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-dark": "#A6DA95", "--shiki-light": "#40A02B" }, children: "'# hello world'" }), _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: ")" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C6A0F6", "--shiki-light": "#8839EF" }, children: "const" }), _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " mdx " }), _jsx(_components.span, { style: { "--shiki-dark": "#8BD5CA", "--shiki-light": "#179299" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#C6A0F6", "--shiki-light": "#8839EF" }, children: " await" }), _jsx(_components.span, { style: { "--shiki-dark": "#8AADF4", "--shiki-dark-font-style": "italic", "--shiki-light": "#1E66F5", "--shiki-light-font-style": "italic" }, children: " evaluate" }), _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: "(" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " content" }), _jsx(_components.span, { style: { "--shiki-dark": "#8BD5CA", "--shiki-light": "#179299" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: "value" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: " {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#8BD5CA", "--shiki-light": "#179299" }, children: " ..." }), _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: "runtime" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: "," }), _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " useMDXComponents" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " remarkPlugins" }), _jsx(_components.span, { style: { "--shiki-dark": "#8BD5CA", "--shiki-light": "#179299" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " [" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#6E738D", "--shiki-dark-font-style": "italic", "--shiki-light": "#9CA0B0", "--shiki-light-font-style": "italic" }, children: " // my remark plugins..." }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " ]" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " rehypePlugins" }), _jsx(_components.span, { style: { "--shiki-dark": "#8BD5CA", "--shiki-light": "#179299" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " [" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#6E738D", "--shiki-dark-font-style": "italic", "--shiki-light": "#9CA0B0", "--shiki-light-font-style": "italic" }, children: " // my rehype Plugins..." }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " ]" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: " }" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: ")" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: "Content" }), _jsx(_components.span, { style: { "--shiki-dark": "#8BD5CA", "--shiki-light": "#179299" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: "value " }), _jsx(_components.span, { style: { "--shiki-dark": "#8BD5CA", "--shiki-light": "#179299" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " mdx" }), _jsx(_components.span, { style: { "--shiki-dark": "#8BD5CA", "--shiki-light": "#179299" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: "default" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: ";" }), _jsx(_components.span, { style: { "--shiki-dark": "#6E738D", "--shiki-dark-font-style": "italic", "--shiki-light": "#9CA0B0", "--shiki-light-font-style": "italic" }, children: " // 这个 Content 可以直接在组件里面用" })] })] }) }) }), "\n", _jsxs(_components.p, { children: ["在 ", _jsx(_components.code, { children: "template" }), " 中可以这样写："] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { "--shiki-dark": "#cad3f5", "--shiki-light": "#4c4f69", "--shiki-dark-bg": "#24273a", "--shiki-light-bg": "#eff1f5" }, tabIndex: "0", "data-language": "vue", "data-theme": "catppuccin-macchiato catppuccin-latte", children: _jsxs(_components.code, { "data-language": "vue", "data-theme": "catppuccin-macchiato catppuccin-latte", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#8BD5CA", "--shiki-light": "#179299" }, children: "<" }), _jsx(_components.span, { style: { "--shiki-dark": "#8AADF4", "--shiki-light": "#1E66F5" }, children: "template" }), _jsx(_components.span, { style: { "--shiki-dark": "#8BD5CA", "--shiki-light": "#179299" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#8BD5CA", "--shiki-light": "#179299" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-dark": "#8AADF4", "--shiki-light": "#1E66F5" }, children: "MDXProvider" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: " :" }), _jsx(_components.span, { style: { "--shiki-dark": "#EED49F", "--shiki-light": "#DF8E1D" }, children: "components" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: "\"" }), _jsx(_components.mark, { "data-highlighted-chars": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: "md" }) }), _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: "\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#8BD5CA", "--shiki-light": "#179299" }, children: ">" }), _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " // 这个 components 属性用于注入组件" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#8BD5CA", "--shiki-light": "#179299" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-dark": "#8AADF4", "--shiki-light": "#1E66F5" }, children: "Content" }), _jsx(_components.span, { style: { "--shiki-dark": "#8BD5CA", "--shiki-light": "#179299" }, children: "/>" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#8BD5CA", "--shiki-light": "#179299" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#8BD5CA", "--shiki-light": "#179299" }, children: "" })] })] }) }) }), "\n", _jsx(_components.p, { children: "上述的那个 md 对象如下：" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { "--shiki-dark": "#cad3f5", "--shiki-light": "#4c4f69", "--shiki-dark-bg": "#24273a", "--shiki-light-bg": "#eff1f5" }, tabIndex: "0", "data-language": "ts", "data-theme": "catppuccin-macchiato catppuccin-latte", children: _jsxs(_components.code, { "data-language": "ts", "data-theme": "catppuccin-macchiato catppuccin-latte", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C6A0F6", "--shiki-light": "#8839EF" }, children: "export" }), _jsx(_components.span, { style: { "--shiki-dark": "#C6A0F6", "--shiki-light": "#8839EF" }, children: " const" }), _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " md " }), _jsx(_components.span, { style: { "--shiki-dark": "#8BD5CA", "--shiki-light": "#179299" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#A6DA95", "--shiki-light": "#40A02B" }, children: " 'h1'" }), _jsx(_components.span, { style: { "--shiki-dark": "#8BD5CA", "--shiki-light": "#179299" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " H1 " }), _jsx(_components.span, { style: { "--shiki-dark": "#6E738D", "--shiki-dark-font-style": "italic", "--shiki-light": "#9CA0B0", "--shiki-light-font-style": "italic" }, children: "// H1 是一个 Vue 组件" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: "}" }) })] }) }) }), "\n", _jsx(_components.h4, { id: "使用-mdx-的插件", children: "使用 mdx 的插件" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "mdx" }), " 支持 ", _jsx(_components.code, { children: "rehype" }), ", ", _jsx(_components.code, { children: "remark" }), " 等插件。需要在 ", _jsx(_components.code, { children: "evaluate" }), " 的时候引入。"] }), "\n", _jsx(_components.p, { children: "以下是我使用的插件：" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { "--shiki-dark": "#cad3f5", "--shiki-light": "#4c4f69", "--shiki-dark-bg": "#24273a", "--shiki-light-bg": "#eff1f5" }, tabIndex: "0", "data-language": "ts", "data-theme": "catppuccin-macchiato catppuccin-latte", children: _jsxs(_components.code, { "data-language": "ts", "data-theme": "catppuccin-macchiato catppuccin-latte", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C6A0F6", "--shiki-light": "#8839EF" }, children: "import" }), _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " remarkgfm " }), _jsx(_components.span, { style: { "--shiki-dark": "#C6A0F6", "--shiki-light": "#8839EF" }, children: "from" }), _jsx(_components.span, { style: { "--shiki-dark": "#A6DA95", "--shiki-light": "#40A02B" }, children: " 'remark-gfm'" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C6A0F6", "--shiki-light": "#8839EF" }, children: "import" }), _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " remarkmath " }), _jsx(_components.span, { style: { "--shiki-dark": "#C6A0F6", "--shiki-light": "#8839EF" }, children: "from" }), _jsx(_components.span, { style: { "--shiki-dark": "#A6DA95", "--shiki-light": "#40A02B" }, children: " 'remark-math'" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C6A0F6", "--shiki-light": "#8839EF" }, children: "import" }), _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " remarkFrontmatter " }), _jsx(_components.span, { style: { "--shiki-dark": "#C6A0F6", "--shiki-light": "#8839EF" }, children: "from" }), _jsx(_components.span, { style: { "--shiki-dark": "#A6DA95", "--shiki-light": "#40A02B" }, children: " 'remark-frontmatter'" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C6A0F6", "--shiki-light": "#8839EF" }, children: "import" }), _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " remarkMdxFrontmatter " }), _jsx(_components.span, { style: { "--shiki-dark": "#C6A0F6", "--shiki-light": "#8839EF" }, children: "from" }), _jsx(_components.span, { style: { "--shiki-dark": "#A6DA95", "--shiki-light": "#40A02B" }, children: " 'remark-mdx-frontmatter'" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C6A0F6", "--shiki-light": "#8839EF" }, children: "import" }), _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " remarkHeadingId " }), _jsx(_components.span, { style: { "--shiki-dark": "#C6A0F6", "--shiki-light": "#8839EF" }, children: "from" }), _jsx(_components.span, { style: { "--shiki-dark": "#A6DA95", "--shiki-light": "#40A02B" }, children: " 'remark-heading-id'" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C6A0F6", "--shiki-light": "#8839EF" }, children: "import" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: " {" }), _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " remarkMdxToc " }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: "}" }), _jsx(_components.span, { style: { "--shiki-dark": "#C6A0F6", "--shiki-light": "#8839EF" }, children: " from" }), _jsx(_components.span, { style: { "--shiki-dark": "#A6DA95", "--shiki-light": "#40A02B" }, children: " 'remark-mdx-toc'" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C6A0F6", "--shiki-light": "#8839EF" }, children: "import" }), _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " rehypePrettyCode " }), _jsx(_components.span, { style: { "--shiki-dark": "#C6A0F6", "--shiki-light": "#8839EF" }, children: "from" }), _jsx(_components.span, { style: { "--shiki-dark": "#A6DA95", "--shiki-light": "#40A02B" }, children: " 'rehype-pretty-code'" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C6A0F6", "--shiki-light": "#8839EF" }, children: "import" }), _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " rehypeKatex " }), _jsx(_components.span, { style: { "--shiki-dark": "#C6A0F6", "--shiki-light": "#8839EF" }, children: "from" }), _jsx(_components.span, { style: { "--shiki-dark": "#A6DA95", "--shiki-light": "#40A02B" }, children: " 'rehype-katex'" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#6E738D", "--shiki-dark-font-style": "italic", "--shiki-light": "#9CA0B0", "--shiki-light-font-style": "italic" }, children: "// in evaluate function" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: "{" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " remarkPlugins" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " [" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " remarkgfm" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: "," }), _jsx(_components.span, { style: { "--shiki-dark": "#6E738D", "--shiki-dark-font-style": "italic", "--shiki-light": "#9CA0B0", "--shiki-light-font-style": "italic" }, children: " // Github-favored-markdown" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " remarkmath" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: "," }), _jsx(_components.span, { style: { "--shiki-dark": "#6E738D", "--shiki-dark-font-style": "italic", "--shiki-light": "#9CA0B0", "--shiki-light-font-style": "italic" }, children: " // 数学支持" })] }), "\n", _jsxs(_components.span, { "data-line": "", "data-highlighted-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " remarkFrontmatter" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: "," }), _jsx(_components.span, { style: { "--shiki-dark": "#6E738D", "--shiki-dark-font-style": "italic", "--shiki-light": "#9CA0B0", "--shiki-light-font-style": "italic" }, children: " // 解析 frontmatter" })] }), "\n", _jsxs(_components.span, { "data-line": "", "data-highlighted-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " remarkMdxFrontmatter" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " [remarkHeadingId" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: "," }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: " {" }), _jsx(_components.span, { style: { "--shiki-dark": "#6E738D", "--shiki-dark-font-style": "italic", "--shiki-light": "#9CA0B0", "--shiki-light-font-style": "italic" }, children: " // 标题注入 id，供 toc 使用" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " defaults" }), _jsx(_components.span, { style: { "--shiki-dark": "#8BD5CA", "--shiki-light": "#179299" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#F5A97F", "--shiki-light": "#FE640B" }, children: " true" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " uniqueDefaults" }), _jsx(_components.span, { style: { "--shiki-dark": "#8BD5CA", "--shiki-light": "#179299" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#F5A97F", "--shiki-light": "#FE640B" }, children: " true" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: " }" }), _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: "]" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", "data-highlighted-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " remarkMdxToc" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: "," }), _jsx(_components.span, { style: { "--shiki-dark": "#6E738D", "--shiki-dark-font-style": "italic", "--shiki-light": "#9CA0B0", "--shiki-light-font-style": "italic" }, children: " // toc 目录" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " ]" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " rehypePlugins" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " [" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " [rehypePrettyCode" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: "," }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: " {" }), _jsx(_components.span, { style: { "--shiki-dark": "#6E738D", "--shiki-dark-font-style": "italic", "--shiki-light": "#9CA0B0", "--shiki-light-font-style": "italic" }, children: " // 代码高亮" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " theme" }), _jsx(_components.span, { style: { "--shiki-dark": "#8BD5CA", "--shiki-light": "#179299" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " dark" }), _jsx(_components.span, { style: { "--shiki-dark": "#8BD5CA", "--shiki-light": "#179299" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#A6DA95", "--shiki-light": "#40A02B" }, children: " 'catppuccin-macchiato'" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " light" }), _jsx(_components.span, { style: { "--shiki-dark": "#8BD5CA", "--shiki-light": "#179299" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#A6DA95", "--shiki-light": "#40A02B" }, children: " 'catppuccin-latte'" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: " }," }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " keepBackground" }), _jsx(_components.span, { style: { "--shiki-dark": "#8BD5CA", "--shiki-light": "#179299" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#F5A97F", "--shiki-light": "#FE640B" }, children: " true" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: " }" }), _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: "]" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " [rehypeKatex" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: "," }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: " {" }), _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " output" }), _jsx(_components.span, { style: { "--shiki-dark": "#8BD5CA", "--shiki-light": "#179299" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#A6DA95", "--shiki-light": "#40A02B" }, children: " 'mathml'" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: " }" }), _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: "]" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: "," }), _jsx(_components.span, { style: { "--shiki-dark": "#6E738D", "--shiki-dark-font-style": "italic", "--shiki-light": "#9CA0B0", "--shiki-light-font-style": "italic" }, children: " // KaTeX 用于支持数学公式" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " ]" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: "}" }) })] }) }) }), "\n", _jsx(_components.h4, { id: "代码块高亮", children: "代码块高亮" }), "\n", _jsxs(_components.p, { children: ["如上一节的插件，使用 ", _jsx(_components.code, { children: "rehype-pretty-code" }), " 作为代码高亮。(能够支持黑暗/明亮模式，支持数字行等) 参考:\n", _jsx(_components.a, { href: "https://rehype-pretty.pages.dev/", children: "https://rehype-pretty.pages.dev/" })] }), "\n", _jsxs(_components.p, { children: ["注入 ", _jsx(_components.code, { children: "code" }), " 组件："] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { "--shiki-dark": "#cad3f5", "--shiki-light": "#4c4f69", "--shiki-dark-bg": "#24273a", "--shiki-light-bg": "#eff1f5" }, tabIndex: "0", "data-language": "vue", "data-theme": "catppuccin-macchiato catppuccin-latte", children: _jsxs(_components.code, { "data-language": "vue", "data-theme": "catppuccin-macchiato catppuccin-latte", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: "// code.vue" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#8BD5CA", "--shiki-light": "#179299" }, children: "<" }), _jsx(_components.span, { style: { "--shiki-dark": "#8AADF4", "--shiki-light": "#1E66F5" }, children: "script" }), _jsx(_components.span, { style: { "--shiki-dark": "#EED49F", "--shiki-light": "#DF8E1D" }, children: " setup" }), _jsx(_components.span, { style: { "--shiki-dark": "#EED49F", "--shiki-light": "#DF8E1D" }, children: " lang" }), _jsx(_components.span, { style: { "--shiki-dark": "#8BD5CA", "--shiki-light": "#179299" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#A6DA95", "--shiki-light": "#40A02B" }, children: "\"ts\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#8BD5CA", "--shiki-light": "#179299" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#8BD5CA", "--shiki-light": "#179299" }, children: "" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#8BD5CA", "--shiki-light": "#179299" }, children: "<" }), _jsx(_components.span, { style: { "--shiki-dark": "#8AADF4", "--shiki-light": "#1E66F5" }, children: "template" }), _jsx(_components.span, { style: { "--shiki-dark": "#8BD5CA", "--shiki-light": "#179299" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#8BD5CA", "--shiki-light": "#179299" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-dark": "#8AADF4", "--shiki-light": "#1E66F5" }, children: "code" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: " :" }), _jsx(_components.span, { style: { "--shiki-dark": "#EED49F", "--shiki-light": "#DF8E1D" }, children: "class" }), _jsx(_components.span, { style: { "--shiki-dark": "#8BD5CA", "--shiki-light": "#179299" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#A6DA95", "--shiki-light": "#40A02B" }, children: "\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: "$colorMode" }), _jsx(_components.span, { style: { "--shiki-dark": "#8BD5CA", "--shiki-light": "#179299" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: "value" }), _jsx(_components.span, { style: { "--shiki-dark": "#A6DA95", "--shiki-light": "#40A02B" }, children: "\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#EED49F", "--shiki-light": "#DF8E1D" }, children: " class" }), _jsx(_components.span, { style: { "--shiki-dark": "#8BD5CA", "--shiki-light": "#179299" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#A6DA95", "--shiki-light": "#40A02B" }, children: "\"dark:bg-gray-900 light:bg-gray-300\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#8BD5CA", "--shiki-light": "#179299" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#8BD5CA", "--shiki-light": "#179299" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-dark": "#8AADF4", "--shiki-light": "#1E66F5" }, children: "slot" }), _jsx(_components.span, { style: { "--shiki-dark": "#8BD5CA", "--shiki-light": "#179299" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#8BD5CA", "--shiki-light": "#179299" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#8BD5CA", "--shiki-light": "#179299" }, children: "" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#8BD5CA", "--shiki-light": "#179299" }, children: "<" }), _jsx(_components.span, { style: { "--shiki-dark": "#8AADF4", "--shiki-light": "#1E66F5" }, children: "style" }), _jsx(_components.span, { style: { "--shiki-dark": "#EED49F", "--shiki-light": "#DF8E1D" }, children: " scoped" }), _jsx(_components.span, { style: { "--shiki-dark": "#EED49F", "--shiki-light": "#DF8E1D" }, children: " lang" }), _jsx(_components.span, { style: { "--shiki-dark": "#8BD5CA", "--shiki-light": "#179299" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#A6DA95", "--shiki-light": "#40A02B" }, children: "\"scss\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#8BD5CA", "--shiki-light": "#179299" }, children: ">" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: "@font-face {" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " font-family: 'Fira Code';" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " src: '/fonts/firacode.ttf';" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " font-weight: normal;" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " font-style: normal;" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: "}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: "code {" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " margin-inline: 0.25rem;" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " font-family: 'Fira Code', monospace;" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " :deep(*) {" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " font-family: 'Fira Code', monospace;" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " counter-set: line;" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " overflow: scroll;" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " :deep([data-line])::before {" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " counter-increment: line;" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " content: counter(line);" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " display: inline-block;" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " width: 2em;" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " text-align: right;" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " margin-right: 0.5em;" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " color: #999;" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: "}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: "code {" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " :deep(span) {" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " color: var(--shiki-light);" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " :deep([data-highlighted-line]) {" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " @apply bg-pink-100;" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: "}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: "code.dark {" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " :deep(span) {" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " color: var(--shiki-dark);" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " :deep([data-highlighted-line]) {" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " @apply bg-pink-800;" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: "}" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#8BD5CA", "--shiki-light": "#179299" }, children: "" })] })] }) }) }), "\n", _jsx(_components.h3, { id: "tailwind-css", children: "Tailwind CSS" }), "\n", _jsx(_components.p, { children: "本站使用 Tailwind CSS。这个东西是真的好用啊。而且 Nuxt 可以直接使用 Tailwind 的插件。" }), "\n", _jsx(_components.p, { children: "Tailwind 可以直接写 class 调整组件的样式。" }), "\n", _jsxs(_components.p, { children: ["需要注意的是必须要 ", _jsx(_components.code, { children: "tailwind.config.js" }), " 的 content 中加入所有.vue 文件。"] }), "\n", _jsx(_components.p, { children: "本项目使用 monorepo，markdown的组件是一个单独的 package。可以如是:" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { "--shiki-dark": "#cad3f5", "--shiki-light": "#4c4f69", "--shiki-dark-bg": "#24273a", "--shiki-light-bg": "#eff1f5" }, tabIndex: "0", "data-language": "js", "data-theme": "catppuccin-macchiato catppuccin-latte", children: _jsxs(_components.code, { "data-language": "js", "data-theme": "catppuccin-macchiato catppuccin-latte", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#6E738D", "--shiki-dark-font-style": "italic", "--shiki-light": "#9CA0B0", "--shiki-light-font-style": "italic" }, children: "// tailwind.config.js" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#C6A0F6", "--shiki-dark-font-style": "italic", "--shiki-light": "#8839EF", "--shiki-light-font-style": "italic" }, children: "module" }), _jsx(_components.span, { style: { "--shiki-dark": "#8BD5CA", "--shiki-light": "#179299" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#C6A0F6", "--shiki-dark-font-style": "italic", "--shiki-light": "#8839EF", "--shiki-light-font-style": "italic" }, children: "exports" }), _jsx(_components.span, { style: { "--shiki-dark": "#8BD5CA", "--shiki-light": "#179299" }, children: " =" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " darkMode" }), _jsx(_components.span, { style: { "--shiki-dark": "#8BD5CA", "--shiki-light": "#179299" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#A6DA95", "--shiki-light": "#40A02B" }, children: " 'class'" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " content" }), _jsx(_components.span, { style: { "--shiki-dark": "#8BD5CA", "--shiki-light": "#179299" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " [" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#A6DA95", "--shiki-light": "#40A02B" }, children: " './pages/**/*.vue'" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#A6DA95", "--shiki-light": "#40A02B" }, children: " './node_modules/mdx-components/**/*.vue'" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#A6DA95", "--shiki-light": "#40A02B" }, children: " './components/**/*.vue'" }), _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#CAD3F5", "--shiki-light": "#4C4F69" }, children: " ]" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#939AB7", "--shiki-light": "#7C7F93" }, children: "}" }) })] }) }) })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = props.components || ({}); return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { toc, frontmatter, default: MDXContent };

About the main technical points of the homepage project