css - 重新创建类似的 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设置 height跨度元素到 auto - 折叠的内容将显示出来。

行号 ://url#L100

注释已从日志文件内容中删除

(total number of lines = raw log file lines - annotation lines)。

所有行号都是 anchor 元素(a)，因此可以进行逐行引用。

编号本身由 CSS 完成 - 数字添加在 anchor 之前。


log-body p a::before {
content: counter(line-numbering);
counter-increment: line-numbering;


颜色

在整个原始日志文件中使用了 ansi 颜色代码。内容由 AnsiParser script 解析并且颜色代码被转换(deansi'ed)为它们的 css 类颜色名称。

字符串

[0K[33;1mBuild system information[0m

成为

<span id="1-3" class="yellow bold">Build system information</span>

滚动到日志末尾并移动到顶部

滚动到日志结尾类似于滚动到 div 结尾:this.scrollIntoView(false);

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

“移动到顶部”位于底部。

主动线悬停

当前光标行的样式为 p:hover: #color .

部分和持续时间显示

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

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。

应用深色主题，为代码折叠和代码高亮、事件行悬停添加一些自定义规则。这会让您很快就接近目标。

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