Steps

Use steps for a procedure the reader follows in order. If the order does not matter, use a list.

Each ## heading inside :::steps starts a numbered step, and everything up to the next ## belongs to that step.

:::steps
## Install the package
Require Vellum with Composer.

## Publish starter docs
Run `php artisan vellum:install`.
:::

Blocks inside a stepCopied

A step can contain any Markdown, including code, callouts, tables and nested lists. The connecting line runs the full height of each step, so a long step still reads as one unit.

composer require jimmyverburgt/vellum

php artisan vellum:install

In the browserCopied

The line between the numbers fills as the reader moves through the steps, and each number fills once its step is reached. The same numbers in the table of contents fill with them, so both show how far through the procedure the reader is.

While a long step is read, its number stays in view at the top of the window. Clicking it scrolls back to the start of that step. Without JavaScript the numbers still link to their steps, and nothing fills.

Rules worth knowingCopied

Only ## starts a step. ### and lower headings stay ordinary headings inside the current step, which makes them useful for dividing a long step into parts.

Content before the first ## is rendered as it is, outside any step. A sentence of setup can go there, although it usually reads better above the directive.

Step numbers are generated by counting the ## headings in the block, starting at one. Do not number the headings yourself: ## 1. Install produces step 1 with the title "1. Install".

A steps block belongs to the section it sits in. Its step titles are rendered one heading level below that section's heading, so they nest under it in the table of contents and in the page outline screen readers use, and headings inside a step move down with them. A steps block before any ## heading keeps its step titles at h2. You still start each step with ##.