npm install ansi-to-html gives the following error. Because of this many of the atom packages' functionality gets broke.

 npm install ansi-to-html
npm WARN addRemoteGit Error: Command failed: git -c core.longpaths=true config --get remote.origin.url
npm WARN addRemoteGit
npm WARN addRemoteGit     at ChildProcess.exithandler (child_process.js:202:12)
npm WARN addRemoteGit     at emitTwo (events.js:106:13)
npm WARN addRemoteGit     at ChildProcess.emit (events.js:191:7)
npm WARN addRemoteGit     at maybeClose (internal/child_process.js:852:16)
npm WARN addRemoteGit     at Socket.<anonymous> (internal/child_process.js:323:11)
npm WARN addRemoteGit     at emitOne (events.js:96:13)
npm WARN addRemoteGit     at Socket.emit (events.js:188:7)
npm WARN addRemoteGit     at Pipe._handle.close [as _onclose] (net.js:492:12)
npm WARN addRemoteGit  git://github.com/monsterkodi/node-simple-plist.git resetting remote C:\Users\shaha\AppData\Roaming\npm-cache\_git-remotes\git-github-com-monsterkodi-node-simple-plist-git-58558bef because of error: { Error: Command failed: git -c core.longpaths=true config --get remote.origin.url
npm WARN addRemoteGit
npm WARN addRemoteGit     at ChildProcess.exithandler (child_process.js:202:12)
npm WARN addRemoteGit     at emitTwo (events.js:106:13)
npm WARN addRemoteGit     at ChildProcess.emit (events.js:191:7)
npm WARN addRemoteGit     at maybeClose (internal/child_process.js:852:16)
npm WARN addRemoteGit     at Socket.<anonymous> (internal/child_process.js:323:11)
npm WARN addRemoteGit     at emitOne (events.js:96:13)
npm WARN addRemoteGit     at Socket.emit (events.js:188:7)
npm WARN addRemoteGit     at Pipe._handle.close [as _onclose] (net.js:492:12)
npm WARN addRemoteGit   killed: false,
npm WARN addRemoteGit   code: 1,
npm WARN addRemoteGit   signal: null,
npm WARN addRemoteGit   cmd: 'git -c core.longpaths=true config --get remote.origin.url' }
npm ERR! git clone --template=C:\Users\shaha\AppData\Roaming\npm-cache\_git-remotes\_templates --mirror git://github.com/monsterkodi/node-simple-plist.git C:\Users\shaha\AppData\Roaming\npm-cache\_git-remotes\git-github-com-monsterkodi-node-simple-plist-git-58558bef: Cloning into bare repository 'C:\Users\shaha\AppData\Roaming\npm-cache\_git-remotes\git-github-com-monsterkodi-node-simple-plist-git-58558bef'...
npm ERR! git clone --template=C:\Users\shaha\AppData\Roaming\npm-cache\_git-remotes\_templates --mirror git://github.com/monsterkodi/node-simple-plist.git C:\Users\shaha\AppData\Roaming\npm-cache\_git-remotes\git-github-com-monsterkodi-node-simple-plist-git-58558bef: fatal: unable to connect to github.com:
npm ERR! git clone --template=C:\Users\shaha\AppData\Roaming\npm-cache\_git-remotes\_templates --mirror git://github.com/monsterkodi/node-simple-plist.git C:\Users\shaha\AppData\Roaming\npm-cache\_git-remotes\git-github-com-monsterkodi-node-simple-plist-git-58558bef: github.com[0: 192.30.253.113]: errno=No error
npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\shaha\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "install" "ansi-to-html"
npm ERR! node v6.3.1
npm ERR! npm  v3.10.5
npm ERR! code 128

npm ERR! Command failed: git -c core.longpaths=true clone --template=C:\Users\shaha\AppData\Roaming\npm-cache\_git-remotes\_templates --mirror git://github.com/monsterkodi/node-simple-plist.git C:\Users\shaha\AppData\Roaming\npm-cache\_git-remotes\git-github-com-monsterkodi-node-simple-plist-git-58558bef
npm ERR! Cloning into bare repository 'C:\Users\shaha\AppData\Roaming\npm-cache\_git-remotes\git-github-com-monsterkodi-node-simple-plist-git-58558bef'...
npm ERR! fatal: unable to connect to github.com:
npm ERR! github.com[0: 192.30.253.113]: errno=No error
npm ERR!
npm ERR!
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR!     <https://github.com/npm/npm/issues>

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\shaha\Desktop\npm-debug.log

