---
title: Remark Steps
description: Generate steps from headings
---

## Usage

Add the remark plugin.

```ts tab="MDX Compiler"
import { compile } from '@mdx-js/mdx';
import { remarkSteps } from 'fumadocs-core/mdx-plugins/remark-steps';

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

```ts title="source.config.ts" tab="Fumadocs MDX"
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:

```md tab="Using Tag"
# Heading 1 [step]

## Sub Heading 1 [step]

## Sub Heading 2 [step]

# Heading 2 [step]
```

```md tab="Using Number"
# 1. Heading 1

## 1. Sub Heading 1

## 2. Sub Heading 2

# 2. Heading 2
```

### Output

The following structure should be generated by the plugin.

```mdx
<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>
```
