Markdown It Steps

Appearance

Markdown It StepsA VitePress Plugin

Define Your Steps 👣

  1. Install this plugin:

    sh
    npm install -D markdown-it-steps
    sh
    pnpm add -D markdown-it-steps
    sh
    yarn add -D markdown-it-steps
    sh
    bun add -D markdown-it-steps

  2. Update your vitepress config.js:

    js
    import { defineConfig } from 'vitepress'
import markdownSteps from 'markdown-it-steps'

// https://vitepress.dev/reference/site-config
export default defineConfig({
  title: "My Awesome Project",
  markdown: {
    config: (md) => {
      md.use(markdownSteps); 
    }
  },
})

  3. Update your .vitepress/theme/index.js:

    js
    // https://vitepress.dev/guide/custom-theme
import DefaultTheme from 'vitepress/theme'
import './style.css'
import 'markdown-it-steps/style.css'

export default DefaultTheme

  4. Define your steps:

    markdown
    :::steps
1. Apple
    1. Banana
        1. Cherry
        2. Date
        3. Elderberry
    2. Fig
    3. Grape
2. Honeydew
3. Kiwi
:::

  5. See the result:

    1. Apple
      1. Banana
        1. Cherry
        2. Date
        3. Elderberry
      2. Fig
      3. Grape
    2. Honeydew
    3. Kiwi