Operating System: Windows7

Can this issue be addressed?

var Convert = require("ansi-to-html")

var convert = new Convert();

console.log(convert.toHtml("first example\r\nsecond line"))
console.log(convert.toHtml("second example\r\rsecond line"))
console.log(convert.toHtml("third example\r\r\nsecond line"))

Will get the result:

"first example\r\nsecond line"
"second example"
"third example"

https://runkit.com/mapleeit/5dd51b084cf4160013dac11d

try sending the output of npm v to ansi-to-html, and you should find that the underline attribute persists; see attached.

The problem seems to be that the attribute stack is managed inconsistently. Some attributes are push/popped (e.g. underline) whereas others (e.g. bold see #49 ) are pushed but not popped. In addition to bold, foreground and background colors seem to be pushed but never popped --- even the reset escape code results in a tag push.

It helps to use ansi-to-html easier - https://observablehq.com/@observablehq/module-require-debugger

Hi!

Thanks for the great project! I'm currently considering using it and it works perfectly fine except for one thing! I want to output console information of a command executed using the PHP Framework Symfony. Symfony does support progress bars which is extremely helpful for longer running processes. See the manual for more information and an animated gif.

The used ansi codes can be checked out here: https://github.com/symfony/console/blob/master/Helper/ProgressBar.php#L480-L487

Do you think implementing this would be even possible?

Not sure if you consider this in scope, but given that I think your general parsing code could be reused for this purpose, I was thinking the generic portions could be separated from the HTML-specific portions, and add alongside the ANSI-to-HTML converter, a converter which can build the strings and CSS needed by console.log(''); in the browser. E.g., as per https://developer.mozilla.org/en-US/docs/Web/API/console#Styling_console_output :

console.log("This is %cMy stylish message", "color: yellow; font-style: italic; background-color: blue;padding: 2px");

One an use multiple %c formatters.

The big use case for this is allowing styled logging which works with the same syntax in both Node and the browser.

One way you could fix this is by doing some buffering and then processing the input one line at a time, like ansi-html does here: https://github.com/Tjatse/ansi-html/blob/master/bin/ansi-html

It looks like the "dim" modifier gets ignored.

Is there a way to use this with streams?
I'm doing

inputStream.on('data', function(data) {
  outputStream.write(convert.toHtml(data));
});

But since data is just a chunk it's expected to continue with the colors left by previous chunk, is this possible?

For example, if inputStream receives a chunk of data \x1b[31mabcd than changes font color to red, the next chunk of data efgh should be red also.

(I found this problem when using atom-build (which uses ansi-to-html), but it appears the issue is in ansi-to-html.)

Currently, the escape sequence [K (EL – Erase in Line) will produce a K in the output.

For instance, GCC with -fdiagnostics-color produces a lot of these, so the HTML-ified output is a mess.

I'm guessing implementing it would be somewhat tricky, but at least dropping the Ks would be a huge improvement.

Is there a browser version?

I'm looking for a package that can convert ansi-tagged links to html.

It is possible to create VT100 terminal hyperlinks.

const ESC = '\u001B[';
const OSC = '\u001B]';
const BEL = '\u0007';
const SEP = ';';

var test = [
		OSC,
		'8',
		SEP,
		SEP,
		"url",
		BEL,
		"text",
		OSC,
		'8',
		SEP,
		SEP,
		BEL
	].join('');
console.log(test);

or

echo -e '\e]8;;http://example.com\e\\This is a link\e]8;;\e\\'

These are correctly displayed in the terminal, and correctly represented in a file.

However, currently ansi-to-html displays them in plain text.

]8;;url�text]8;;�
]8;;http://example.com\This is a link]8;;\

Could we make these type of links work?
Thank you.

Given the following input:

