/

Remark Steps

Generate steps from headings

Usage

Remark Steps is a remark plugin. Add it to your config:

source.config.ts

import { defineConfig } from 'fumadocs-mdx/config';
import { remarkSteps } from 'fumadocs-core/mdx-plugins/remark-steps';

export default defineConfig({
  mdxOptions: {
    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

Usage Input Output

General Translation