Remark NPM

使用方式

Remark NPM 是一個 remark 外掛，Fumadocs MDX 預設已啟用。您可以透過 remarkNpmOptions 傳入選項。

請定義所需的元件：

components/mdx.tsx

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;
}

輸入

建立語言指定為 npm 的程式碼區塊。

```npm
npm i my-package
```

```npm
npm i my-package -D
```

package-install 程式碼區塊也同樣適用。您只需提供套件名稱 (例如 my-package) ，它就會將其轉換為 npm install 指令。

輸出

此外掛應會產生以下結構。

<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

持久保存

搭配 Fumadocs UI 使用時，您可以透過 persist 選項持久保存所選取的值。

source.config.ts

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

export default defineConfig({
  mdxOptions: {
    remarkNpmOptions: {
      persist: {
        id: 'package-manager',
      },
    },
  },
});

這會為 <CodeBlockTabs /> 產生 persist prop。

使用方式複製錨點連結

輸入複製錨點連結

輸出複製錨點連結

持久保存複製錨點連結

本頁目錄

使用方式

輸入

輸出

持久保存