colorize_ansi.js

colorize ANSI in supervisord logs

// ==UserScript==
// @name         Colorize Ansi Codes
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Colorize the ANSI codes in a HTML element.
// @author       You
// @match        http://pi4:9001/tail.html*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=githubusercontent.com
// @grant        none
// @require https://gist.githubusercontent.com/vindolin/4a5dc01877b9531da39b30646dd882a3/raw/164473bdec4b3b17fd6455a4741f5d1a4e31c5b6/ansicolor.js
// ==/UserScript==

(function() {
'use strict';

// change this selector to match your element which contains the ANSI text
const subject = document.getElementsByTagName('pre')[0];
colorizeAnsi(subject);

function colorizeAnsi(element) {

    const text = element.textContent.trim();
    // console.log(text);
    const lines = text.match(/[^\n]+/g);
    element.innerHTML = '';
    for(const line of lines) {
        const spans = Colors.parse(line).spans;
        for(const span of spans) {
            const spanElement = document.createElement('span');
            spanElement.style.cssText = span.css;
            spanElement.textContent = span.text;
            element.appendChild(spanElement);
        }
        element.appendChild(document.createElement('br'));
    }

}
})();