'HELLO\n\x1b[0K\u001b[33;1mWORLD\u001b[0m\n'

I would expect the output to be the following:

'HELLO\n<span style="color:#A50"><b>WORLD</b></span>\n'

Instead, it is the following:

'HELLO\nK<span style="color:#A50"><b>WORLD</b></span>\n'

After debugging the code I found that the problem was that even after a token is found and removed from the text it doesn't restart matching all tokens.

I have a fix ready and will be submitting a PR.

The real issue is maybe that opensource developers don't receive enough gratification.
Thanks to you, creator can build better software

Have a nice day =)

Hi, thank you for your work!

0.6.3 version:

2017-11-13 17:20:00: .[33mwarn.[39m: [IM.server] MAIL is not configured

Dot's before square brackets are ESC symbols (\x1b).

Converts to:

2017-11-13 17:20:00:
<span style="color:#A50">warn<span style="color:#FFF">: [IM.server] MAIL is not configured</span></span>

So on my white background, the second part of string just disappeared.
I really wandered why there are two spans, actually I expected:

2017-11-13 17:20:00:
<span style="color:#A50">warn</span>
[IM.server] MAIL is not configured

Some greedy problems in regexp ?

Hi,

Please add support for escape code 22.

Per Wikipedia: https://en.wikipedia.org/wiki/ANSI_escape_code
22 Normal color or intensity Neither bold nor faint

Example:

const ANSIToHTML = require('ansi-to-html');
const text = '\x1b[1mHello\x1b[22m World';
console.log(text);
console.log(new ANSIToHTML({fg: '#000', bg: '#FFF', newline: true}).toHtml(text));
// "\u001b[1mHello\u001b[22m World"
// "<b>Hello World</b>"

Link: https://runkit.com/585164c7c92fa7001463dd8b/585167e71ca9e00014bc2cff

The </b> is around the whole expression instead of correctly around just Hello.

This comes up because chalk uses this (and it works just fine with node cli):

const chalk = require("chalk")
console.log(chalk.styles.bold);
console.log(chalk.bold('Test') + ' me')

So there are a few escape sequences possible. For example, one of the most popular JS loggers winston uses unicode escape sequence (u001b instead of x1b).

Would it be possible to add the support to the package?

I want to output bash output on web page, but this lib only convert ANSI color code and no supporting for '\t' and others.

Have you thought about the possibility to use classes instead of styles? I would like to create different themes for my app and it'll be easier to change the CSS. Also with classes it's easier to combine different styles (background, foreground, bold...)

PS: Sorry for opening so many issues, I really like this project, good job 👍 :)

I'm newbie at JS
I tried to write very simple JS just to load response body from REST service and parse ANSI text into HTML and got stuck at the Usage example:

Usage
var Convert = require('ansi-to-html');
var convert = new Convert();

console.log(convert.toHtml('\x1b[30mblack\x1b[37mwhite'));

/*
prints: ...
*/

Got an exception:
Uncaught ReferenceError: require is not defined

Googling tries at stackoverflow also made me hurt:

https://stackoverflow.com/questions/19059580/client-on-node-js-uncaught-referenceerror-require-is-not-defined

`10 Answers

This is because require() does not exist in the browser/client-side JavaScript.

Now you're going to have to make some choices about your client-side JavaScript script management.

You have three options:

Use the <script> tag.
Use a CommonJS implementation. It has synchronous dependencies like Node.js
Use an asynchronous module definition (AMD) implementation.
CommonJS client side-implementations include (most of them require a build step before you deploy):

Browserify - You can use most Node.js modules in the browser. This is my personal favorite.
Webpack - Does everything (bundles JavaScript code, CSS, etc.). It was made popular by the surge of React, but it is notorious for its difficult learning curve.
Rollup - a new contender. It leverages ES6 modules and includes tree-shaking abilities (removes unused code).
You can read more about my comparison of Browserify vs (deprecated) Component.

AMD implementations include:

RequireJS - Very popular amongst client-side JavaScript developers. It is not my taste because of its asynchronous nature.
Note, in your search for choosing which one to go with, you'll read about Bower. Bower is only for package dependencies and is unopinionated on module definitions like CommonJS and AMD.`

OMG...
Use the <script> tag - I'd happy to use it ... but how to use it?

Is it possible to create a README for Dummies ? Is it possible to create just single script for ansi-to-html coverting?

Does the module support a method to convert the generated HTML to a text file (without the HTML tags)?

Hey,

Wikipedia mentions that colour formatting ansi codes are in the format:

CSI n1 [;n2 [; ...]] m

Your parser doesn't support:

\x1b[0;;m

This is what a program I'm using outputs. Would it be hard for you to add support for this?

Thanks!
Nebster

Are there any reasons why reset all attributes ESC[0m code is not supported?

https://en.wikipedia.org/wiki/ANSI_escape_code#SGR_parameters

To reset colors to their defaults, use ESC[39;49m (not supported on some terminals), or reset all attributes with ESC[0m.

https://en.wikipedia.org/wiki/ANSI_escape_code#3/4_bit

Hi!

Thanks for a wonderful lib! Trying to troubleshoot the rendering av a progress bar that is based on multiple lines printed with:
\x1b[2K TEXT \r

I can't get it to render properly. Is it supported?

When I try to set the newline option:

var Convert = require('ansi-to-html');
var convert = new Convert();
convert.newline = true;
output = convert.toHtml(stdout);

the output string is still without '
' tags.

The following code will produce an infinite loop that ansi-to-html never returns from:

var Convert = require('ansi-to-html');
var convert = new Convert();
console.log(convert.toHtml('\u001b[15;1!\u001b[17;2!\u001b[11;0;3549;3080;3840;241;943;4082;3086;124;221;175;124;15;1807;3086;221!'));

Hi,
I know html does not take into account spaces in text, but sometimes ansi text only displays correctly when we include spaces.
I needed to display log info in html, so I added a 'spaces' option that replaces spaces with 'span' tags that have a width of 0.6em. Implementation is pretty easy, but it's also pretty much hacking, which is why I'm not doing a pull request.
But do you think that may be a good feature ? And would there be a better way to do it?

use grunt 0.4.x

Could you add a transpilation step in your build process to output ES5 code too?

Thanks,
Chris

It seems that multiple new lines are replaced by 1 <br/> is this intentional? See: https://github.com/rburns/ansi-to-html/blob/master/src/ansi_to_html.coffee#L205

{pattern: /^\n+/, sub: newline}

Example:

const ANSIToHTML = require('ansi-to-html');
const text = 'Hello\n\nWorld';
console.log(text);
console.log(new ANSIToHTML({fg: '#000', bg: '#FFF', newline: true}).toHtml(text));
// "Hello\n\nWorld"
// "Hello<br/>World"

https://runkit.com/585164c7c92fa7001463dd8b/58516d1f1ca9e00014bc2f24

I'm using this https://github.com/microsoft/node-pty and this ansi-to-html doesn't work well with it, it works maybe 50%, but still leaves some invalid text left. Is it possible to support this?

Is there any way to use ansi-to-html from a CLI? If not, are there any plans to include one/does it warrant inclusion?

Any idea whats going on with this conversion. I'm seeing issues when a word is replaced. For example, the ansi is
months remaining �[1;31mtimes�[m�[1;32mmultiplied by�[m $10 with

and the result html is
months remaining times2mmultiplied by $10

Here is a screenshot from terminal

You can see that the html not getting generated properly for the new text in green from terminal.

Currently the library is generating styles. Would it be possible to generate classes instead? It would make it easier to do customizations to other attributes other than color.

The current default background color is black. For folks using dark mode, this seems reasonable enough. For folks using light mode, this isn't a great default. Having a default that more matches the concept of default should support both groups well. E.g., "initial" or "transparent" (and "initial" could work well for foreground colors as well).

Lmk if you'd like a PR, or if you want to leave as is for backwards compatibility.

script-view.js:180 RangeError: Maximum call stack size exceeded
    at String.replace (<anonymous>)
    at process (C:\atom-script\node_modules\.pnpm\[email protected]\node_modules\ansi-to-html\lib\ansi_to_html.js:506:17)
    at tokenize (C:\atom-script\node_modules\.pnpm\[email protected]\node_modules\ansi-to-html\lib\ansi_to_html.js:516:7)
    at Filter.toHtml (C:\atom-script\node_modules\.pnpm\[email protected]\node_modules\ansi-to-html\lib\ansi_to_html.js:606:7)
    at ScriptView.display (file:///C:/Users/aminy/Documents/GitHub/JavaScript/@atom-ide-community/atom-script/lib/script-view.js:177:30)
    at file:///C:/Users/aminy/Documents/GitHub/JavaScript/@atom-ide-community/atom-script/lib/view-runtime-observer.js:16:73
    at Function.simpleDispatch (C:\Users\aminy\AppData\Local\atom\app-1.55.0\resources\app\static\<embedded>:11:1190181)
    at Emitter.emit (C:\Users\aminy\AppData\Local\atom\app-1.55.0\resources\app\static\<embedded>:11:1191622)
    at Runner.stdoutFunc (file:///C:/Users/aminy/Documents/GitHub/JavaScript/@atom-ide-community/atom-script/lib/runner.js:44:18)
    at Socket.<anonymous> (C:\Users\aminy\AppData\Local\atom\app-1.55.0\resources\app\static\<embedded>:14:1120219)
    at Socket.emit (events.js:200:13)
    at addChunk (_stream_readable.js:294:12)
    at readableAddChunk (_stream_readable.js:271:13)
    at Socket.Readable.push (_stream_readable.js:210:10)
    at Pipe.onStreamRead (internal/stream_base_commons.js:166:17)
display @ script-view.js:180
(anonymous) @ view-runtime-observer.js:16
simpleDispatch @ <embedded>:11
emit @ <embedded>:11
stdoutFunc @ runner.js:44
(anonymous) @ <embedded>:14
emit @ events.js:200
addChunk @ _stream_readable.js:294
readableAddChunk @ _stream_readable.js:271
Readable.push @ _stream_readable.js:210
onStreamRead @ internal/stream_base_commons.js:166
script-view.js:181 &lt;!DOCTYPE html&gt;

It is the output of the following python code which triggers this error:

import requests

head = {'User-Agent': 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/65.0.3325.181 Chrome/65.0.3325.181 Safari/537.36'}

r = requests.get('https://www.oxfordlearnersdictionaries.com/us/wordlists/oxford3000-5000', headers=head)

print(r.text)

Related to atom-community/atom-script#2358

Why ansi-to-html fails to process the text if it encounters \r sequence?

'\x1b[94mANSI \x1b[39;49mHello \r \x1b[96mWorld\x1b[0m' - this produces only
.

While replacing \r with '\n' prints the rest of the text - 'World`.

I expected the converter to ignore unknown chars and continue rendering.

I just tried processing the following text:

"\u001b[H\u001b(B\u001b[mtop - 02:11:23 up 36 days, 18:31,  0 users,  load average: 4.25, 5.34, 5.98\u001b(B\u001b[m\u001b[39;49m\u001b(B\u001b[m\u001b[39;49m\u001b[K\r\n\r\n%Cpu(s):\u001b(B\u001b[m\u001b[39;49m\u001b[1m 21.7 \u001b(B\u001b[m\u001b[39;49mus,\u001b(B\u001b[m\u001b[39;49m\u001b[1m  8.7 \u001b(B\u001b[m\u001b[39;49msy,\u001b(B\u001b[m\u001b[39;49m\u001b[1m  0.0 \u001b(B\u001b[m\u001b[39;49mni,\u001b(B\u001b[m\u001b[39;49m\u001b[1m 68.3 \u001b(B\u001b[m\u001b[39;49mid,\u001b(B\u001b[m\u001b[39;49m\u001b[1m  0.0 \u001b(B\u001b[m\u001b[39;49mwa,\u001b(B\u001b[m\u001b[39;49m\u001b[1m  0.0 \u001b(B\u001b[m\u001b[39;49mhi,\u001b(B\u001b[m\u001b[39;49m\u001b[1m  1.1 \u001b(B\u001b[m\u001b[39;49msi,\u001b(B\u001b[m\u001b[39;49m\u001b[1m  0.3 \u001b(B\u001b[m\u001b[39;49mst\u001b(B\u001b[m\u001b[39;49m\u001b(B\u001b[m\u001b[39;49m\u001b[K\r\nKiB Mem :\u001b(B\u001b[m\u001b[39;49m\u001b[1m 62916344 \u001b(B\u001b[m\u001b[39;49mtotal,\u001b(B\u001b[m\u001b[39;49m\u001b[1m  3671244 \u001b(B\u001b[m\u001b[39;49mfree,\u001b(B\u001b[m\u001b[39;49m\u001b[1m 39924484 \u001b(B\u001b[m\u001b[39;49mused,\u001b(B\u001b[m\u001b[39;49m\u001b[1m 19320616 \u001b(B\u001b[m\u001b[39;49mbuff/cache\u001b(B\u001b[m\u001b[39;49m\u001b(B\u001b[m\u001b[39;49m\u001b[K\r\nKiB Swap:\u001b(B\u001b[m\u001b[39;49m\u001b[1m 63963132 \u001b(B\u001b[m\u001b[39;49mtotal,\u001b(B\u001b[m\u001b[39;49m\u001b[1m 61726208 \u001b(B\u001b[m\u001b[39;49mfree,\u001b(B\u001b[m\u001b[39;49m\u001b[1m  2236924 \u001b(B\u001b[m\u001b[39;49mused.\u001b(B\u001b[m\u001b[39;49m\u001b[1m 22105164 \u001b(B\u001b[m\u001b[39;49mavail Mem \u001b(B\u001b[m\u001b[39;49m\u001b(B\u001b[m\u001b[39;49m\u001b[K\r\n\u001b[K\r\n\r\n\r\n\r\n\u001b[J"

and the output I get has a bunch of '(B' being displayed. Looking at reference document (https://www.csie.ntu.edu.tw/~r92094/c++/VT100.html) it is for Set United States G0 character set '.

It would be good to have the support added, but in the short-term this could be treated as a no-op, rather than being displayed?

I am hoping to use this package as part of an atom.io package to get color coded output from tests moxley/atom-ruby-test#9

Are there any plans for this package to support escaping of html/xml characters so that this package ends up emitting valid html with things like < characters escaped properly?

Hi, thanks a lot for the great job on ansi-to-html!

I'm a Drone CI user, Drone CI use ansi-to-html to render console output.
It works almost fine, while tput doesn't work correctly, I reported a bug to downstream, and then notice ansi-to-html is the right upstream: harness/gitness#1491

To reproduce:
$ tput sgr0 | ansi2html

Expected result:
No text in <body></body>
Actual result:
There is a (B which is unexpected:

 48 <body>
 49 <pre>(B</pre>
 50 </body>

I rebuilt latest ansi-to-html and confirmed it can be reproduced at 7d34444

Could you have a look? Thanks a lot!

Hi,

I want to update some dependencies but I can't find what changed between 0.2.0 and 0.3.0. What were the major changes and are there any breaking changes?

chalk.inverse('hello')
> '\u001b[7mhello\u001b[27m'

new ansiToHTML().toHtml('\u001b[7mhello\u001b[27m')
> 'hello'

I think swapping fg and bg would be fine for this.

This can be seen when using ansiToHtml with the output from tsc (typescript's compiler) - which uses inverse for the "gutter" which includes the line numbers.

ANSI

HTML

Not sure if this is the right place for this issue, but is similar to #12, though I can't think of a good workaround in case this is also tricky to support.

Some of my build tools display progress bars or spinners (\ to | to /), and attempt to clear the "terminal" before redrawing, but instead generate a lot of redundant output when run through something like atom-build.

Before Faint

After Faint

Source

    <pre class="console">Error: 
        <span style="filter:brightness(0.7)">expect(<span style="color:#A00">value<span style="color:#FFF"><span style="filter:brightness(0.7)">).toMatchSnapshot(<span style="filter:brightness(0.7)">)
        <br>
        <br>
        <span style="color:#A00">Received value<span style="color:#FFF"> does not match <span style="color:#0A0">stored snapshot "Functional tests for reporting-score-by-segments-over-time Renders all the views 1"<span style="color:#FFF">.
        <br>
        <br>
        <span style="color:#0A0">- Snapshot<span style="color:#FFF">
            <br>
            <span style="color:#A00">+ Received<span style="color:#FFF">
                <br>
                <br>
                <span style="color:#A50">@@ -20,10 +20,11 @@<span style="color:#FFF">
                    <br>
                    <span style="filter:brightness(0.7)">  0.0Total Calculation
                    <br>
                    <span style="filter:brightness(0.7)">  All Properties<br><span style="filter:brightness(0.7)">  No - Inquiry Unresolved
                    <br>
                    <span style="filter:brightness(0.7)">  34.3Total Calculation
                    <br>
                    <span style="filter:brightness(0.7)">  All Properties<br><span style="color:#A00">+ Arrow Right IconArrow without a line pointing right.<span style="color:#FFF"><br><span style="filter:brightness(0.7)">  -100
                    <br>
                    <span style="filter:brightness(0.7)">  -50
                    <br>
                    <span style="filter:brightness(0.7)">  0
                    <br>
                    <span style="filter:brightness(0.7)">  50
                    <br>
                    <span style="filter:brightness(0.7)">  100<br>    at toMatchSnapshot (./web/modules/score-by-segments-over-time/demo/functional.test.js:26:38)<br>    at Generator.next (&lt;anonymous&gt;)
                    <br>
                    at step (./web/modules/score-by-segments-over-time/demo/functional.test.js:3:351)
                    <br>
                    at ./web/modules/score-by-segments-over-time/demo/functional.test.js:3:511
                    <br>
                    at process._tickCallback (internal/process/next_tick.js:68:7)
                    </span>
                    </span>
                    </span>
                    </span>
                    </span>
                    </span>
                    </span>
                    </span>
                    </span>
                    </span>
                    </span>
                    </span>
                    </span>
                    </span>
                    </span>
                    </span>
                    </span>
                    </span>
                    </span>
                    </span>
                    </span>
                    </span>
                    </span>
                    </span>
                    </span>
                    </span>
                    </span>
                    </pre>

It looks like all the <span style="filter:brightness(0.7)"> tags are getting closed at the end instead of after where they are needed.

Use the example on readme:

var Convert = require('ansi-to-html');
var convert = new Convert();

convert.toHtml('\x1b[30mblack\x1b[37mwhite');

this will generated a html structure like this:

<span>
  black
  <span>
    white
  </span>
</span>

But I think it's better to generate a html like this:

<span>
  black
</span>
<span>
  white
</span>

Lots of unnecessary nested layers will slow down the browser. Another package ansi-html doesn't have this problem.

This issue is going to be vague because I'm not sure what exactly is going but I can demonstrate the bug.

I'm using cli-table3 to generate a table with the styles cyan and bold for the header row.

With both of those styles, this output is generated for the header line:

'\u001b[90m│\u001b[39m\u001b[1m\u001b[36m name             \u001b[39m\u001b[22m\u001b[90m│\u001b[39m'

<span style="color:#555">│<span style="color:#FFF"><b><span style="color:#0AA"> name             <span style="color:#FFF"><span style="color:#555">│<span style="color:#FFF"></span></span></span></span></b></span></span>

What to me appears to be relevant here, is that the <b> tag is not closed until the end, even though \u001b[22m appears right after the word name.

Now look at the same output, except with the cyan style removed:

'\u001b[90m│\u001b[39m\u001b[1m name             \u001b[22m\u001b[90m│\u001b[39m'

<span style="color:#555">│<span style="color:#FFF"><b> name             </b><span style="color:#555">│<span style="color:#FFF"></span></span></span></span>

Now, <b> is closed right after the word name.

Hopefully this made sense.

Also, if you have npx installed, you can see the bug in action in my project with this:

echo '[{"foo":1,"bar":2},{"foo":2,"bar":1}]' | npx [email protected] -I -o table

Hi Team, getting ansi-html (0.0.7) Security Vulnerability issue under react-scripts, please let us how do we update to new version