Steps

Numbered step-by-step instructions with a visual timeline

Steps

Steps display numbered instructions connected by a vertical timeline. Ideal for tutorials, installation guides, and onboarding flows.

Basic Usage

steps

  1. Install dependencies

    Run the following command in your project root:

    composer install
    Bash

  2. Start the development server

    php -S localhost:8000 -t public
    Bash

  3. Open your browser

    Navigate to http://localhost:8000/coderoo/ to see your site.

Syntax:

:::steps
1. **Step Title**

   Step content with full markdown support.

2. **Next Step**

   More instructions here.
:::
Markdown

Rich Content in Steps

Each step supports full markdown including code blocks, asides, lists, and links:

steps

  1. Create a new course directory

    mkdir content/courses/my-course
    Bash

  2. Add an index file

    Create index.md with frontmatter:

    ---
title: "My New Course"
description: "A course about something great"
---
    YAML

  3. Add lesson files

    Use numeric prefixes to control ordering:

    • 01-introduction.md
    • 02-getting-started.md
    • 03-advanced-topics.md

Best Practices

  • Use bold for step titles to create clear visual anchors
  • Keep each step focused on a single action
  • Include code blocks for commands the reader needs to run
  • Add tips or warnings inside steps when relevant