RhoMD Docs Download

Timeline

把有时间顺序的事件渲染成垂直时间线——左右交替的事件卡 + 中央时间轴。 用于项目历史、个人里程碑、产品 roadmap、历史回顾、个人简历经历段等。

When to use

  • ✅ 项目 / 产品历史 —— 从启动到现在的关键节点
  • ✅ roadmap —— 已完成 + 计划中的版本节点
  • ✅ 个人里程碑 —— 简历、自传、某领域的学习历程
  • ✅ 历史事件梳理 —— 一个主题下的事件链
  • ✅ 会议 / 活动议程 —— 早 9:00 → 晚 18:00 的时间块
  • ❌ 实时数据 / 持续流 —— 用 chart 而不是 timeline
  • ❌ 没有时间维度的并列项 —— 用 Layout 或 Stepper

Basic syntax

\```timeline
:::event date=2026-01-01 title="项目启动"
完成 v0.0 spec 起草，确立 plain-text fallback 原则。
:::

:::event date=2026-03-15 title="v0.6 发布"
新增 SVG 场景能力，可写声明式动画。
:::

:::event date=2026-05-14 title="Brand 锁定"
品牌名定为 **Rho**，域名 rho.md 入手。
:::
\```

渲染：中央一条垂直时间轴；事件卡片左右交替贴在轴两侧；每个 event 顶部显示 date + title，下方是 body 内容。

All options

Block-level: ```timeline

无必须 option。可选的有（视 reader impl）：

  • order=asc / order=desc —— 排序方向（默认按文档顺序）
  • axis=center / axis=left —— 轴位置（默认 center）

Event-level: :::event

Option Type Default Purpose
date string (必填) 时间标签。任意字符串——2026-01-01 / Q1 2026 / 三月初 / 09:00 都行。Rho 不解析时间，原样显示
title string "" 标题，醒目大字。建议短（< 25 字符）
accent enum blue 该 event 的 accent 颜色（同 6 色调色板）

date 和 title 都是字符串。值含空格请加引号：title="v0.6 发布"。

Examples

Example 1：项目里程碑

