80

I have a process that writes a log file which includes ANSI color codes. When I view the file on the terminal with cat, the colors are rendered correctly. When I view it with less, by default I see codes like ESC[32m but I can use the -R switch to see the colors (e.g. less -R log.txt).

I would like to be able to view and even possibly edit the file in VSCode, with the colors displayed correctly. How can I do this?

dan carter
  • 4,158
  • 1
  • 33
  • 34
rjmunro
  • 27,203
  • 20
  • 110
  • 132
  • 3
    I've found https://github.com/aziz/SublimeANSI that seems to do it for sublime, but nothing for VS Code – rjmunro Feb 22 '18 at 22:54
  • I don't need to edit, just view would be great. – MattG Jul 04 '18 at 23:47
  • 2
    I'd love to know if someone implemented this as well. – julien_c Jul 19 '18 at 20:08
  • 5
    Upvote this issue: https://github.com/microsoft/vscode/issues/38834 – Mark Mar 06 '20 at 21:04
  • 3
    At present, Tobias Faller have realized this function by writing extensions. → [Terminal Color and Style Highlighting for the Editor - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=Tobias-Faller.vt100-syntax-highlighting) – Andy Apr 16 '21 at 04:05
  • 2
    This question IS ON TOPIC, per the third bullet point at the top of https://stackoverflow.com/help/on-topic namely `software tools commonly used by programmers`. – Jeff Apr 18 '21 at 17:47
  • 1
    This question is being [discussed on meta](https://meta.stackoverflow.com/questions/406915/please-reopen-so-question-48339982-because-it-is-on-topic). – 10 Rep Apr 18 '21 at 18:04
  • The solution is a plugin named "ANSI Colors". – Antonio Petricca May 07 '21 at 06:52

2 Answers2

57

The ANSI Colors extension exists since 2020/10/13:

enter image description here

TL;DR

Once installed, you can use the preview button in the top right (just like for Markdown):

enter image description here

Long Version

  1. Install the ANSI Colors extension.
  2. Open your ANSI file.
  3. Use the preview button, or their custom commands to open the ANSI color preview, just like in this screenshot: enter image description here
    • Press F1 or CTRL/Command + SHIFT + P (to open the VSCode command interface).
    • Type "ansi" or "preview" to find the commands.
    • Select with Up/Down arrow keys.
    • Finally, hit enter.
    • NOTE: As you can see, the command interface also shows you keyboard shortcuts, if you prefer those.

More usage and configuration options are explained on the extension page.

Domi
  • 22,151
  • 15
  • 92
  • 122
  • 3
    Until discovering this answer, I (wrongly) concluded the [ANSI Colors plugin](https://marketplace.visualstudio.com/items?itemName=iliazeus.vscode-ansi) did not work. Your step #2 had eluded me, `...custom commands to open the ANSI color preview.` I failed to (**carefully**) RTFM. Thank you! – ScottWelker Jan 05 '22 at 19:33
  • 1
    this looks great - but I noticed that this only appears to work for `.ans` or `.ansi` extensions by default. You can open preview mode manually and that works. But it looks like you have this workingn by default for `.txt` extensions - how did you manage that? - I can't for a setting to add more extensions – code_fodder May 11 '22 at 10:57
  • @code_fodder I just open it manually. I'd rather shoot myself in the foot before I have VSCode bombard me with all kinds of unwanted previews. After all, most `txt` files are not `ANSI`. – Domi May 11 '22 at 12:03
  • 1
    But... if you really wanted to shoot yourself in the foot? : ) - In my case I want to associate `.log` files which, for my part almost always have ansi colours... – code_fodder May 11 '22 at 15:30
  • @code_fodder check the docs: https://github.com/iliazeus/vscode-ansi#custom-file-icon – Domi May 11 '22 at 16:44
  • 1
    that is for icons. @code_fodder and I want to enable for this extension only. Is that possible? – ahrooran Jun 09 '23 at 06:38
0

Note: on Windows, Curly and colored underlines would not be supported on Windows.

https://user-images.githubusercontent.com/6193135/76248036-d50c3f00-6240-11ea-855b-37e8aec72014.png

That should change with VSCode 1.71 (Aug. 2022) and issue 156983, resolved by Upgrading to xterm.js v5 beta.

And VSCode 1.72 (Sept. 2022) should come with Support hyperlink ansi escapes in the integrated terminal (issue 39278).
https://user-images.githubusercontent.com/170270/33316814-8b35c2d4-d435-11e7-8524-da4fa076e6fb.png.
It is in VSCode Insiders today.

VonC
  • 1,262,500
  • 529
  • 4,410
  • 5,250
  • This question is about `files`, not the terminal. But I guess, this is still quite useful information, albeit tangential – Domi Oct 14 '22 at 12:44
  • @Domi Agreed. I saw an improvement of color support both in terminal (and in files) starting with VSCode 1.72 on Windows. – VonC Oct 14 '22 at 13:16