Reputation: 28076

Can I display a file with ANSI color escape sequences in Visual Studio Code?

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?

Upvotes: 107

Answers (3)

Domi

Reputation: 24628

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

TL;DR

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

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

Long Version

Install the ANSI Colors extension.
Open your ANSI file.
Use the preview button, or their custom commands to open the ANSI color preview, just like in this screenshot:
- 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.

Upvotes: 88

TobiPlusPlus

Reputation: 73

Disclaimer: I'm the author of the extension.

You could have a look at the Terminal Color and Style Highlighting for the Editor extension for VS Code. It provides VT100 code highlighting inside the editor, has code snippets to write escape codes yourself and it has an accurate preview which includes blinking animations. Note that 24 bit RGB color codes are not highlighted at the moment, have a look at the ANSI Colors extension for that.

How to open a document with the extension?

Install the extension from your Marketplace or source of choice.

Visual Studio Marketplace, Open VSX Registry
Configure the language to be VT100 Terminal on the bottom right of VS Code. You can also use the Change Language Mode command, with has the shortcut Ctrl + K and then M when using the default Windows shortcut configuration.
If you want to open the more accurate preview click on the preview button on the top right. You can also use the Open Preview to Side command, which has the shortcut Ctrl + K and then V when using the default Windows shortcut configuration.
If you want to permanently associate specific types with the preview use the files.associations configuration setting:

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

Inline escape code highlighting

In case you want to see the escape codes inside your tool that generates the logs, this extension can help you too. Configure the inline decorations to be enabled for your language by adjusting the following configuration setting. Note however, that unclosed escape codes will make the rest of your document be highlighted.

"vt100.decorate-includes": "python|shellscript"

Performance comparison to ANSI Colors plugin

I have tested my plugin with log files up to 1 GB in size. Result: works okay-ish. However, if you have gigantic log files (>> 1 GB) then maybe have a look at the ANSI Colors plugin. It uses a leaner data structure (bit flags instead of a dictrionary) for storing the color information and might be faster in rendering. It also supports 24 bit RGB color codes if this is required.

Upvotes: 2