Remark Admonition | Hanzo Docs

In Docusaurus, there's an Admonition syntax.

For people migrating from Docusaurus, you can enable this remark plugin to support the Admonition syntax.

Usage

It requires remark-directive to work.

npm

pnpm

yarn

bun

npm i remark-directive

pnpm add remark-directive

yarn add remark-directive

bun add remark-directive

Configure both plugins in your config.

Hanzo Docs MDX

MDX Compiler

source.config.ts

import remarkDirective from 'remark-directive';
import { remarkDirectiveAdmonition } from '@hanzo/docs/core/mdx-plugins';
import { defineConfig } from '@hanzo/docs/mdx/config';

export default defineConfig({
  mdxOptions: {
    remarkPlugins: [remarkDirective, remarkDirectiveAdmonition],
  },
});

import remarkDirective from 'remark-directive';
import { remarkDirectiveAdmonition } from '@hanzo/docs/core/mdx-plugins';
import { compile } from '@mdx-js/mdx';

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

Example

Input

Output

:::tip[This is a `title`]

Hello World

:::

:::warning

Hello World

:::

<CalloutContainer type='info'>
  <CalloutTitle>This is a `title`</CalloutTitle>
  <CalloutDescription>

    Hello World

  </CalloutDescription>
</CalloutContainer>

<CalloutContainer type='warning'>
  <CalloutDescription>

    Hello World

  </CalloutDescription>
</CalloutContainer>

When to use

We highly recommend using the JSX syntax of MDX instead. It's more flexible, some editors support IntelliSense in MDX files.

<Callout type='warn'>

Hello World

</Callout>