Fumadocs

Remark Steps

Generate steps from headings

Usage

Add the remark plugin.

import { compile } from '@mdx-js/mdx';
import { remarkSteps } from 'fumadocs-core/mdx-plugins/remark-steps';

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

Input

Create step headings:

# Heading 1 [step]

## Sub Heading 1 [step]

## Sub Heading 2 [step]

# Heading 2 [step]

Output

The following structure should be generated by the plugin.

<div className="fd-steps">
  <div className="fd-step">
    # Heading 1
    <div className="fd-steps">
      <div className="fd-step">## Sub Heading 1</div>
      <div className="fd-step">## Sub Heading 2</div>
    </div>
  </div>
  <div className="fd-step"># Heading 2</div>
</div>

How is this guide?

Last updated on

On this page