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:

  �[32m✔�[39m 1-golden-path �[90m�[2m›�[22m�[39m DELETE /notes/:id - returns a status 200
  �[32m✔�[39m 1-golden-path �[90m�[2m›�[22m�[39m DELETE /notes/:id - did delete the note�[90m�[2m (140ms)�[22m�[39m
  �[31m✖�[39m 2-failure-cases �[90m�[2m›�[22m�[39m POST /signup without password - returns an error 
  �[31m✖�[39m 2-failure-cases �[90m�[2m›�[22m�[39m POST /signup without password - returns a status 400 
  �[32m✔�[39m 2-failure-cases �[90m�[2m›�[22m�[39m 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.

[bchenSyd]

no update?????

[abarenboym]

Anything yet?

[JtMotoX]

This would be an awesome feature!

[dapirian]

Much needed feature

[bchenSyd]

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 �[33m~�[0m �[0m{

[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

[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.

[sepideha]

My solution for this sole issue is sublime text.

And what do you do for diff of two files in Sublime? That was quite annoying in sublime ...

[xpe]

There is a lot of good useful converation here. However, please, I would ask that people hold off from saying things such as:

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

no update?????

Anything yet?

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...

Any status on this? Its very annoying

Also (still) interessted in this feature ...

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

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

My solution for this sole issue is sublime text.

And what do you do for diff of two files in Sublime? That was quite annoying in sublime ...

Here's the problem: such comments don't move the conversation forward. They might be off-topic, impatient, or snarky. In any case, they squander people's valuable time and attention.

So, please, let's work together to reduce the signal to noise ratio, not only in this particular issue but across all of our online discussions. Please think about these recommendations:

• Read the entire comment thread first.
• As you read the comments, react with emoji to weigh in (e.g. you agree or disagree)
• After reading all the comments, if you feel like you have something constructive and informative to contribute, please do.
• Please ask: "How can I contribute in a way that will be valuable to others?". This is a combination of "be kind" and "know your audience".
• Lastly, reflect on (a) how much time you spending preparing and writing versus (b) the total time others will spend reading what others write. I hope this will encourage you to take some extra time to be constructive and clear, because this better respects other people's time.

Finally, I would like to thank:

• TobiasFaller for the vscode-vt100-syntax-highlight extension.
• the others who have given Tobias constructive feedback

[TobiasFaller]

Thank you all for the feedback.
Version 1.0.0 of the plugin is now published and should be feature-complete (for now).
If somebody needs an additional feature feel free to open an issue on the plugin's repository page.
(If someone has the skills to create a less ugly icon for the plugin then feel free to create a merge request.)

Repository: Link to github.com
Marketplace: Link to marketplace.visualstudio.com

The following features have now been implemented:

• Editor: Color and styling support
  • Now uses the VS Code terminal theme as default (Idea taken from vscode-ansi plugin)
  • Colors and style can be fully customized
• Editor: Snippets to write escape sequences
• Preview: Terminal-like preview of the file
  • Synchronous scrolling with the editor view
• Export: Text export without escape sequences (raw text)
• Export: HTML export with rendered escape sequences (colored and styled text)
  • Uses a fallback color theme as the VS Code API has currently some limitations

[bsburns]

Can you configure VSC such that it opens *.log files into VT-100 Preview mode by default? Since preview doesn't allow you to search, I guess I would prefer a way to open log file in normal editor without escape code, but with color highlighting. I coude make the escape codes invisible with:
"vt100.escape-sequence": { "opacity": "0.0 !important" },
But that still leaves the spaces where the escape codes would be.

[abelyeupear]

As @bsburns mentions, this still doesn't quite solve the issue because in a long .log file, you can't search yet, which is very important. My current workaround is:

• Use VSCode "ANSI Colors" extension
• In .log file (command palette): ANSI Text: Open Preview.

It's actually fast and allows you to search... I wish there was a better solution, but this is the best I got.

[gdavidkov]

I fixed it using this thread
https://stackoverflow.com/questions/51680709/colored-text-output-in-powershell-console-using-ansi-vt100-codes

[kwinz]

Does this preserve ANSI escape codes including colors when saving to a .txt (Plain Text) file?
When I tested saving and reopening a colored text from the edit buffer as .txt file, it wouldn't show colors any more.
The colors are just saved as plain character codes, they should survive being saved as Plain Text.

[ReetiMauryaCrest]

This is really not an solution, but if you just want to see the logs in colored format for debugging purposes like me. Use "less -r file.log" or "type file.log" in windows.

[TobiasFaller]

Can you configure VSC such that it opens *.log files into VT-100 Preview mode by default? Since preview doesn't allow you to search, I guess I would prefer a way to open log file in normal editor without escape code, but with color highlighting. I coude make the escape codes invisible with: "vt100.escape-sequence": { "opacity": "0.0 !important" }, But that still leaves the spaces where the escape codes would be.

@bsburns There is now the option to open the preview for *.log files by default (https://marketplace.visualstudio.com/items?itemName=Tobias-Faller.vt100-syntax-highlighting#open-preview-directly-or-by-default). I would appreciate feedback.

In a test build I enabled the search option for the WebPanel preview but it segfaults as soon as the document is switched when a search was active. I'll have to report a few bugs to VS Code before I'll be able to add a convenient search function that ignores escape sequences.

[TobiasFaller]

This is really not an solution, but if you just want to see the logs in colored format for debugging purposes like me. Use "less -r file.log" or "type file.log" in windows.

@ReetiMauryaCrest Can you evaluate if the updated plugin contains everything for your use-case? Feedback is appreciated.
https://marketplace.visualstudio.com/items?itemName=Tobias-Faller.vt100-syntax-highlighting#open-preview-directly-or-by-default

[ReetiMauryaCrest]

@ReetiMauryaCrest Can you evaluate if the updated plugin contains everything for your use-case? Feedback is appreciated. https://marketplace.visualstudio.com/items?itemName=Tobias-Faller.vt100-syntax-highlighting#open-preview-directly-or-by-default

Thank you for the updated extension information. This works great for my usecase, I can now easily see my logs with just one preview click, this helps a lot.

[starball5]

Related on Stack Overflow: Can I display a file with ANSI color escape sequences in Visual Studio Code?

@TobiasFaller you're welcome to write an answer showing the capabilities of your extension and how to use it there. Just make sure that if you do, you follow the rules about self-promotion.