Add custom ansi colors and CSS variables for them (#25546)

Use our existing color palette to map to the 16 basic ansi colors. This
is backwards-compatible because it aliases the existing color names.

Side note: I think the colors in `console.css` for console file
rendering are incomplete, but fixing those is out of scope here imo.

Before and after:

<img width="542" alt="Screenshot 2023-06-28 at 00 26 12"
src="86d41884-bc47-4e85-8aec-621eb7320f0b">

<img width="546" alt="Screenshot 2023-06-28 at 00 28 24"
src="39fa3b37-d49e-49b1-b6bc-390ac8ca24b2">

---------

Co-authored-by: Giteabot <teabot@gitea.io>
This commit is contained in:
silverwind 2023-06-28 15:38:55 +02:00 committed by GitHub
parent c082689471
commit fdab4e3d84
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 96 additions and 21 deletions

View file

@ -11,6 +11,7 @@ export function renderAnsi(line) {
// the output of future renders, because ansi_up is stateful and remembers things like
// unclosed opening tags for colors.
const ansi_up = new (AnsiUp.default || AnsiUp)();
ansi_up.use_classes = true;
if (line.endsWith('\r\n')) {
line = line.substring(0, line.length - 2);

View file

@ -8,7 +8,7 @@ test('renderAnsi', () => {
expect(renderAnsi('\r')).toEqual('');
expect(renderAnsi('\rx\rabc')).toEqual('x\nabc');
expect(renderAnsi('\rabc\rx\r')).toEqual('abc\nx');
expect(renderAnsi('\x1b[30mblack\x1b[37mwhite')).toEqual('<span style="color:rgb(0,0,0)">black</span><span style="color:rgb(255,255,255)">white</span>'); // unclosed
expect(renderAnsi('\x1b[30mblack\x1b[37mwhite')).toEqual('<span class="ansi-black-fg">black</span><span class="ansi-white-fg">white</span>'); // unclosed
expect(renderAnsi('<script>')).toEqual('&lt;script&gt;');
expect(renderAnsi('\x1b[1A\x1b[2Ktest\x1b[1B\x1b[1A\x1b[2K')).toEqual('test');
expect(renderAnsi('\x1b[1A\x1b[2K\rtest\r\x1b[1B\x1b[1A\x1b[2K')).toEqual('test');