Styled console.log using HTML (jsfiddle.net/yg6hk/5/)

playground.json

{
    "scripts": [],
    "showConsole": true,
    "scriptType": "text/javascript",
    "layout": "splitLeft"
}

script.ts

function styledConsoleLog(...msg: [string, ...any[]] | any[]): void
{
    const argArray: string[] = [];

    if(msg.length > 0) 
    {
        const startTagRe = /<span\s+style=(['"])([^'"]*)\1\s*>/gi;
        const endTagRe = /<\/span>/gi;

        let reResultArray: RegExpExecArray[];

        argArray.push(
            msg[0].replace(startTagRe, '%c')
                        .replace(endTagRe, '%c')
        );
         
        while (reResultArray = startTagRe.exec(msg[0])) 
        {
            console.debug('  Matchinfo:\n %o', reResultArray);
            argArray.push(reResultArray[2]);
            console.debug('  Pushed: %o', reResultArray[2]);
            argArray.push('');
            console.debug('  Pushed: %o', '');
        }

        /**
         * Pass through subsequent args since chrome dev tools does not (yet) 
         * support console.log styling of the following form: 
         * ``` js
         * console.log('%cBlue!', 'color: blue;', '%cRed!', 'color: red;');
         * ```
         *
         * Original
         * ``` ts
         * for(var j = 1; j < arguments.length; j++) {
         *   argArray.push(arguments[j])
         * }
         * ```
         */
        if(msg.length > 1) 
          argArray.push(...msg.slice(1));
    }

    console.log.apply(console, argArray);
}

styledConsoleLog('<span style="color:hsl(0, 100%, 90%);background-color:hsl(0, 100%, 50%);"> Red </span> <span style="color:hsl(39, 100%, 85%);background-color:hsl(39, 100%, 50%);"> Orange </span> <span style="color:hsl(60, 100%, 35%);background-color:hsl(60, 100%, 50%);"> Yellow </span> <span style="color:hsl(120, 100%, 60%);background-color:hsl(120, 100%, 25%);"> Green </span> <span style="color:hsl(240, 100%, 90%);background-color:hsl(240, 100%, 50%);"> Blue </span> <span style="color:hsl(300, 100%, 85%);background-color:hsl(300, 100%, 25%);"> Purple </span> <span style="color:hsl(0, 0%, 80%);background-color:hsl(0, 0%, 0%);"> Black </span>');