如何用 remark-npm 插件在 Fumadocs MDX 中生成多包管理器的安装命令代码块【免费下载链接】fumadocsThe beautiful flexible React.js docs framework.项目地址: https://gitcode.com/GitHub_Trending/fu/fumadocs在文档站点里写安装步骤时同一条命令往往需要针对 npm、pnpm、yarn、bun 分别写一遍。Fumadocs Core 提供的remarkNpm插件可以解决这个问题你在 MDX 中只写一条npm语言的代码块编译时插件会自动把它转换成一个带 Tab 的代码块结构渲染出可切换的四种包管理器命令。本文介绍如何接入该插件、编写对应的 MDX 内容以及可选的persist配置。前提两条接入路径remarkNpm来自fumadocs-core/mdx-plugins文档给出了两种使用方式按你的文档构建方式二选一Fumadocs MDXfumadocs-mdx该插件默认启用通常不需要额外引入只有在需要定制时通过remarkNpmOptions配置。这一点可以从 fumadocs-mdx 的 MDX 预设实现 得到印证——预设中只要remarkNpmOptions不为false就会挂上该插件。MDX Compiler直接用mdx-js/mdx的compile需要手动把插件加入remarkPlugins。第一步启用插件使用 MDX Compiler 直接编译时把remarkNpm加入remarkPluginsimport { compile } from mdx-js/mdx; import { remarkNpm } from fumadocs-core/mdx-plugins; await compile(..., { remarkPlugins: [remarkNpm], });使用 Fumadocs MDX 时插件默认已启用source.config.ts中只有需要定制时才写remarkNpmOptionsimport { defineConfig } from fumadocs-mdx/config; export default defineConfig({ mdxOptions: { remarkNpmOptions: { // it is enabled by default, customize it here }, }, });第二步定义渲染所需的组件插件生成的不是普通代码块而是一组CodeBlockTabs系列组件MDX 组件解析表里必须能找到它们。使用 Fumadocs UI这些组件已包含在defaultComponents中只要像 本仓库的组件配置 那样展开即可import defaultComponents from fumadocs-ui/mdx; import type { MDXComponents } from mdx/types; export function getMDXComponents(components?: MDXComponents) { return { // its included by default in defaultComponents ...defaultComponents, ...components, } satisfies MDXComponents; }自定义 UI需要自行提供四个组件并挂到组件解析表上import { CodeBlockTabs, CodeBlockTab, CodeBlockTabsList, CodeBlockTabsTrigger } from my-ui; import type { MDXComponents } from mdx/types; export function getMDXComponents(components?: MDXComponents) { return { CodeBlockTabs, CodeBlockTab, CodeBlockTabsList, CodeBlockTabsTrigger, ...components, } satisfies MDXComponents; }四个组件各自接收的 props文档给出的约定Component说明CodeBlockTabs接收defaultValueprop作为默认选中的 TabCodeBlockTabsListN/ACodeBlockTab接收valuepropCodeBlockTabsTrigger接收valueprop第三步在 MDX 中写 npm 代码块转换的触发条件很简单代码块语言标记为npm。例如文档页面里写npm npm i my-package npm npm i my-package -D 编译后每个代码块会被替换成如下结构文档给出的示例输出CodeBlockTabs defaultValuenpm CodeBlockTabsList CodeBlockTabsTrigger valuenpmnpm/CodeBlockTabsTrigger CodeBlockTabsTrigger valuepnpmpnpm/CodeBlockTabsTrigger CodeBlockTabsTrigger valueyarnyarn/CodeBlockTabsTrigger CodeBlockTabsTrigger valuebunbun/CodeBlockTabsTrigger /CodeBlockTabsList CodeBlockTab valuenpm.../CodeBlockTab CodeBlockTab valuepnpm.../CodeBlockTab CodeBlockTab valueyarn.../CodeBlockTab CodeBlockTab valuebun.../CodeBlockTab /CodeBlockTabs其中每个CodeBlockTab内是转换后的对应包管理器命令。默认生成的四个 Tab 来自 插件实现 中的packageManagers默认值npm原样保留、pnpm、yarn、bun后三者通过npm-to-yarn转换逐行处理多行命令。验证结果完成接入后判断标准是页面上原本的单个npm代码块变成了可点击切换的 Tab 组默认选中npmTab即defaultValuenpm切到pnpm/yarn/bun时显示对应命令如果切换后没有 Tab、或页面报组件未定义先检查第二步的组件解析表里是否注册了CodeBlockTabs系列组件自定义 UI 场景。可选持久化用户选择的包管理器与 Fumadocs UI 配合时可以给插件加persist选项把用户选择的 Tab 值持久化生成persistprop 传给CodeBlockTabs /。id是存储键名由你指定import { defineConfig } from fumadocs-mdx/config; export default defineConfig({ mdxOptions: { remarkNpmOptions: { persist: { id: package-manager, }, }, }, });MDX Compiler 路径下则通过插件参数传入import { compile } from mdx-js/mdx; import { remarkNpm, type RemarkNpmOptions } from fumadocs-core/mdx-plugins; const remarkNpmOptions: RemarkNpmOptions { persist: { id: package-manager, }, }; await compile(..., { remarkPlugins: [[remarkNpm, remarkNpmOptions]], });persist的具体行为见 Fumadocs UI 的 Tabs 组件文档指定groupId时值暂存于sessionStorage加上persist后则写入localStorage以组 ID 作为存储键。边界与相关说明只有语言标记为npm的代码块会被转换其他语言的代码块不受影响。如果你之前用的是旧的remarkInstall插件package-install代码块来自fumadocs-docgen文档已标注其为Deprecated在 Fumadocs MDX 中remarkNpm已默认启用应当改用本插件参考 Package Install 文档。插件选项类型RemarkNpmOptions还包含packageManagers字段见 插件源码可用于替换或增删 Tab默认四个管理器满足常规场景时无需配置。主要参考文档Remark NPM。【免费下载链接】fumadocsThe beautiful flexible React.js docs framework.项目地址: https://gitcode.com/GitHub_Trending/fu/fumadocs创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考