套件安裝

已棄用

請改用 Remark NPM。它可以直接取代本功能，且在 Fumadocs MDX 中已預設啟用。

使用方式

npm install fumadocs-docgen

remarkInstall 是 remark 外掛，目前沒有 Sätteri 版本。請加入此外掛，並停用會搶先處理 package-install 程式碼區塊的 Remark NPM：

source.config.ts

import { remarkInstall } from 'fumadocs-docgen';
import { defineConfig } from 'fumadocs-mdx/config';

export default defineConfig({
  mdxOptions: {
    remarkNpmOptions: false,
    remarkPlugins: [remarkInstall],
  },
});

定義所需的元件。

components/mdx.tsx

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 選項啟用持久保存。

source.config.ts

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>

使用方式複製錨點連結

輸出複製錨點連結

選項複製錨點連結

持久保存複製錨點連結

本頁目錄

使用方式

輸出

選項

持久保存