T11d 代码 Tab 切换冒烟测试
T11d 渲染验证。展示
tabshortcode 与代码块组合时的常见三种场景。 如果切换 tab 后代码块没有跟随切换,说明 tab.css 的:checked+label+.shortcode-tab-item选择器没生效。
1. 跨平台命令切换(macOS / Windows / Linux)
最常见的用法 —— 同一个目的,不同 shell 给不同命令。
podman compose exec openclaw-gateway \
node dist/index.js channels login --channel feishu
podman compose exec openclaw-gateway `
node dist/index.js channels login --channel feishu
sudo podman compose exec openclaw-gateway \
node dist/index.js channels login --channel feishu
使用配套 APP 扫描生成的二维码进行后续配置即可。
2. 多语言代码示例切换(同一算法)
适合「同一个概念,不同语言怎么写」的科普场景。
def gcd(a: int, b: int) -> int:
while b:
a, b = b, a % b
return a
function gcd(a: number, b: number): number {
while (b !== 0) {
[a, b] = [b, a % b];
}
return a;
}
func gcd(a, b int) int {
for b != 0 {
a, b = b, a%b
}
return a
}
fn gcd(mut a: u64, mut b: u64) -> u64 {
while b != 0 {
let t = b;
b = a % b;
a = t;
}
a
}
3. 多配置格式切换(YAML / TOML / JSON)
「随你喜欢哪种格式」型的配置示例。
server:
host: 0.0.0.0
port: 8080
channels:
- name: feishu
enabled: true
[server]
host = "0.0.0.0"
port = 8080
[[channels]]
name = "feishu"
enabled = true
{
"server": { "host": "0.0.0.0", "port": 8080 },
"channels": [{ "name": "feishu", "enabled": true }]
}
4. tab + highlight shortcode(带 title 条)
如果想给代码块加个标题条(Hugo highlight shortcode 自带),把 fenced block 换成 {{< highlight >}} 即可:
.env.development
DATABASE_URL=postgres://localhost:5432/inkstone_dev
DEBUG=true
LOG_LEVEL=debug.env.production
DATABASE_URL=postgres://prod-db:5432/inkstone
DEBUG=false
LOG_LEVEL=warn自检清单
- tab 切换:点不同 label,代码块跟随切换(CSS only,不依赖 JS)
- 选中态:当前 tab 的 label 下有 2px 下划线
- 嵌套:fenced code block 与
{{< highlight >}}都能正常渲染 - emoji label:
🍎 / 🪟 / 🐧正常显示 -
position属性:第 3 节用position="start",labels 应靠左对齐 - 暗色模式:切到 dark theme 后,下划线颜色对调(
--color-shortcode-tab-label-bottom)