Rho Cheatsheet

一页syntax 速查 —— 全部 15 capability 最小例子。打印 / 贴墙 / 嵌 IDE auto-complete 用。详细文档见各 capability 页。

静态视觉块（5）

Callout

> [!INFO]      | [!WARN]    | [!ZEN]      ← Rho native
> [!NOTE]      | [!TIP]     | [!IMPORTANT]
> [!WARNING]   | [!CAUTION]                ← GFM 兼容
> body

详 →

Layout grid + cards

```layout grid cols=N            ← N: 1-6
:::card accent=COLOR              ← blue/red/green/yellow/purple/gray
content
:::
```

详 →

Annotate

```annotate
body text here
---
START-END|COLOR|LABEL              ← 0-based half-open, Unicode codepoint
4-9|red|adjective
10-15|blue|noun
```

详 →

Timeline

```timeline
:::event date=DATE title=TITLE accent=COLOR
body
:::
```

详 →

STL syntax highlight

```stl
[Source] -> [Target] ::mod(key=value, key=value)
# comment
```

详 →

交互块（4）

Tabs

```tabs default=TITLE
:::tab title=TITLE
content
:::
```

详 →

Stepper

```stepper linear=true|false
:::step title=TITLE optional=true|false disabled=true|false
content
:::
```

详 →

```modal trigger="text" width=SIZE
content
```

SIZE: small / medium / large / full 详 →

Interact (controls + template)

```interact namespace NAMESPACE
slider name min max initial step
input name "default"
select name "opt1" "opt2" "opt3"
toggle name <true|false>
button name "label" value
timer name min max step <loop|once|pause|pingpong>
computed name = expression
template <stl|vega-lite|svg>:
  body with {expr} placeholders
```

详 →

Computed + animation（3）

Computed

computed varName = expression

详见 mini DSL。详 →

Timer

timer name min max step mode

mode: loop / once / pause / pingpong 详 →

SVG scenes

template svg:
<svg viewBox="0 0 100 100">
  <element attr="{expr}" />
</svg>

允许：rect / circle / line / path / text / g / defs / animate 禁止：script / foreignObject / on* / external href 详 →

Vega-Lite live chart

template vega-lite:
{
  "data": {"sequence": {"start": 0, "stop": 10, "step": 0.1, "as": "x"}},
  "transform": [{"calculate": "sin({freq} * datum.x)", "as": "y"}],
  "mark": "line",
  "encoding": {"x": {"field": "x"}, "y": {"field": "y", "type": "quantitative"}}
}

数字字段用 {var}（不带引号）
字符串字段用 "{var}"（带引号）详 →

Composition（2）

Shared state (namespace)

\```interact namespace finance
slider rate 0 0.15 0.05 0.01
\```

\```interact namespace finance
template stl: [Rate] -> [{rate}]      ← 复用 finance namespace
\```

详 →

Nested DSL

任意结构容器（callout / layout / tabs / stepper / modal / timeline）可包任意 DSL 块——含其他容器 + interact。不嵌：tabs in tabs / stepper in stepper / interact in interact（用 namespace 替）。详 →

Mini DSL（在 `{}` 占位符里）

算术 / 比较 / 逻辑

+  -  *  /  %  **
==  !=  <  >  <=  >=
&&  ||  !
cond ? a : b               ← 三元（替代 if/else）

函数

abs sign min max
pow sqrt exp log log2 log10
sin cos tan asin acos atan atan2
floor ceil round trunc
length upper lower substring
parseFloat parseInt toString

常数

pi   = 3.14159...
e    = 2.71828...

格式化

{x:.2f}       2 位小数
{x:.0f}       整数
{x:.3e}       科学记数
{x:%}         百分号（自动 ×100）
{x:>10.2f}    右对齐宽 10 + 2 位小数
{{   }}       字面 { }

禁止（不是 JS）：

Math.X    Number.X    eval    Function
if/else 语句    for/while    function 定义
fetch / DOM / window / async

详 →

6 色调色板（callout / layout card / annotate / timeline event）

blue    red    green    yellow    purple    gray

Plain-text fallback

每个 Rho DSL 在不支持 reader 里降级为：

Callout → 普通 blockquote + [!TYPE] 字面量
其他 → 代码块 / ::: 字面量 + 内部 markdown 正常渲染

测试：把 .md 推到 GitHub web 看——任何内容应可读。详 →

常踩坑速记

slider 参数顺序: name min max initial step（min ≤ initial ≤ max）
input 总是字符串——做数学要 parseFloat
namespace 大小写敏感 + per-page scope
跨块共享 → namespace；不要重复声明
mini DSL 不是 JS：用 sin(x) 不用 Math.sin
fenced code 嵌套：内外层反引号数不同
SVG: 总是设 viewBox

详 →