Support 24-bit rgb ansi sequences (#3664)

* Add 24-bit rgb color support * Added test case for 24-bit ansi sequences
compiler-explorer · May 15, 2022 · 3d2b895 · 3d2b895
1 parent ba76824
commit 3d2b895
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 0 deletions.
diff --git a/static/ansi-to-html.ts b/static/ansi-to-html.ts
@@ -127,10 +127,27 @@ function generateOutput(stack: string[], token: string, data: string | number, o
     } else if (token === 'xterm256') {
         // Note: Param 'data' must be a string at this point
         return handleXterm256(stack, data as string, options);
+    } else if (token === 'rgb') {
+        // Note: Param 'data' must be a string at this point
+        return handleRgb(stack, data as string, options);
     }
     return '';
 }
 
+function handleRgb(stack: string[], data: string, options: AnsiToHtmlOptions) {
+    data = data.substring(2).slice(0, -1);
+    const operation = +data.substr(0, 2);
+
+    const color = data.substring(5).split(';');
+    const rgb = color
+        .map(value => {
+            return ('0' + Number(value).toString(16)).substr(-2);
+        })
+        .join('');
+
+    return pushStyle(stack, (operation === 38 ? 'color:#' : 'background-color:#') + rgb);
+}
+
 function handleXterm256(stack: string[], data: string, options: AnsiToHtmlOptions): string {
     data = data.substring(2).slice(0, -1);
     const operation = +data.substr(0, 2);
@@ -312,6 +329,11 @@ function tokenize(text: string, options: AnsiToHtmlOptions, callback: TokenizeCa
         return '';
     }
 
+    function rgb(m) {
+        callback('rgb', m);
+        return '';
+    }
+
     function removeXterm256(m: string): string {
         callback('xterm256', m);
         return '';
@@ -358,6 +380,10 @@ function tokenize(text: string, options: AnsiToHtmlOptions, callback: TokenizeCa
             pattern: /^\x1b\[[012]?K/,
             sub: remove,
         },
+        {
+            pattern: /^\x1b\[[34]8;2;\d+;\d+;\d+m/,
+            sub: rgb,
+        },
         {
             pattern: /^\x1b\[[34]8;5;(\d+)m/,
             sub: removeXterm256,

diff --git a/test/ansi-to-html-tests.js b/test/ansi-to-html-tests.js
@@ -81,4 +81,12 @@ describe('ansi-to-html', () => {
         filter.reset();
         filter.toHtml('bar').should.equal('bar');
     });
+
+    // rgb test
+    it('should process rgb colors', () => {
+        const filter = new Filter(filterOpts);
+        filter
+            .toHtml('\x1B[38;2;57;170;243mfoo\x1B[48;2;100;100;100mbar')
+            .should.equal('<span style="color:#39aaf3">foo<span style="background-color:#646464">bar</span></span>');
+    });
 });