Remark NPM | Hanzo Docs

Usage

Add the remark plugin.

MDX Compiler

Hanzo Docs MDX

import { compile } from '@mdx-js/mdx';
import { remarkNpm } from '@hanzo/docs/core/mdx-plugins';

await compile('...', {
  remarkPlugins: [remarkNpm],
});

source.config.ts

import { defineConfig } from '@hanzo/docs/mdx/config';

export default defineConfig({
  mdxOptions: {
    remarkNpmOptions: {
      // it is enabled by default, customise it here
    },
  },
});

Define the required components:

Custom

Hanzo Docs UI

mdx-components.tsx

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

mdx-components.tsx

import defaultComponents from '@hanzo/docs/ui/mdx';
import type { MDXComponents } from 'mdx/types';

export function getMDXComponents(components?: MDXComponents): MDXComponents {
  return {
    // it's included by default in `defaultComponents`
    ...defaultComponents,
    ...components,
  };
}

Component
CodeBlockTabs	Accepts a `defaultValue` prop for default value
CodeBlockTabsList	N/A
CodeBlockTab	Accepts a `value` prop
CodeBlockTabsTrigger	Accepts a `value` prop

Input

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

pnpm

yarn

bun

npm i my-package

pnpm add my-package

yarn add my-package

bun add my-package

Persistent

When using with Hanzo Docs UI, you can enable persist the selected value with the persist option.

Hanzo Docs MDX

MDX Compiler

source.config.ts

import { defineConfig } from '@hanzo/docs/mdx/config';

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

import { compile } from '@mdx-js/mdx';
import { remarkNpm, type RemarkNpmOptions } from '@hanzo/docs/core/mdx-plugins';

const remarkNpmOptions: RemarkNpmOptions = {
  persist: {
    id: 'package-manager',
  },
};

await compile('...', {
  remarkPlugins: [[remarkNpm, remarkNpmOptions]],
});

This will generate a persist prop to <CodeBlockTabs />.