Colorizing log buffer with ANSI color codes

Question

I have an issue with a log output in a buffer, that i get from Flutter / Dart via akinsho/flutter-tools.nvim. The log contains some ANSI color codes, see below. I believe the actual color code is the [38;5;12m and [0m on each line, but correct me if I'm wrong.

D/VRI[MainActivity]( 3255): Cancelling draw. cancelDueToPreDrawListener=true cancelDueToSync=false
I/flutter ( 3255): [38;5;12mProvider<NotificationService> Created - value: Instance of 'NotificationService'[0m
I/flutter ( 3255): [38;5;12mBaseNotificationService | onAppStarted - [0m
I/flutter ( 3255): [38;5;12mProvider<FirebaseMessagingRepository> Created - value: Instance of 'FirebaseMessagingRepository'[0m
I/flutter ( 3255): [38;5;12mProvider<RemoteConfigService> Updated - Value: Instance of 'RemoteConfigService'[0m
D/VRI[MainActivity]( 3255): Cancelling draw. cancelDueToPreDrawListener=true cancelDueToSync=false
I/flutter ( 3255): [38;5;12msharedLocalizationsProvider Created - value: Instance of 'SharedLocalizationsSv'[0m

What I'm trying to do is to get the lines to have the correct colors, and I have tried a few different plugins, such as norcalli/nvim-colorizer.lua, chrisbra/Colorizer and MTDL9/vim-log-highlighting.

But I can't get any of them to do what I want. The first two doesn't work at all (the color doesn't change). Neither automatically, nor by running the command that is supposed to colorize the current buffer. And the third plugin does work, but it doesn't colorize based on ANSI codes.

I'm sure I'm doing something wrong, but I just can't figure out what. Any help is appreciated!

Here is my config, if that is of interest: https://github.com/Hannnes1/nvim-config

Update: I tried the AnsiEsc.vim plugin (from here), and that almost works. It removed all the escape codes from the Flutter log, but didn't change any colors. However, when I tried it in the sample in :h AnsiEsc, it colors some codes, like [30;5mblack[m , but not [30;48;5;22m/ \[m. Not sure what the reason for that is.

Update 2: I can get the colors to work if I disable 24-bit color (reset termguicolors to false). So I would need to find a way to make ANSI escape sequences work with 24-bit colors, I think?

Answer 1

I believe your example lack the ^[ aka Esc character obtained by hitting Ctrl vEsc.

With these character inserted I have the following result:

For the following text:

I/flutter ( 3255): ^[[38;5;12msharedLocalizationsProvider Created - value: Instance of 'SharedLocalizationsSv'^[[0m
D/VRI[MainActivity]( 3255): Cancelling draw. cancelDueToPreDrawListener=true cancelDueToSync=false
I/flutter ( 3255): ^[[38;5;12mProvider<NotificationService> Created - value: Instance of 'NotificationService'^[[0m
I/flutter ( 3255): ^[[38;5;12mBaseNotificationService | onAppStarted - ^[[0m
I/flutter ( 3255): ^[[38;5;12mProvider<FirebaseMessagingRepository> Created - value: Instance of 'FirebaseMessagingRepository'^[[0m
I/flutter ( 3255): ^[[38;5;12mProvider<RemoteConfigService> Updated - Value: Instance of 'RemoteConfigService'^[[0m
D/VRI[MainActivity]( 3255): Cancelling draw. cancelDueToPreDrawListener=true cancelDueToSync=false
I/flutter ( 3255): ^[[38;5;12msharedLocalizationsProvider Created - value: Instance of 'SharedLocalizationsSv'^[[0m
^[[30;48;5;22mBlack on Green^[[m

Where ^[ again are the Esc character obtained by hitting Ctrl vEsc.

Remark: I inserted them in your text by running:

:%s/\[\d\+/^[&/g

Where ^[ is obtained by hitting Ctrl vEsc :-)