在网页中显示ansi终端颜色
在网页中显示ansi终端颜色
用户1416054
发布于 2018-12-14 15:08:54
发布于 2018-12-14 15:08:54
在网页中显示ansi终端颜色
Posted November 21, 2018
终端命令为了可以友好的显示大多数都支持了颜色显示。 在终端中良好的颜色显示， 能够让我们处理问题更加高效，但是在运维开发中， 难免要在 web 网页中操作服务器, 难免要执行这些命令并且要显示在终端中.
除了友好的显示为等宽字体外， 显示这些颜色也是有必要的， 因为终端的颜色代码如果直接显示会很奇怪， 更加会干扰我们的信息.
默认情况下终端的显示颜色代码是这样的:
Restarting mongod (via systemctl): [60G[[0;32m OK [0;39m]可以看到ansi 的颜色代码就好像乱码一样，而且在网页中， 我更希望颜色代码为 html 的样式。类似于这样:
Restarting mongod (via systemctl): [<span style="color:rgb(0,187,0)"> OK </span>]ansi_up
ansi_up 库可以把终端颜色代码自动转换成 html 格式颜色样式， 让 web 显示终端颜色更加方便。
浏览器示例
<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示例
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示例
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);安装
$ npm install ansi_upPython 版本类似项目
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
