备注 NPM
为包管理器生成代码块
使用
🌐 Usage
添加 remark 插件。
🌐 Add the remark plugin.
import { compile } from '@mdx-js/mdx';
import { remarkNpm } from 'fumadocs-core/mdx-plugins';
await compile('...', {
remarkPlugins: [remarkNpm],
});定义所需组件：
🌐 Define the required components:
import { CodeBlockTabs, CodeBlockTab, CodeBlockTabsList, CodeBlockTabsTrigger } from 'my-ui';
import type { MDXComponents } from 'mdx/types';
export function getMDXComponents(components?: MDXComponents): MDXComponents {
return {
CodeBlockTabs,
CodeBlockTab,
CodeBlockTabsList,
CodeBlockTabsTrigger,
...components,
};
}| 组件 | |
|---|---|
| CodeBlockTabs | 接受一个 defaultValue 属性作为默认值 |
| CodeBlockTabsList | 不适用 |
| CodeBlockTab | 接受一个 value 属性 |
| CodeBlockTabsTrigger | 接受一个 value 属性 |
输入
🌐 Input
创建以 npm 为语言的代码块。
🌐 Create code blocks with npm as language.
```npm
npm i my-package
```
```npm
npm i my-package -D
```输出
🌐 Output
插件应生成以下结构。
🌐 The following structure should be generated by the plugin.
<CodeBlockTabs defaultValue="npm">
<CodeBlockTabsList>
<CodeBlockTabsTrigger value="npm">npm</CodeBlockTabsTrigger>
<CodeBlockTabsTrigger value="pnpm">pnpm</CodeBlockTabsTrigger>
<CodeBlockTabsTrigger value="yarn">yarn</CodeBlockTabsTrigger>
<CodeBlockTabsTrigger value="bun">bun</CodeBlockTabsTrigger>
</CodeBlockTabsList>
<CodeBlockTab value="npm">...</CodeBlockTab>
<CodeBlockTab value="pnpm">...</CodeBlockTab>
<CodeBlockTab value="yarn">...</CodeBlockTab>
<CodeBlockTab value="bun">...</CodeBlockTab>
</CodeBlockTabs>npm i my-package持久的
🌐 Persistent
在使用 Fumadocs UI 时，你可以通过 persist 选项启用保存已选择的值。
🌐 When using with Fumadocs UI, you can enable persist the selected value with the persist option.
import { defineConfig } from 'fumadocs-mdx/config';
export default defineConfig({
mdxOptions: {
remarkNpmOptions: {
persist: {
id: 'package-manager',
},
},
},
});这将为 <CodeBlockTabs /> 生成一个 persist 属性。
🌐 This will generate a persist prop to <CodeBlockTabs />.
Last updated on