重新创建类似 Travis CI 控制台日志界面
Recreate Similar Travis CI Console Log Interface
第一次看到 Travis CI 实时更新构建控制台日志时，我承认，给我留下了深刻的印象。而且我知道，通过一些非常耗时的 CSS 样式和 JS 编码，我可能会得到一半好的东西。但是，我的问题是，是否有任何库可以使构建这样的东西更容易？我知道 Travis CI 使用 Ember 作为他们的网络应用程序框架，但我猜这不是 Ember 的组件，对吧？
"travis-web" 使用 Ember，但 "log-container" 的功能是自定义的。它包含日志文件的文本 ("Download Log")。请下载日志的原始版本并查看。
你会看到，日志文件有几个"annotations"。它是一种指示应用某些自定义样式的区域的语法。
这些行由 Log script 处理，然后删除。
好吧，我们来分解一下：
► 代码折叠
折叠以 "travis_fold:start:section_name" 开始并以 "travis_fold:end:section_name"
结束
折叠内的内容放置在一个跨度中。
默认情况下，跨度高度为 0。最初不显示内容。
单击时，额外的 css 样式 open 将添加到跨度中。
样式 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 颜色代码。
内容由 AnsiParser script 解析，颜色代码被转换（deansi'ed）为它们的 css-class 颜色名称。
字符串
[0K[33;1mBuild system information[0m
变成
<span id="1-3" class="yellow bold">Build system information</span>
滚动到日志末尾并移至顶部
滚动到日志结尾类似于滚动到 div 的结尾：this.scrollIntoView(false);
激活滚动时，激活按钮本身位于顶部以保持在同一位置。
"move to top" 位于底部。
活动线悬停
当前光标行的样式为p:hover: #color。
部分和持续时间显示
右侧显示 "section or folder name" 和 "duration"。
两者都是基于以下标记的跨度：
travis_time:start:0759cab0
命令
travis_time:end:0759cab0:start=1434311411734827664,finish=1434311413318517466, duration=1583689802
But, my question is, are there any libraries out there that would make building something like this easier?
对于小型网站，您可以使用基于 Javascript 的主题化 CodeEditor，例如 CodeMirror。
应用深色主题，添加一些代码折叠和代码高亮、活动行悬停的自定义规则。这会让你很快就很接近。
第一次看到 Travis CI 实时更新构建控制台日志时，我承认，给我留下了深刻的印象。而且我知道，通过一些非常耗时的 CSS 样式和 JS 编码，我可能会得到一半好的东西。但是，我的问题是，是否有任何库可以使构建这样的东西更容易？我知道 Travis CI 使用 Ember 作为他们的网络应用程序框架，但我猜这不是 Ember 的组件，对吧？
"travis-web" 使用 Ember，但 "log-container" 的功能是自定义的。它包含日志文件的文本 ("Download Log")。请下载日志的原始版本并查看。
你会看到，日志文件有几个"annotations"。它是一种指示应用某些自定义样式的区域的语法。 这些行由 Log script 处理，然后删除。
好吧，我们来分解一下：
► 代码折叠
折叠以 "travis_fold:start:section_name" 开始并以 "travis_fold:end:section_name"
折叠内的内容放置在一个跨度中。 默认情况下，跨度高度为 0。最初不显示内容。
单击时，额外的 css 样式 open 将添加到跨度中。
样式 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 颜色代码。 内容由 AnsiParser script 解析，颜色代码被转换（deansi'ed）为它们的 css-class 颜色名称。
字符串
[0K[33;1mBuild system information[0m
变成
<span id="1-3" class="yellow bold">Build system information</span>
滚动到日志末尾并移至顶部
滚动到日志结尾类似于滚动到 div 的结尾：this.scrollIntoView(false);
激活滚动时，激活按钮本身位于顶部以保持在同一位置。
"move to top" 位于底部。
活动线悬停
当前光标行的样式为p:hover: #color。
部分和持续时间显示
右侧显示 "section or folder name" 和 "duration"。 两者都是基于以下标记的跨度：
travis_time:start:0759cab0
命令
travis_time:end:0759cab0:start=1434311411734827664,finish=1434311413318517466, duration=1583689802
But, my question is, are there any libraries out there that would make building something like this easier?
对于小型网站，您可以使用基于 Javascript 的主题化 CodeEditor，例如 CodeMirror。
应用深色主题，添加一些代码折叠和代码高亮、活动行悬停的自定义规则。这会让你很快就很接近。