CommonMark Steps Usage

Usage

Register the extension:

use League\CommonMark\Environment\Environment;
use League\CommonMark\CommonMarkConverter;
use Zaimea\CommonMark\Steps\StepsExtension;

$environment = new Environment([]);
$environment->addExtension(new StepsExtension());

$converter = new CommonMarkConverter([], $environment);
echo $converter->convert($markdown);

Syntax

::: steps
### Step One
This is some text.

### Step Two
More content here.
:::

Output Example (simplified)

<div class="step" id="steps-xxxx">
    <ol class="relative border-s border-gray-200">
        <li class="mb-10 ms-4">
            <h3 id="steps-xxxx-item-1-title">Step One</h3>
            <div id="steps-xxxx-item-1" role="region" aria-labelledby="steps-xxxx-item-1-title">
                <p>This is some text.</p>
            </div>
        </li>
        ...
    </ol>
</div>

Header Metadata

The first line after ::: steps is treated as an info string.

::: steps warning Installation Guide
### Step A
...
:::

This produces:

  • type = "warning" → CSS class warning
  • Title = Installation Guide → rendered as

Resulting HTML:

<div class="step warning" id="steps-xxxx">
    <h2 class="step-title mb-4 text-xl font-bold">Installation Guide</h2>
    ...
</div>

Styling (optional)

.step {
    @apply mt-6 mb-6;
}
.step ol {
    @apply relative border-s border-gray-200 dark:border-gray-700;
}
.step li {
    @apply mb-10 ms-4;
}
.step h3 {
    @apply text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2;
}

Example: Full Steps Block

::: steps info Installation
### Download
Get the archive from the website.

### Extract
Unzip the downloaded file.

### Install
Run the installer and follow the instructions.
:::

Support

For issues or suggestions: GitHub Issues