在网页中显示ansi终端颜色

在网页中显示ansi终端颜色

Posted November 21, 2018

终端命令为了可以友好的显示大多数都支持了颜色显示。 在终端中良好的颜色显示, 能够让我们处理问题更加高效,但是在运维开发中, 难免要在 web 网页中操作服务器, 难免要执行这些命令并且要显示在终端中.

除了友好的显示为等宽字体外, 显示这些颜色也是有必要的, 因为终端的颜色代码如果直接显示会很奇怪, 更加会干扰我们的信息.

默认情况下终端的显示颜色代码是这样的:

Text only

Restarting mongod (via systemctl):  [60G[[0;32m  OK  [0;39m]

可以看到ansi 的颜色代码就好像乱码一样,而且在网页中, 我更希望颜色代码为 html 的样式。类似于这样:

HTML

Restarting mongod (via systemctl):  [<span style="color:rgb(0,187,0)">  OK  </span>]

ansi_up

项目地址: https://github.com/drudru/ansi_up

ansi_up 库可以把终端颜色代码自动转换成 html 格式颜色样式, 让 web 显示终端颜色更加方便。

浏览器示例

HTML

<script src="ansi_up.js" type="text/javascript"></script>
<script type="text/javascript">

  var txt  = "\n\n\033[1;33;40m 33;40  \033[1;33;41m 33;41  \033[1;33;42m 33;42  \033[1;33;43m 33;43  \033[1;33;44m 33;44  \033[1;33;45m 33;45  \033[1;33;46m 33;46  \033[1m\033[0\n\n\033[1;33;42m >> Tests OK\n\n"

  var ansi_up = new AnsiUp;

  var html = ansi_up.ansi_to_html(txt);

  var cdiv = document.getElementById("console");

  cdiv.innerHTML = html;

</script>

Node示例

node

var AU = require('ansi_up');
var ansi_up = new AU.default;

var txt  = "\n\n\033[1;33;40m 33;40  \033[1;33;41m 33;41  \033[1;33;42m 33;42  \033[1;33;43m 33;43  \033[1;33;44m 33;44  \033[1;33;45m 33;45  \033[1;33;46m 33;46  \033[1m\033[0\n\n\033[1;33;42m >> Tests OK\n\n"

var html = ansi_up.ansi_to_html(txt);

TypeScript示例

TypeScript

import {
    default as AnsiUp
} from 'ansi_up';

const ansi_up = new AnsiUp();

const txt  = "\n\n\x1B[1;33;40m 33;40  \x1B[1;33;41m 33;41  \x1B[1;33;42m 33;42  \x1B[1;33;43m 33;43  \x1B[1;33;44m 33;44  \x1B[1;33;45m 33;45  \x1B[1;33;46m 33;46  \x1B[1m\x1B[0\n\n\x1B[1;33;42m >> Tests OK\n\n"

let html = ansi_up.ansi_to_html(txt);

安装

Bash

$ npm install ansi_up

Python 版本类似项目

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Youngxj

杨小杰工具箱图标版网页源码带后台

2052
来自专栏河湾欢儿的专栏

探究 css touch-action 属性

今天在写vue项目的时候碰到一个 Unable to preventDefault inside passive event listener due to ...

1411
来自专栏macOS 开发学习

一步一步,开始上手Mac 开发(二)

2.2 选中MasterViewController.xib 选中view,然后把它拖动的更宽更高,不必在意具体的尺寸细节,要能够放下新的控件就可以。

1152
来自专栏Android小菜鸡

解决H5在IOS的WebView下上拉下拉会带动整个WebView出现空白

做Web应用,碰到问题,当拖动页面的时候,IOS的整个WebView会被拖动,导致上下方有灰色空白出现,并且影响内部滑动的体验。 在网上找了个神秘代码,大概意...

6794
来自专栏互联网杂技

Chrome 35个开发者工具的小技巧【动态图演示】

谷歌浏览器如今是Web开发者们所使用的最流行的网页浏览器。伴随每六个星期一次的发布周期和不断扩大的强大的开发功能,Chrome变成了一个必须的工具。大多数可能熟...

2934
来自专栏vue学习

20、分类详情页之数据渲染

然后复制一系列就是我们左侧栏的各个标题了,记住这里的每个标题的id要和首页各个分类名的id相对应。

2062
来自专栏CDA数据分析师

50个逆天功能,看完变Excel绝顶高手(全都是动图!)

Excel的50个逆天功能,动画教程珍藏版。 1、自动筛选 ? 2、在Excel中字符替换 ? 3、在Excel中冻结行列标题 ? 4、在Excel中为导入外部...

2626
来自专栏DeveWork

WordPress中的jQuery库不起作用的相关问题

WordPress 中的jQuery 库问题曾经困扰了我一段时间。如果仅仅加载WordPress 自带的jQuery 库,在使用一些jQuery 插件的时候明明...

2616
来自专栏埋名

svgtofont.js 自动生成图标字体和彩色图标文件

一般情况我通过 iconfont 或者 icomoon 来实现图标管理生成字体,导入到项目中使用。

6154
来自专栏编程

小白必知HTML+CSS编写规范

一、文档规范 1.HTML和CSS文档必须采用UTF-8(不包括Unicode签名BOM)编码格式; 2.HTML和CSS文档换行符必须采用UNIX/LINUX...

2115

扫码关注云+社区

领取腾讯云代金券