Steps

Step container plugin for creating step-by-step guided content in Markdown.

Installation

pnpm

pnpm add vitepress-plugin-steps

npm

npm install vitepress-plugin-steps

bun

bun add vitepress-plugin-steps

deno

deno add vitepress-plugin-steps

yarn

yarn add vitepress-plugin-steps

Usage

vitepress-tuck Mode Recommended

.vitepress/config.ts

import { defineConfig } from 'vitepress-tuck'
import steps from 'vitepress-plugin-steps'

export default defineConfig({
  plugins: [steps()],
})

Learn more about vitepress-tuck

Native Mode

.vitepress/config.ts

import { defineConfig } from 'vitepress'
import { stepsMarkdownPlugin } from 'vitepress-plugin-steps'

export default defineConfig({
  markdown: {
    config: (md) => {
      md.use(stepsMarkdownPlugin)
    },
  },
})

Also import the styles in the theme:

.vitepress/theme/index.ts

import 'vitepress-plugin-steps/style.css'

Syntax

Use the ::: steps container to wrap step content, with each step starting from an unordered/ordered list item:

::: steps

- Step One

  Description for step one

- Step Two

  Description for step two

- Step Three

  Description for step three, supports heading syntax

:::

Rendered Result:

• Step One

  Description for step one

• Step Two

  Description for step two

• Step Three

  Description for step three, supports heading syntax