Writing & Markdown
Steps
Display numbered step-by-step sequences for tutorials and how-to guides using the Hugo steps shortcode.
Usage
Use Markdown level-3 headings (###) inside the steps shortcode to define each step:
{{% steps %}}
### Install dependencies
Run the following command:
```bash
npm install
```
### Configure your site
Edit `config.yaml` with your settings.
### Deploy
Push to your repository and deploy.
{{% /steps %}}The steps shortcode uses the {{% %}} (percent) syntax, which processes inner content as Markdown.
Example Output
The shortcode renders each ### heading as a numbered step with a visual step indicator, making tutorial content easy to follow.
Was this page helpful?
Cards
Create navigation and informational card grids with links, icons, and descriptions using the Hugo cards shortcode.
Toggles
Create collapsible toggle blocks for FAQs, solutions, and hidden content using the Hugo spoiler shortcode.
From the makers of
© 2026 Lore Labs.