パッケージのインストール
パッケージをインストールするためのコードブロックを生成します
非推奨
代わりに Remark NPM を使用してください。コードを変更せずにそのまま置き換えられ、Fumadocs MDX ではデフォルトで有効になっています。
使い方
npm install fumadocs-docgenremarkInstall は、Sätteri 版が存在しない remark プラグインです。このプラグインを追加し、package-install コードブロックを先に処理してしまう Remark NPM を無効にしてください。
import { remarkInstall } from 'fumadocs-docgen';
import { defineConfig } from 'fumadocs-mdx/config';
export default defineConfig({
mdxOptions: {
remarkNpmOptions: false,
remarkPlugins: [remarkInstall],
},
});必要なコンポーネントを定義します。
import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
import defaultComponents from 'fumadocs-ui/mdx';
import type { MDXComponents } from 'mdx/types';
export function getMDXComponents(components?: MDXComponents) {
return {
...defaultComponents,
Tab,
Tabs,
...components,
} satisfies MDXComponents;
}言語に package-install を指定してコードブロックを作成します。
```package-install
my-package
```
```package-install
npm i my-package -D
```出力
<Tabs items={['npm', 'pnpm', 'yarn', 'bun']}>
<Tab value="npm">...</Tab>
<Tab value="pnpm">...</Tab>
<Tab value="yarn">...</Tab>
<Tab value="bun">...</Tab>
</Tabs>オプション
永続化
Fumadocs UI と併用する場合は、persist オプションで永続化を有効にできます。
import { remarkInstall } from 'fumadocs-docgen';
import { defineConfig } from 'fumadocs-mdx/config';
export default defineConfig({
mdxOptions: {
remarkNpmOptions: false,
remarkPlugins: [[remarkInstall, { persist: { id: 'some-id' } }]],
},
});この場合は、代わりに次のように生成されます。
<Tabs groupId="some-id" persist items={[...]}>
...
</Tabs>How is this guide?
最終更新日
General Translation
Ferry Health
assistant-ui
Inkeep