5-Minute Tour of Rho

5 分钟扫完 Rho 的 15 项能力——每项一段最小源、一句"渲染后是什么样"。看完你会有一张完整的心智地图：知道 Rho 能做什么、不能做什么、什么时候用哪个。想看活的渲染？打开 Rho MD，把下面的代码贴进一个 .md 文件。

静态视觉块（5 项）

不需要交互、不需要 hydration——build 时就渲染好。

1. Callout — 信息高亮

> [!INFO]
> 这是一段提示信息

> [!WARNING]
> 这是警告

> [!ZEN]
> 这是洞察 / 顿悟（Rho 扩展类型）

渲染：左侧带色彩 bar 的高亮块，配图标。INFO 蓝、WARNING 橙、ZEN 绿。GitHub-flavored alerts ([!NOTE] / [!TIP] / [!IMPORTANT] / [!CAUTION]) 也都支持。

2. Layout grid + cards — 多列卡片布局

```layout grid cols=3
:::card accent=blue
**功能 A**
描述功能 A 做什么
:::

:::card accent=red
**功能 B**
描述功能 B 做什么
:::

:::card accent=green
**功能 C**
描述功能 C 做什么
:::
```

渲染：3 列等宽卡片并列，每张顶部有彩色 accent bar（6 色可选：blue / red / green / yellow / purple / gray）。窄屏自动堆栈成单列。

3. Annotate — 同行多色标注

```annotate
The quick brown fox jumps over the lazy dog
---
4-9|red|形容词
10-15|blue|名词
16-21|green|动词
```

渲染：原句不变，但 quick、brown、jumps 三个词分别被红/蓝/绿下划线标记，悬停显示标签。适合语法分析、代码 walkthrough、合同条款逐字解读。

4. Timeline — 垂直事件时间线

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

:::event date=2026-03-15 title=v0.6 发布
SVG 场景能力上线
:::

:::event date=2026-05-14 title=Brand 锁定
Rho 品牌确立
:::
```

渲染：左右交替的事件卡片，中间一条垂直时间轴串起所有节点。每个 event 的 date / title 在轴上，body 在卡片内。

5. STL syntax highlight — 语义张力语言着色

```stl
[REST_API] -> [HTTP_Layer] ::mod(rule="definitional", confidence=1.0, description="REST 建立在 HTTP 语义之上")
[REST_API] -> [Statelessness] ::mod(action="requires", confidence=0.99)
[Statelessness] -> [Horizontal_Scaling] ::mod(action="enables", confidence=0.95)
```

渲染：6 色 token 高亮——锚点 [X] 一色、箭头 -> 一色、modifier key 一色、value 一色、特殊关键字一色、注释一色。让 STL 知识图谱语句在 markdown 里像代码一样可读。

交互块（5 项）

需要 hydration——读者打开 page 后变成可点击 / 可拖拽 / 可输入的。

6. Tabs — 多视图切换

```tabs
:::tab title=JavaScript
\```js
console.log('hello');
\```
:::

:::tab title=Python
\```py
print('hello')
\```
:::

:::tab title=Rust
\```rust
println!("hello");
\```
:::
```

渲染：顶部 tab bar，点击切换内容区。第一个 tab 默认激活。

7. Stepper — 分步引导

```stepper
:::step title="安装 Rho"
\```bash
brew install rho
\```
:::

:::step title="打开 .md 文件"
File → Open → 选你的 .md
:::

:::step title="开始写"
直接在编辑器里写
:::
```

渲染：顶部进度条 + Prev/Next 按钮，一次显示一步，提供清晰的"教程式"阅读体验。

```modal trigger="查看技术细节"
这里是隐藏的深度内容——
- 详细的算法说明
- 边界条件
- 性能分析
```

渲染：行内出现一个 "查看技术细节" 链接，点击弹出居中遮罩浮层显示内容。适合"主线之外的深度解释"。

9. Interact — 滑块/输入驱动文本模板

```interact
slider weight 40 120 70 1
slider height 1.4 2.1 1.7 0.01
template stl:
[BMI] -> [{(weight / (height * height)):.1f}] ::mod(weight="{weight} kg", height="{height} m")
```

渲染：两个滑块（weight 40-120，height 1.4-2.1），底下实时输出一行 STL，BMI 数字随你拖滑块更新。

控件类型还有：input / select / toggle / button。

10. Interact + Vega-Lite — 滑块驱动 live chart

```interact
slider freq 1 10 3 0.1
slider amp 0.1 2 1 0.1
template vega-lite:
{
  "data": {"sequence": {"start": 0, "stop": 6.28, "step": 0.05, "as": "t"}},
  "transform": [{"calculate": "{amp} * sin({freq} * datum.t)", "as": "y"}],
  "mark": "line",
  "encoding": {
    "x": {"field": "t", "type": "quantitative"},
    "y": {"field": "y", "type": "quantitative", "scale": {"domain": [-2, 2]}}
  }
}
```

