【发布时间】：2015-09-06 01:26:59
【问题描述】：
我第一次看到Travis CI 实时更新构建控制台日志时，我承认，我被书呆子给留下了深刻的印象。而且我知道通过一些非常耗时的 CSS 样式和 JS 编码，我可能会得到一半好的东西。但是，我的问题是，是否有任何库可以让构建这样的东西更容易？我意识到 Travis CI 使用 Ember 作为他们的 Web 应用程序框架，但我猜这不是 Ember 的组件，对吧？
【问题讨论】：
【发布时间】：2015-09-06 01:26:59
【问题描述】：
“travis-web”使用 Ember，但“日志容器”的功能是自定义的。它包含日志文件的文本（“下载日志”）。请下载原始版本的日志并查看。
您会看到，日志文件有几个“注释”。它是一种用于指示应用某些自定义样式的区域的语法。 这些行由Log script 处理，然后被删除。
好的，让我们分解一下：
► 代码折叠
折叠以"travis_fold:start:section_name" 开头并以"travis_fold:end:section_name" 结尾
折叠内的内容被放置在一个跨度中。 默认跨度高度为 0。最初不显示内容。
点击时，额外的css样式open被添加到span中。
open 样式将 span 元素的 height 设置为 auto - 折叠的内容将显示出来。
行号://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-color 代码。 内容由AnsiParser script 解析，颜色代码被转换（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 的主题代码编辑器，例如 CodeMirror。
应用深色主题，为代码折叠和代码高亮添加一些自定义规则，活动线悬停。这将很快让您非常接近。
【讨论】：
-
感谢您的详细解答！
-
很高兴能帮上忙。
-
知道他们是如何做到 # 百分比的吗？他们如何将整个加载合并到一行中？
-
有很多方法可以做到这一点：（a）文本/日志文件的间隔获取，其中内容被写入文件中的相同位置/行，（b）在终端上带有 ansi 转义码，(c) linux cli
echo -ne带有回车符/r，例如stackoverflow.com/a/12628501/1163786