重新创建类似的Travis CI控制台日志界面

Question

我第一次看到Travis CI实时更新构建控制台日志时，我是，我承认，书呆子印象深刻。我知道一些非常耗时的CSS样式和JS编码，我可能会得到一半好的东西。但是，我的问题是，是否有任何库可以使这样的构建更容易？我意识到Travis CI使用Ember作为他们的Web应用程序框架，但我猜这不是Ember的一个组件，对吧？

Answer 1

“travis-web”使用Ember，但“log-container”的功能是自定义的。它包含日志文件的文本（“下载日志”）。请下载原始版本的日志并查看。

您将看到，日志文件有几个“注释”。它是一种语法，用于指示应用某些自定义样式的区域。 这些行由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-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＆amp;移至顶部

Scroll-To-End-Of-Log类似于滚动到div的结尾：this.scrollIntoView(false);

当激活滚动时，激活按钮本身位于顶部以使其保持在同一位置。

“移至顶部”位于底部。

有效线路悬停

当前光标线的样式为p:hover: #color。

部分和持续时间显示

在右侧显示“部分或文件夹名称”和“持续时间”。 两者都是基于以下标记的跨度：

travis_time:start:0759cab0

cmds

travis_time:end:0759cab0:start=1434311411734827664,finish=1434311413318517466, duration=1583689802

  

但是，我的问题是，是否有任何库可以使这样的构建变得更容易？

对于小型网站，您可以使用基于Javascript的主题CodeEditor，如CodeMirror。

应用黑暗主题，为代码折叠和代码突出显示添加一些自定义规则，主动线悬停。这将很快让你接近。

• https://codemirror.net/demo/theme.html
• https://codemirror.net/demo/folding.html