\```timeline
:::event date=2026-01-01 title="项目启动" accent=gray
完成 v0.0 spec 起草。
:::

:::event date=2026-02-10 title="v0.3 发布" accent=blue
12 项基础能力（callout / layout / tabs / stepper / 等）齐备。
:::

:::event date=2026-04-22 title="v0.5 发布" accent=blue
新增 timer 自动播放动画。
:::

:::event date=2026-05-08 title="v0.6 发布" accent=green
新增 SVG 声明式场景。15 项能力齐备。
:::

:::event date=2026-05-14 title="Brand 锁定 → Rho" accent=purple
品牌定为 **Rho**（ρ），域名 rho.md 已购。
:::
\```

渲染：5 个事件按时间顺序展开，accent 色编码版本性质：灰色（启动）/ 蓝色（常规版本）/ 绿色（重要版本）/ 紫色（特殊事件）。

Example 2：个人简历经历段

\```timeline
:::event date="2020-2022" title="A 公司 - 后端工程师"
- 主导支付系统 v2 重构
- 团队从 3 人扩到 8 人
:::

:::event date="2022-2024" title="B 公司 - 技术负责人"
- 从 0 搭起数据平台
- 带领团队拿下年度技术创新奖
:::

:::event date="2024-now" title="独立咨询"
专注 AI / SaaS 领域早期产品的技术架构咨询。
:::
\```

渲染：3 段工作经历用 timeline 视觉化。比传统 bullet list 更易扫读时序。

Example 3：会议议程

\```timeline
:::event date="09:00" title="开场" accent=gray
主持人介绍 + 议程概览（15 分钟）
:::

:::event date="09:15" title="Keynote: AI 时代的 Markdown" accent=blue
主讲：wuko（45 分钟）
:::

:::event date="10:00" title="茶歇" accent=gray
:::

:::event date="10:30" title="Panel: 工具的未来" accent=purple
3 位嘉宾对谈（60 分钟）
:::

:::event date="11:30" title="结束 + 自由交流" accent=gray
:::
\```

渲染：单日议程被拍扁成 timeline。读者一眼看清"什么时候发生什么"。

Example 4：roadmap（已完成 + 计划中）

\```timeline
:::event date="2026 Q1" title="✅ v0.3 - 基础 12 能力" accent=green
已发布。callout / layout / tabs / 等齐备。
:::

:::event date="2026 Q2" title="✅ v0.6 - 动画 + SVG" accent=green
已发布。+computed / timer / svg = 15 能力。
:::

:::event date="2026 Q3" title="🔨 cloud.rho.md MVP" accent=yellow
进行中。share link + OG preview + 30 个 demo seed。
:::

:::event date="2026 Q4" title="🔮 Rho AI" accent=blue
计划中。LLM 直接生成 Rho format 内容。
:::

:::event date="2027 Q1" title="🔮 Rho graph" accent=purple
计划中。STG 知识图谱 + 跨文档语义网络。
:::
\```

渲染：roadmap 通过 emoji + accent 色双重编码状态：✅ 已完成（绿）/ 🔨 进行中（黄）/ 🔮 计划中（蓝/紫）。

Plain-text fallback behavior

:::event date=2026-01-01 title="项目启动"
完成 v0.0 spec 起草。
:::

→ 在不支持 directive 的 reader 里，:::event date=... title=... 显示为字面量行；event body 内的 markdown（粗体、列表、链接）正常渲染。读者能完整看到所有事件 + 日期 + 内容，只是失去时间轴视觉编码。

具体各 reader：

Reader 渲染效果
Rho 完整时间轴 + 左右交替 event 卡 + accent 色
GitHub web :::event ... 字面量 + body 正常 markdown
Obsidian 同上
VS Code 默认预览 同上
cat / less plain text

信息无损——日期、标题、内容都看得到，只是不可视化。

Common pitfalls

1. date 含空格忘记加引号

:::event date=2026 Q1 title="v0.3 发布"     ← ❌ "Q1" 被解析成下一个 modifier
:::event date="2026 Q1" title="v0.3 发布"   ← ✅

任何含空格的值必须加引号。modifier 解析按 shell-style 切分。

2. event 顺序乱

\```timeline
:::event date=2026-05-14
新事件
:::
:::event date=2026-01-01
旧事件
:::
\```

→ Rho 按文档顺序渲染（不主动排序），所以会显示成"新 → 旧"。 写 timeline 时手动按时间顺序排列。或在 block header 加 order=asc 让 reader 自动排（如果你的日期是可解析格式）。

3. event 太多（> 15）

时间线在桌面 ~5-15 个 event 视觉舒适。超过 15 个屏幕滚动太长，读者迷失。 解决：

  • 聚类：把相邻多个 event 合成一个（"2024 Q1: 多次小迭代"）
  • 分段：按年份 / 阶段拆成多个 timeline 块
  • 改 stepper：如果是"教学步骤"性质，Stepper 一次只显示一步更合适

4. body 太长

:::event date=2026-05-14 title="Brand 锁定"
非常非常非常长的一段，写了 500 字描述这个事件的来龙去脉，
含 5 个段落、3 个列表、2 段引用……
:::

→ 单个 event 卡片变得超高，破坏时间线节奏。 event body 应保持简短（< 100 字 / 1-2 段）。需要详细内容时：

  • body 写概要 + 链接到详细 doc
  • 或包到 Modal 里点击展开

5. 缺 ::: 关闭

\```timeline
:::event date=2026-01-01 title="A"
内容 A
                  ← ❌ 缺 :::
:::event date=2026-02-01 title="B"
内容 B
:::
\```

→ 整个 timeline 解析失败。每个 :::event 必须配对 ::: 关闭。

6. event 的 title 用 emoji 但不同 reader 渲染不一致

:::event date=2026 title="✅ Done"

✅ 大多 reader 都渲染 emoji 正常。但自定义 emoji（Slack-style :custom_emoji: / Discord <:name:id>）在 Rho 不识别。只用标准 Unicode emoji。

See also