Vscode: ANSI color support in edit buffer

[ryenus]

Now ANSI colors are supported in the debug console, I'd like to see it in the editor, something like SublimeANSI.

• VSCode Version: 1.19
• OS Version: macOS

Steps to Reproduce:

1. open a file which contains ANSI color escape sequence, or simply ls --color | code
2. colorless raw ANSI code displayed, rather than colored text.

Reproduces without extensions: Yes

[xpe]

On behalf of a friend who is too busy coding to report this problem, this still exists on macOS with VS Code 1.24.1.

[Goku-San]

hello is the problem with ANSI color solved for editor and how, if it is?
I am on windows 7 x64 and have 1.28.2 version of vs code and when I open file with ANSI coloring I get gibberish
vscode!ansi
Apart from this everything is a-ok :)

[konradzdeb]

On behalf of a friend who is too busy coding to report this problem, this still exists on macOS with VS Code 1.24.1.

So ... vim community solved that problem in 2004.

[kyuknis]

This would sure be nice when reviewing Linux logs such as boot.log, where ANSI colors are used for the output. Maybe this would be best handled with a extension though?

[adrienjoly]

Here's an extract from another file that I generated with jest --color and for which I'd love to see colors in VSCode:

  ✔ 1-golden-path › DELETE /notes/:id - returns a status 200
  ✔ 1-golden-path › DELETE /notes/:id - did delete the note (140ms)
  ✖ 2-failure-cases › POST /signup without password - returns an error 
  ✖ 2-failure-cases › POST /signup without password - returns a status 400 
  ✔ 2-failure-cases › POST /signup without password - returns no token

The ✖should be displayed in red, the ✔in green, and the (140ms) in dark gray, like this:

[electrovir]

Currently, from what I can find, there's no extension that does this. It'd be a killer feature for VS Code for me!

[bheimbaugh]

I was just looking for this feature too. My terminal can log to a text file, but when I view the file in VSCODE it's full of escape sequences. Would be nice have a way to either hide them or render them.

[bochen2014]

no update?????

[abarenboym]

Anything yet?

[JtMotoX]

This would be an awesome feature!

[dapirian]

Much needed feature

[bochen2014]

can't believe this feature is still not provided 2+ year after it was raised...

meanwhile, so many useless features have gone through the line...

[Kimchoky]

This awesome feature should be go on!

[dhowe]

Any status on this? Its very annoying

[bedge]

