9f99ae3ca7
* docs: add markdown-basic en * docs: add markdown-extensions en * docs: add markdown-icons en * docs: add markdown-mark en , change file structure * docs: update usage * docs: add to markdown-caniuse en * docs: add en docs markdown - import files * docs: add en docs markdown - collapse * chore: fix package lock file --------- Co-authored-by: pengzhanbo <volodymyr@foxmail.com>
78 lines
895 B
Markdown
78 lines
895 B
Markdown
---
|
|
title: Steps
|
|
createTime: 2025/03/24 20:10:59
|
|
icon: streamline:steps-number
|
|
permalink: /en/guide/markdown/steps/
|
|
---
|
|
|
|
## Overview
|
|
|
|
Sometimes, you need to display content in progressive steps. You can achieve this using the `steps` container.
|
|
|
|
## Syntax
|
|
|
|
Within the `steps` container, use ordered (or unordered) lists to represent steps. You can use any Markdown syntax inside the container.
|
|
|
|
````md
|
|
::: steps
|
|
|
|
1. Step 1
|
|
|
|
Related content
|
|
|
|
2. Step 2
|
|
|
|
Related content
|
|
|
|
:::
|
|
````
|
|
|
|
## Example
|
|
|
|
Input:
|
|
|
|
````md
|
|
:::: steps
|
|
1. Step 1
|
|
|
|
```ts
|
|
console.log('Hello World!')
|
|
```
|
|
|
|
2. Step 2
|
|
|
|
Here is the content related to step 2
|
|
|
|
3. Step 3
|
|
|
|
::: tip
|
|
Hint container
|
|
:::
|
|
|
|
4. End
|
|
::::
|
|
````
|
|
|
|
Output:
|
|
|
|
:::: steps
|
|
|
|
1. Step 1
|
|
|
|
```ts
|
|
console.log('Hello World!')
|
|
```
|
|
|
|
2. Step 2
|
|
|
|
Here is the content related to step 2
|
|
|
|
3. Step 3
|
|
|
|
::: tip
|
|
Hint container
|
|
:::
|
|
|
|
4. End
|
|
::::
|