Markdown Steps

Adds steps syntax support to VSCode's markdown preview.

Overview

The steps plugin converts @N.-prefixed headers and >-prefixed blockquote bodies into styled ordered step lists. Depth is controlled by repeating the @ character.

<ol class="markdown-steps">
  <li class="markdown-steps-item" data-step="1">
    <p class="markdown-steps-title">Step title</p>
    <div class="markdown-steps-body">...</div>
  </li>
</ol>

Syntax

Write @1. Title lines followed by > blockquote bodies for each step:

@1. Install dependencies

> ```sh
> npm install
> ```
>
> @2. Configure your environment
> Copy `.env.example` to `.env` and fill in your values.
> @3. Start the development server
>
> ```sh
> npm run dev
> ```

Step titles are optional

Steps can have no title — just a body:

@1.

> First thing to do.
> @2.
> Second thing to do.

Nested steps

Use @@ to nest steps inside a parent step:

@1. Set up the project
@@1. Create a new directory

> ```sh
> mkdir my-project && cd my-project
> ```
>
> @@2. Initialize git
>
> ```sh
> git init
> ```
>
> @2. Install dependencies
>
> ```sh
> npm install
> ```

Styling

This extension ships default styles for the rendered output in the preview. To customize them, point VSCode's markdown.styles setting at your own CSS file:

// .vscode/settings.json
{
  "markdown.styles": ["./my-preview-styles.css"]
}

About

Part of Markdown Preview Extended Syntax — a pack of Markdown preview syntax extensions you can install all at once.

Powered by @mirrordown/mdit-steps · Source on GitHub.