向黑底绿字的terminal宣战
9 July 2016

jansesun原创,转载请注明出处

程序员总少不了和terminal打交道,可是terminal并没有语法高亮,在黑色的屏幕上,绿色的日志,绿色的告警,绿色的错误,绿色的输出……一切都是绿色的。也许我们已经习惯了terminal的单调,与其说是习惯,不说说是对现状的一种无奈。

一直以来,我对黑底绿字的terminal也不觉得什么?直到前些天,一个问题勾起了我的好奇心。我用node脚本封装了下mocha的测试,我发现mocha的测试输出很漂亮,用例通过与否一目了然,可是经过我的脚本后的输出就从巴黎时装展的维密天使论为了村里的丫蛋。这种用户体验的天壤之别让我难以接受,我之所以封装是为了调用简单,便于传参,可不是为了要这种毫无辨识度的测试输出。

mocha的测试输出

我的测试输出

怀着对真相的执着,我准备求本溯源。既然是mocha的输出,那么mocha的源代码中一定能够给我们提供一些线索。我打开了mocha的github,凭着程序员的本能与直觉,我找到lib/reporters/base.js,打开文件,进入我视线的不是我熟悉的rgb,而是一些奇怪的数字0, 30, 31, 32, 33, 90, 91, 92, 93。我意识到这些数字已经超出了我的认知。

为了一探究竟,我顺藤摸瓜看到了color函数的实现。

var color = function(type, str) {
	return `\u001b[${type}m${str}\u001b[0m`;
}

到此, 我已经知道了\u001b[xxm就是让丫蛋成为维密天使的时装设计师,根据这个我们通过正则表达式匹配不同类型的文案然后就可以依葫芦画瓢上色,让我们自己的脚本输出和mocha的输出一模一样了。

大功告成

现在我们知其然不知其所以然,这个神秘的时装设计师到底是何方圣神呢?

维基百科告诉我他是ANSI终端转义码(ANSI terminal escape codes)家族中的选择图形装饰(select graphic rendition[SGR])转义码,由以下三部分组成:

数值命令常见的取值如下:

Notes: 0-7对应的颜色分别为黑、红、绿、黄、蓝、紫、靛,灰,其中90,100对应的为暗灰,97, 107对应的为白,具体色值参考维基百科

color.js就是根据这个原理实现的。

遇到这个问题,我们没有安于现状,也没有只是简单的引入colors.js来实现功能,而是追本溯源,从而扩展了自己的知识边界。

好奇心是学习知识的原动力。

最后跟大家分享一个最近的感悟,不论自己在做什么业务,只要保持对技术的追求,就不会缺少成长。