This needs to be supported in diffs as well. ie: show the ANSI color in the diff view, rather than ~ {

[queglay]

This would be very helpful if we could read gitlab raw ANSI output logs this way.

[sharm294]

The workaround for this issue that I've been using is:

1. Get the data with ANSI codes in a file (e.g. boot.log)
2. Use ansi2html.sh to convert it to an HTML file. That can be done from the terminal using cat boot.log | ./ansitohtml.sh --bg=dark > boot.html for example.
3. Preview the file using any one of the HTML preview extensions in VScode

Of course, the output is read-only but it lets me see the colored data in VScode without needing to switch to vim or Sublime.

Edit: ansi2html is also a pip package

[mirao]

@sharm294, thanks for tip.
ansi2html.sh is quite slow and produces big HTML file when processing debug log from CodeceptJS.
So I used similar tool ansi2html from project colorized-logs. It's much faster with smaller HTML output. It can be installed on Ubuntu by apt install colorized-logs.

[aesyondu]

I was just wondering what all the weird SQL logs for rails meant, then I found this.

This shows the log with ansi colors:

less -r log/development.rb

[chase-moskal]

it's strange to me that this isn't considered basic functionality for a code editor

as an irritating workaround, we can whip up a terminal and use cat log.log or less -R log.log

[CodeFinder2]

Also (still) interessted in this feature ...

[queglay]

it is the standard raw output of a gitlab log, it would be helpful for it to be considered.

[muman613]

We really would like this feature. Can't believe nobody has been able to add support for this.

[chase-moskal]

we cry out, in anguish! but in a pile of 5000+ open github issues.. nobody can hear you scream! :scream:

[queglay]

My solution for this sole issue is sublime text.

[shankfoo]

it is the standard raw output of a gitlab log, it would be helpful for it to be considered.

Adding that this is the standard raw output of a Terraform log.

[TobiasFaller]

I made a VS Code extension since I could not find one which provides this feature. It's not perfect, but enough for my use-case. If someone wants to have a look, the repository is here at vt100-syntax-highlighting and the extension VT100 Syntax Highlighting is already in the VS Code Marketplace.

[JtMotoX]

@TobiasFaller - This is brilliant! Thanks 👍

I also added the file association for *.log so it will default to your extension. Is it at all possible to have it remove/hide the characters instead of just changing them to black? This would be helpful so when I have to copy/paste some of the logs for troubleshooting to to share with my team, for example json, it includes the characters and makes the json invalid.

"files.associations": {
        "*.log": "vt100",
        . . .
},

[TobiasFaller]

@JtMotoX I have not found a method to remove characters from the displayed text yet.
One solution would be to add a command to remove all escape sequences. This would then disable the color highlighting though.
The other solution is to use the color #00000000 for the escape sequences which hides them and leaves only a space.

In the meantime I have found some plugin that uses highlights to change the background color for characters. I will check if this method can be used to implement background colors for the VT100 plugin.

[JtMotoX]

@TobiasFaller The end-goal is to have the characters processed and not shown. It might only be possible if Microsoft includes builds this into VSC which is what this "issue" was opened for. Ideally, it would provide the same result that we get in terminal/ssh with cat. When I cat the file, the ANSI is processed and the characters are not shown. This allows me to select and copy lines and paste them into a document/email. With your extension, they are still present, and just changing the character's color to #000 still gets copied into the email. Your extension is better than nothing and I appreciate it, but it only takes care of half of this need.

[TobiasFaller]

@JtMotoX How about creating a preview panel similar to the one in the Markdown extension: This preview could render the colored text into a web based view and act like a terminal. This would enable to edit the file as raw data in the editor with basic coloring and have the colored preview shown like in a terminal with interpreted escape codes.

[JtMotoX]

@TobiasFaller Now with that we are getting pretty close to the end-goal. Would be nice if Microsoft could add that built-in without requiring the Preview pane but your idea is probably as close as we are going to get with an extension.

[TobiasFaller]

@JtMotoX I have now written a prototype which looks quite promising. The code needs to be refactored and some bugs are still present, but for a first implementation attempt this seems to work fine.

[queglay]

It didn't work for me on MacOS, I'm not sure what I'm missing.

I installed the plugin, and opened an ANSI encoded github log, selected VT100 in the bottom right corner, but it didn't change any colours at all.

[TobiasFaller]

The plugin activation is still buggy (It's a pre-release). Try to open a second editor and then focus the initial editor view.

[TobiasFaller]

@JtMotoX @queglay The extension version 0.0.10 is now available. The current version includes the preview panel, escape sequence snippets, html and text export and fixes most of the activation problems. It would be nice if you could give feedback.

[cedrusx]

@TobiasFaller Thank you for building this awesome extension! I tried it out and it works, but in the preview panel the escape characters are still shown. Would you make them hidden in future release as discussed above?

[TobiasFaller]

@TobiasFaller Thank you for building this awesome extension! I tried it out and it works, but in the preview panel the escape characters are still shown. Would you make them hidden in future release as discussed above?

@cedrusx I tried to reproduce the problem and implemented an additional filter for the preview. This feature will be in version 0.0.12. Feel free to give feedback if this solved your problem.

[GaboFDC]

I also found https://github.com/iliazeus/vscode-ansi which removes the escape characters, so maybe both extensions can be improved from each other

[TobiasFaller]

I also found https://github.com/iliazeus/vscode-ansi which removes the escape characteres, so maybe both extensions can be improved from each other

@GaboFDC Thank you for the note. This extension seems to be quite new and has some interesting additional features, like support for using the theme colors and cancellation tokens for the rendering process. I might add these features to my current extension in the future. Removing the escape sequences is implemented quite similar though and uses a preview too.

[TobiasFaller]

@iliazeus You are welcome to contribute to / copy from the existing plugin at https://github.com/TobiasFaller/vscode-vt100-syntax-highlight.