渲染：两个滑块控制频率和振幅，下方一张正弦波 chart 实时随之变形。Observable notebook 级的体验。

计算 + 动画（3 项）

让交互不只是"显示输入值"，而能真正算 + 动起来。

11. Computed — 派生值计算

```interact
slider rate 0 0.15 0.05 0.01
slider years 1 30 10 1
slider principal 1000 100000 10000 1000
computed compound = principal * pow(1+rate, years)
computed gain = compound - principal
template stl:
[本金] -> [{principal:.0f}] ::mod(rate="{(rate*100):.1f}%", years="{years} 年")
[复利终值] -> [{compound:.0f}]
[净收益] -> [{gain:.0f}]
```

渲染：三个滑块（利率 / 年限 / 本金），实时显示三行计算结果。computed 用一个 mini DSL（不是 JS！）做声明式表达式：+ - * / pow sqrt sin cos pi 等运算可用。

12. Timer — 自动播放动画

```interact
timer t 0 6.28 0.05 loop
template vega-lite:
{
  "data": {"sequence": {"start": 0, "stop": 6.28, "step": 0.05, "as": "x"}},
  "transform": [{"calculate": "sin(datum.x + {t})", "as": "y"}],
  "mark": "line",
  "encoding": {"x": {"field": "x"}, "y": {"field": "y", "type": "quantitative", "scale": {"domain": [-1.5, 1.5]}}}
}
```

渲染：一条正弦波在屏幕上无限向左流动，像示波器。timer t 0 6.28 0.05 loop = 从 0 到 6.28 每 50ms 增 0.05，到顶后 loop 回 0。配 pause、once、pingpong 多种模式。

13. SVG scenes — 声明式可缩放矢量场景

```interact
slider angle 0 360 0 1
template svg:
<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="none" stroke="#888" stroke-width="0.5"/>
  <line x1="50" y1="50"
        x2="{50 + 40*cos(angle*pi/180):.2f}"
        y2="{50 + 40*sin(angle*pi/180):.2f}"
        stroke="red" stroke-width="2"/>
  <circle cx="{50 + 40*cos(angle*pi/180):.2f}"
          cy="{50 + 40*sin(angle*pi/180):.2f}"
          r="3" fill="red"/>
</svg>
```

渲染：一个圆，圆心射出一条红线指向圆周上的一点，拖 angle 滑块红线绕圈转。SVG 内嵌 mini DSL 表达式直接在属性里求值。安全：内置 SVG sanitizer，剥离 <script> / 事件属性 / 外部 URL。

配 timer 即得自动旋转动画；配多组 sliders 可组装弹簧 / 摆 / 行星 / 电路任何 2D 物理仿真。

组合模式（2 项）

把上面的能力组合起来——这才是 Rho 的全部威力。

14. Shared state — namespace 跨块共享变量

```interact namespace finance
slider rate 0 0.15 0.05 0.01
slider years 1 30 10 1
```

不同位置插入文字——

复利倍数计算：

```interact namespace finance
computed compound = pow(1+rate, years)
template stl:
[复利倍数] -> [{compound:.2f}x]
```

终值图：

```interact namespace finance
template vega-lite:
{
  "data": {"sequence": {"start": 1, "stop": 31, "step": 1, "as": "y"}},
  "transform": [{"calculate": "pow(1+{rate}, datum.y)", "as": "v"}],
  "mark": "line",
  "encoding": {"x": {"field": "y"}, "y": {"field": "v", "type": "quantitative"}}
}
```

渲染：第一块的两个滑块同时驱动后面两块（一段计算文字 + 一张曲线图）。多个 interact 块通过 namespace finance 共享同一组变量。

15. Nested DSL — DSL 套 DSL

```layout grid cols=2

:::card accent=blue
> [!INFO]
> 这是 callout 在 layout card 里
:::

:::card accent=red
\```interact
slider x 0 10 5 1
template stl:
[当前值] -> [{x}]
\```
:::
```

渲染：左卡片里有蓝色 callout，右卡片里有可拖动的 slider + 实时文本输出。任何块都可嵌套任何块——callout in stepper、stepper with interact、interact in modal、modal in tabs ……组合无上限。

接下来

你是……	推荐入口
想动手试一个完整例子	→ Your first interactive .md
还没装 Rho desktop app	→ Install Rho app
上面某个能力想深挖	→ Writer's Guide — 每个能力一篇专门页
想看 30+ 真实场景 demo	→ Examples gallery
LLM / AI 集成方	→ Rho AI / LLM Guide