0

I have installed the Output Colorizer extension for VSCode. However, there aren't any instructions for it that I could find. All I know is the extension creates "text/log", "text/x-log", "text/x-code-output", "x-code-output" mime-types.. which would allow me to specify custom colors for specific scopes that affect the Output Panel. All I've done is install the Output Colorizer extension.

What can I put in my settings.json file in order to override the text colors for the VSCode's Output Panel (in the screenshot below)? I do not want to change my current "black" Panel background color, only the text color in this panel without affecting the text in the Editor pane. I can change the dark red color below, but not without changing the color for the strings scope for all languages.

enter image description here

halfer
  • 19,824
  • 17
  • 99
  • 186
MKANET
  • 573
  • 6
  • 27
  • 51

2 Answers2

1

The colorizer extension just uses regular expressions to parse strings/numbers/quotes/dates/etc... and uses the default styles from your selected VS Code theme and applies them.

You can see the mapping of regex to the theme's css styles here: https://github.com/IBM-Cloud/vscode-log-output-colorizer/blob/master/src/syntaxes/log.tmLanguage#L14

For example, dates will be given the constant.numeric style:

<dict>
    <!-- Date MM/DD/(YY)YY -->
    <key>match</key>
    <string>\b(((0|1)?[0-9][1-2]?)|(Jan(uary)?|Feb(ruary)?|Mar(ch)?|Apr(il)?|May|Jun(e)?|Jul(y)?|Aug(ust)?|Sept(ember)?|Oct(ober)?|Nov(ember)?|Dec(ember)?))[/|\-|\.| ]([0-2]?[0-9]|[3][0-1])[/|\-|\.| ]((19|20)?[0-9]{2})\b</string>
    <key>name</key>
    <string>constant.numeric</string>
</dict>

Unfortunately, this extension does not allow you to specify your own styles or rules, but I'll keep that in mind as a new feature request.

(I am the extension author).

halfer
  • 19,824
  • 17
  • 99
  • 186
Andrew Trice
  • 701
  • 5
  • 8
  • Thanks Andrew. Is there a way to apply the above example style to ONLY the Output Panel (not the Editor pane)? – MKANET Sep 17 '19 at 22:29
0

As a workaround solution (far from great, but works..), you can:

1- Install the mentioned "Output Colorizer" VS Code extension

2- Edit directly its internal config/mapping file

(to overcome the fact that this extension doesn't seem to support customizations from the vs code editor...).

From any terminal, as an example on macos with default vs code installation where the .vscode directory is simply located in your home dir (or else, just try to find where your .vscode folder is located, and depending on which version of the 'output colorizer' you've installed, at the time of this writing latest is 0.1.2), do:

vi ~/.vscode/extensions/ibm.output-colorizer-0.1.2/src/syntaxes/log.tmLanguage

Then, go modify any existing "dict[ionary]" mapping (or add net new ones by usually coping existing ones and then modifying them..), specifically any of the 2 values (keep the 2 hardcoded values as is or you'll break the dict mapping).

The first value being the regex that is used to target any of your vs code output logs/strings that you want to colorize.

The second value is used to map to an "already existing vs code theme token" (note: a vs code theme is made of multiple theme "tokens" and each token represents something in your editor for which a color will be applied; you can't introduce a new custom value/token here, you can only map to an existing one, refer to this answer for several available tokens that you could use).

Depending on your vs code theme that you are already using, each token will be associated to a certain color. Then, such token can always be overridden in vs code with a different color, but that's a separate discussion to have, and there are many existing threads to tell you how to do so.

At first, I recommend you to simply bind to existing theme tokens and try it out..

For example, here's a new/custom entry that I added to that file mentioned above, in order to highlight all "Successful" or "Success" or "Pass" strings from my vs code output console to match my vs code theme's "comment.line" token color (my current "comment.line" theme token's color is set to green):

            <dict>
                <!-- Success -->
                <key>match</key>
                <string>\b(?i:((\.)*[a-z]|[0-9])*(Successful|Success|Pass))\b</string>
                <key>name</key>
                <string>comment.line</string>
            </dict>

So, if you would like certain keywords/strings from your output panel to be of different colours, without affecting your other vs code editors which rely on the same theme tokens, then the idea is simply to edit that mapping file like mentioned above, and use "different" theme tokens (for the 2nd tag of your entries) than the ones you do not want to modify. Once done, either those different tokens are already associated with the colours that you wanted for your output, OR, you can now go in vs code and customize the colours of those other tokens, without changing the ones that you did not want to change.

3- Restart the extension (or VS Code) to apply your changes

Once you're done with your changes to the above file, you'll need to restart vs code for the changes to take effect, OR, simply restart the extension, by going in the extension panel, and simply "Disable" + "Enable" this "Output Colorizer" extension, and voila! Your vs code output will be highlighted as per that mapping file. If you have cleared your output, just execute whatever task that generates the output that you wanted some specific keywords to be highlighted, and they will be (if you've made the right changes, of course!;-) ).

franky duke
  • 269
  • 2
  • 8