【免费下载链接】answer-me-with-htmlAnswer me with HTML — an agent skill that answers hard questions with a one-page HTML you can actually read. 让 AI Agent 用一页 HTML 回答复杂问题。项目地址https://gitcode.com/gh_mirrors/an/answer-me-with-html点击查看免费下载本文以 answer-me-with-html 仓库中的timeline组件为对象从它的三列行语法时间 | 标题 | 备注、*高亮标记和h/v方向参数讲起结合组件源码、样式表与测试用例完整拆解它的字段解析、横竖布局规则、渲染结构和报错机制。读完后你不仅能写出可复制运行的timeline代码块还能理解每个语法细节背后对应的实现逻辑。一、timeline 组件在仓库中的位置answer-me-with-html 是一个让 AI Agent「用一页 HTML 回答复杂问题」的技能项目把 Markdown 文本渲染成单页、分区块panel的信息页面。页面里的图表类内容不是靠图片而是靠若干内置组件把围栏代码块fenced code block直接渲染成 HTML/CSS 图形。timeline是这 9 个内置组件之一。组件注册表 src/components/index.js 中可以看到全部成员callout、kv、timeline、annot、tree、limits、sequence、flow、ask每个组件统一导出{ name, summary, syntax, example, render(text, ctx) }结构并以围栏块的语言名这里就是timeline作为键注册进COMPONENTS这个 Map。仓库为每个组件都准备了一张双语「用法卡片」中文卡片即 site/presets/components/timeline.zh.md对应英文版为 site/presets/components/timeline.md。卡片用 frontmatter 声明title: timeline正文就是一个可直接使用的最小示例——一条三节点的发布计划5 月 | 设计评审 6 月 | 5% 用户灰度 *7 月 | 全量发布 | 灰度一周无报错后这张卡片虽然短但它恰好覆盖了 timeline 语法的全部三个要素两列基本行、可选第三列、*高亮项。下面以这个示例为骨架逐层展开。二、核心语法每行一个节点竖线分三列timeline 的输入规则非常克制每行一个时间线节点用|把一行分成至多三列时间 | 标题 | 备注前两列必填第三列备注/说明可选时间列以*开头时该节点被标记为高亮项例如示例中的*7 月 | 全量发布表示「当前最重要」或「目标」节点。把卡片示例逐行拆开看行时间标题备注高亮5 月 \| 设计评审5 月设计评审无否6 月 \| 5% 用户灰度6 月5% 用户灰度无否*7 月 \| 全量发布 \| 灰度一周无报错后7 月全量发布灰度一周无报错后是渲染结果就是横向排列的三个节点中间用一条水平线串起7 月节点的圆点会用主题强调色填充高亮样式见第五节标题下方再挂一行小字备注「灰度一周无报错后」。组件在源码里也自带一份语法说明位于 src/components/timeline.js 的syntax字段timeline [h|v] time | title | note (optional) *time | title ← starts with *: highlights the itemBy default ≤6 items are horizontal and 6 are vertical; the h / v argument forces a direction.也就是说围栏语言后面可以跟一个可选的方向参数h 或 v这属于卡片示例之外、源码 syntax 描述明确给出的完整能力。 ## 三、字段解析与校验contentLines 和 fields timeline 的 render 函数[src/components/timeline.js#L14-L21](https://link.gitcode.com/i/4ab966a4b0d569dfc9c8b268eb9c40f4)对输入的解析只依赖 [src/components/error.js](https://link.gitcode.com/i/78c7a5975b8809f5705d50aae848f69b) 里两个共用工具 1. **contentLines(text)**把围栏块文本按行切开去掉首尾空白记录每行的相对行号从 1 开始并**跳过空行和以 // 开头的整行注释**。一个值得注意的细节该函数的源码注释写的是「supports whole-line comments starting with #」但实际过滤条件是 startsWith(//)——以源码实现为准// 行会被当作注释略过且这种跳过不影响行号计算因为行号在过滤前就已记录。 2. **fields(text)**用 | 切分一行并逐列 trim。 随后的逐行校验逻辑是[timeline.js#L15-L21](https://link.gitcode.com/i/63bec61297510f8af00e66bc57f14793) - 切出的列数少于 2或第二列为空 → 抛出 ComponentError错误信息形如 timeline line must be time | title | note: 只有一列并携带**该行在围栏块内的相对行号** - 第一列若以 * 开头去掉星号后才是实际显示的时间parts[0].slice(1).trim() - 全部行解析完后如果没有任何节点 → 抛出 timeline needs at least one item。 ComponentError 的 line 字段是「围栏块内相对行号」[error.js 顶部注释](https://link.gitcode.com/i/16238be0df496e133b631f05a8509290) 说明由 render.js 负责把它换算回源码中的绝对行号——因此 Agent 在生成页面时若写错某一行报错能精确定位到具体哪一行。测试用例 [test/components-basic.test.js#L66-L68](https://link.gitcode.com/i/1253d3bdcf56e46ed5ea75ec9375f82b) 验证了这一点输入 a | b\n只有一列 时断言错误抛在第 2 行throwsAt(..., 2)。 ## 四、横向还是纵向6 个节点的分界线和 h/v 参数 timeline 唯一的可选参数是方向完整判定逻辑在 [src/components/timeline.js#L22](https://link.gitcode.com/i/208d89214e42af2ddf6de21f051cd089) 一行 js const vertical /\bv(ertical)?\b/.test(args) || (!/\bh(orizontal)?\b/.test(args) items.length 6);翻译成规则围栏语言后写v或vertical→ 强制纵向否则写了h或horizontal→ 强制横向两者同时出现时v的判定在前纵向优先什么都没写 → 自动选择不超过 6 个节点走横向超过 6 个走纵向。选择纵向的动机很直白横向时间线每个节点是一等宽网格列节点一多标题和备注就会被挤得没法阅读于是阈值 6 是「横向仍可读」的经验上限。测试用例 test/components-basic.test.js#L60-L64 分别覆盖了这两条路径拼 7 个节点断言输出含am-timeline--v以及a | b加参数v也断言纵向。仓库内的真实预设也展示了显式用法例如 site/presets/history.zh.md#L7-L14 用timeline h强制横向排了 6 个 Kubernetes 发展节点。五、渲染结构一个 ol、三四个 span、两条纯 CSS 连线render的返回值是一个有序列表方向体现在 class 和自定义属性上timeline.js#L23-L26横向ol classam-timeline am-timeline--h style--n: N--n就是节点数纵向ol classam-timeline am-timeline--v每个节点是li classam-tl-item高亮项额外加am-tl-item--hi内部依次是span classam-tl-when时间经esc()转义后输出span classam-tl-dot圆点span classam-tl-title标题经mdInline()处理即支持行内 Markdownspan classam-tl-text备注仅第三列非空时生成同样走mdInline()。样式全部在 src/themes/base.css#L194-L216关键机制横向连线不是画一条贯穿全宽的线而是每个li用一个::before在top: 31px处画一段横跨本列的水平线再由.am-timeline--h li:first-child::before { left: 50% }和li:last-child::before { right: 50% }让首尾两段只画到各自节点中点为止——这样连线天然对齐网格列宽变化时不会错位等宽网格grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr))让 N 个节点均分整行宽度minmax(0, 1fr)防止长标题把列撑爆高亮点.am-tl-item--hi .am-tl-dot { background: var(--accent); border-color: var(--accent) }base.css#L207——所以卡片里*7 月的圆点会随主题变色Blueprint 主题下为蓝色见文首截图 F 面板中Now节点纵向连线改为每个li的左边界线border-leftli:last-child::before { display: none }让最后一项不再向下延伸纵向模式下时间改用等宽字体var(--font-mono)内联显示在圆点右侧响应式base.css#L423 在小屏断点下把横向时间线塌缩为单列堆叠。关于安全性时间、标题、备注中的 HTML 会被中和而非原样输出——test/raw-html.test.js#L185-L189 的测试标题即「kv, tree, timeline and callout filter their text too」覆盖了Now | step script | wait time这类输入test/images.test.js#L126-L128 则验证了第三列支持带空格路径的图片引用如timeline\n2026 | UI | done。六、仓库中的真实用法除了卡片示例仓库里有两处可直接参考的 timeline 用法examples/ste100.md#L88-L95ASD-STE100 规范页的 F 区块「History」4 个节点全部带第三列备注最后一行*Now | Free download | revised by the ASD STEMG高亮「现状」。这就是文首截图中那条横向时间线的来源组件在 timeline.js#L13 的内置example1979 | AECMA starts the study / 1986 | First guide published / *Now | Free download | ...也取材自同一场景。site/presets/history.zh.md#L7-L146 个节点的timeline h显式横向用例展示了「备注列 高亮项 方向参数」三者的组合写法。从源码结构看timeline 还是视频模式的一部分容器src/runtime/video.js#L111 把.am-timeline与.am-diagram、.am-tree、.am-kv、.am-limits并列为视频播放时可被定位/高亮的图表宿主可推断该组件也参与页面的视频化呈现。七、速查表写法效果依据5 月 \| 设计评审一个基础节点时间 标题timeline.js#L15-L20第三列... \| 备注标题下方的说明小字可选同上*7 月 \| ...该节点圆点用主题强调色高亮base.css#L207timeline h强制横向可写horizontaltimeline.js#L22timeline v强制纵向可写vertical与h同现时v优先同上不写参数≤6 节点横向6 节点纵向同上 测试空行 ///开头行跳过不生成节点不影响行号error.js#L11-L16缺\|或第二列为空报错并给出围栏块内相对行号error.js#L2-L8、测试这套语法的信息密度很高三列文本、一个星号、一个单字母参数就能表达「时间、标题、说明、重点、方向」五种信息而渲染层完全由等宽网格加两条纯 CSS 伪元素连线完成不依赖任何外部图表库——这正是 answer-me-with-html「一页 HTML 即可读」理念在时间线场景下的具体落点。赞分享【免费下载链接】answer-me-with-htmlAnswer me with HTML — an agent skill that answers hard questions with a one-page HTML you can actually read. 让 AI Agent 用一页 HTML 回答复杂问题。项目地址https://gitcode.com/gh_mirrors/an/answer-me-with-html点击查看免费下载相关推荐Answer Me with HTML 的 timeline 组件用一行 Markdown 语法画出时间线与发布计划Answer Me with HTML 的 timeline 组件用一行 Markdown 语法画出时间线与发布计划 在 answer me with htmanswer-me-with-html 的 limits 组件详解用一页预算条可视化“值 vs 上限”answer me with html 的 limits 组件详解用一页预算条可视化“值 vs 上限” limits 是 answer me with htmanswer-me-with-html 的 annot 组件用逐句批注把写作点评画成一页 HTMLanswer me with html 的 annot 组件用逐句批注把写作点评画成一页 HTML annot逐句点评是 answer me with h上一篇biliTickerBuy5分钟快速上手的B站会员购智能抢票工具终极指南下一篇3种终极方法在macOS上免费创建虚拟PDF打印机完整指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考