在網頁中顯示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 版本類似項目

• https://github.com/Kronuz/ansi2html
• https://pythonhosted.org/ansiconv/