584 字
3 分钟
页面浏览--访问次数--
Markdown 步骤引导

步骤引导把普通的有序列表渲染成带序号圆圈与竖向连线的流程图,语义结构仍是标准 <ol>/<li>,序号圆圈由 CSS 伪元素绘制。

带标题与起始序号#

效果

快速上手三步曲

  1. 安装环境依赖

    确保本地 Node.js 版本满足 >= 22.12,并安装 pnpm 包管理器。

  2. 克隆并初始化仓库

    Terminal window
    git clone https://github.com/LyraVoid/Shirone.git
    cd Shirone
    pnpm install
  3. 启动本地开发服务器

    运行 pnpm dev 并在浏览器中访问 http://localhost:4321。

源码(容器名与花括号之间不能有空格;步骤正文与嵌套代码块缩进 3 个空格)

:::steps{title="快速上手三步曲" start=1}
1. **安装环境依赖**
确保本地 Node.js 版本满足 `>= 22.12`,并安装 pnpm 包管理器。
2. **克隆并初始化仓库**
```bash
git clone https://github.com/LyraVoid/Shirone.git
cd Shirone
pnpm install
```
3. **启动本地开发服务器**
运行 `pnpm dev` 并在浏览器中访问 `http://localhost:4321`。
:::

方括号标题写法#

效果

内容仓改一篇稿子的流程

  1. 改 content/posts/ 下的 Markdown
  2. 本地 pnpm content:sync 后预览
  3. 提交推送到内容仓,等待站点自动重建

源码

:::steps[内容仓改一篇稿子的流程]
1. 改 `content/posts/` 下的 Markdown
2. 本地 `pnpm content:sync` 后预览
3. 提交推送到内容仓,等待站点自动重建
:::

参数#

参数类型默认值说明
titlestring空标题,最长 200 字符
start正整数1起始序号
:::steps[标题]——方括号标题写法,与 title= 等价

说明#

  • 容器只接受一个有序列表;传入无序列表、多段文本等会把整块保留为普通 Markdown;
  • 每个步骤内部可以自由嵌套段落、代码块、图片与提示容器;
  • 视觉序号带 aria-hidden,屏幕阅读器读到的是标准列表语义;
  • 纯 SSR 输出,无客户端 JavaScript。

第 13 篇,共 23 篇本文属于系列

Markdown 步骤引导
https://www.klucen.cn/posts/syntax/markdown-steps/
作者
KLucen
发布于
2025-12-14
许可协议
CC BY-NC-SA 4.0

分享文章

生成精美分享图或复制链接,与更多人分享本文。

继续阅读

沿着主题读

基于共同的标签与分类

换条路线

从其他文章中稳定抽取

评论

正在加载评论...

最后更新于 ,距今已过 301 天

部分内容可能已过时