专栏首页JackeyGao的博客在网页中显示ansi终端颜色

在网页中显示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 条评论
登录 后参与评论

相关文章

  • Django 进阶学习 - 动态actions

    Django后台默认只有一个动作Delete selected xxxxs, 那么如果自定义动作该怎么办, 也很容易, 直接写个类似于这种的函数

    用户1416054
  • 获取 zabbix 挂件数据(widget)

    Zabbix 有非常丰富的 API ,但没有 widget 的 API。 所以获取 widget 的数据需要通过模拟登录爬取网页的形式来做。虽然我们可以用一定的...

    用户1416054
  • responder初体验

    responder 是 @kennethreitz 新开发的一个项目, 是一个基于 Python 的 HTTP 服务框架. 底层用了 Starlette 的框架...

    用户1416054
  • netcore进程内(InProcess)托管和进程外(out-of-Process)托管

    当一个 ASP.NET Core 应用程序执行的时候,.NET 运行时会去查找 Main()方法,因为它是这个应用程序的起点。

    跟着阿笨一起玩NET
  • 直方图操作(二)

    直方图操作(二)之统计电路 在实际的图像中,连续的像素点灰度值为相同值的情况非常常见,如果每来一个像素都对双口RAM进行一次寻址和写操作,显然降低了统计效率而提...

    anytao
  • 网站海量数据和高并发解决方案(一)

    现在无论是企业的业务系统还是互联网上的网站程序都面临着数据量大的问题,这个问题如果解决不好将严重的影响系统的运行速度,下面就针对这个问题的各种解决解决方案进行介...

    用户1263954
  • 海量数据迁移之误操作和防范建议(r3笔记第22天)

    在生产环境的数据迁移中,发生误操作真是很不愿意看到,今天自己总结了一下,从个人的经验来看有以下的几种操作或者是失误导致的问题。有一些错误自己已经犯过。 外键 ...

    jeanron100
  • VBA专题05-3:一文彻底掌握用户窗体编程基础知识(下)

    通过前面的两篇文章,我们已经学习了用户窗体编程的基础知识。本文给出一个综合示例,让你能够更熟练掌握用户窗体编程基础。

    fanjy
  • 五、实现自定义配置属性动态加载

    cn華少
  • 编程小白 | 每日一练(69)

    这道理放在编程上也一并受用。在编程方面有着天赋异禀的人毕竟是少数,我们大多数人想要从编程小白进阶到高手,需要经历的是日积月累的学习,那么如何学习呢?当然是每天都...

    闫小林

扫码关注云+社区

领取腾讯云代金券