“travis-web”使用 Ember，但“log-container”的功能是自定义的。它包含日志文件的文本（“下载日志”）。请下载日志的原始版本并查看。
您将看到，日志文件有几个“注释”。它是一种指示应用某些自定义样式的区域的语法。这些行由日志脚本处理然后删除。
好吧，我们来分解一下：
► 代码折叠
折叠开始于"travis_fold:start:section_name"结束于"travis_fold:end:section_name"
折叠内的内容放置在跨度中。默认情况下，跨度高度为 0。最初不显示内容。
单击时，附加的 css 样式open将添加到跨度中。样式将span 元素的open设为- 并且折叠的内容将显示。heightauto
行号://url#L100
注释已从日志文件内容中删除
( total number of lines = raw log file lines - annotation lines)。
所有行号都是锚元素 ( a)，因此可以进行逐行引用。
编号本身是由 CSS 完成的 - 数字添加在锚点之前。
log-body p a::before {
content: counter(line-numbering);
counter-increment: line-numbering;
颜色
在整个原始日志文件中都使用 ansi 颜色代码。内容由AnsiParser 脚本解析，颜色代码被转换（deansi'ed）为其 css 类颜色名称。
字符串
[0K[33;1mBuild system information[0m
变成
<span id="1-3" class="yellow bold">Build system information</span>
滚动至日志末尾并移至顶部
Scroll-To-End-Of-Log 类似于滚动到 div 末尾：this.scrollIntoView(false);
激活滚动时，激活按钮本身位于顶部，以将其保持在同一位置。
“移至顶部”位于底部。
活动线路悬停
当前光标行的样式为p:hover: #color。
部分和持续时间显示
右侧显示“部分或文件夹名称”和“持续时间”。两者都是基于以下标记的跨度：
travis_time:start:0759cab0
指令
travis_time:end:0759cab0:start=1434311411734827664,finish=1434311413318517466, duration=1583689802
但是，我的问题是，是否有任何库可以使构建这样的东西变得更容易？
对于小型网站，您可以使用基于 Javascript 的主题化 CodeEditor，例如 CodeMirror。
应用深色主题，添加一些代码折叠和代码突出显示、活动行悬停的自定义规则。这很快就会让你非常接近。