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 が付与されます。

使い方アンカーリンクをコピー

入力アンカーリンクをコピー

出力アンカーリンクをコピー

永続化アンカーリンクをコピー

このページの内容

使い方

入力

出力

永続化