ryu1kn / vscode-text-marker

Visual Studio Code Extension. Select text in your code and mark all matches. The marking colour is configurable
https://marketplace.visualstudio.com/items?itemName=ryu1kn.text-marker
MIT License
87 stars 17 forks source link

Have more highlights decorative options #48

Open IntoCpp opened 4 years ago

IntoCpp commented 4 years ago

Not sure how easy this would be in this context, but when I looked at the VS-extension sample "DecoratorSample" a while ago I was able to use options to decorate a text found via a RegEx: Background/foreground color, bold, italic, squared, underline (with underline-types: squiggle, doted, etc.), text opacity, (more?). There are also options in the same call to affect the "minimap" (or gutter? or editorOverviewRuler?): dot-color + right | middle | left.

Low priority but nice to have. Great job and thanks for this extension.

Edit: I put my hands on my 2 years old exploration code (sorry for the bad quality): I tested background (light and dark options), ruler-view and text-in-a-box features. The goal was to have setters for all those based on read user-options and apply it to the regex. I never had time to finish, and now I have your great extension :) If it helps good, otherwise, just ignore.

class DecoratorFactory
    {
        decorator: vscode.TextEditorDecorationType;
        constructor(){ this.decorator = vscode.window.createTextEditorDecorationType() }
        function add_ruler_view( color, position )
        {
            test_OverviewRuler( this.decorator,
                {
                    overviewRulerColor: color,
                    overviewRulerLane: position, // example: vscode.OverviewRulerLane.Left | Right | Center
                } );
        }
    }

/** Create a DecorationType: a box of the received color surounds the text match
      * @param color_light color to use on light color themes
      * @param color_dark color to use on dark color themes
      * @param color_ruler Color of the dot on the ruler for the match.
    */
    function test_box( color_light, color_dark, color_ruler ): vscode.TextEditorDecorationType
    {
        // THIS WORKS for 'red' - todo: find all the ways to do this please (tex, rgb, ...).
        return vscode.window.createTextEditorDecorationType(
            {
                borderWidth: '1px',
                borderStyle: 'solid', // TODO: Find the various posibilities...
                // overview-color: Match the user selected color for
                overviewRulerColor: color_ruler,
                overviewRulerLane: vscode.OverviewRulerLane.Left, // left appear to be used the least. TODO: pass this as a parameter.

                // this color will be used in light color themes
                light: { borderColor: color_light },
                // this color will be used in dark color themes
                dark: { borderColor: color_dark },
                // if it works apply the concept to all options.
            } );
    }

    /** Create a DecorationType: backgrouns is the received color.
     * @param color of the text match
    */
    function test_background( color ): vscode.TextEditorDecorationType
    {
        return vscode.window.createTextEditorDecorationType(
            {               
                // cursor: 'crosshair', // TODO: Add optional 'crosshair' to all these functions?
                // use a themable color. See package.json for the declaration and default values.
                backgroundColor: { id: color },
            });
    }
ryu1kn commented 4 years ago

Hi @IntoCpp , thanks for the suggestion and even providing the code snippet!!

Do you want to share the context of why you want more decoration options? I'm trying to limit the variety of features to avoid the plugin becomes slow or difficult to maintain; so I'd love to know how it can help your use-case 😉

IntoCpp commented 4 years ago

I fully understand if you want to limit the options. The user would understand that adding more reg-ex with more options then things will slows down. Context: I am very visual, and use (abuse?) this kind of tool. For me to have more options means faster search based on visual cue. It's the way my brain works I guess. I was a big user of Sublime-Text "PersistentRegexHighlight", and avoided VS-Code until I found your extension, just because I liked it so much. I understand your concern because my Sublime-text highlight config file can get so huge the system really slows down, I often put a big chunk of it in comment. And VS-Code appear a lot more resource-hungry. I use the highlights for various types of code, compilation logs, test output logs, and so on.

It's your call to close this if you prefer, and maybe try out a few things when you have time. The "square around text" is a real nice highlight, it is not currently used by anything else in my work context, so only that one would be great :) .

Here is about 20% of my old Reg-Ex highlight file, just to give you an idea of my abusive configuration :) . You can imagine that I can edit the config file many times per day.

 "regex":
[
    // Some of the available options:
    //  "underline": "true", "false",
    //  "underline_style": "solid", "squiggly", "stippled"

     // **** SHORT TERM **** I change this often every hour
    //  - NOW - red text for ongoing task
    {   
        "pattern": "TESTS_SCENARIOS_PATH",
        "color": "ff0000",  
        "ignore_case": false, 
     },  
    // - NEXT - : - Blue text for next things to do 
    {
        "pattern":"nbr_class_option",
        "color": "0000ff",
        "ignore_case": false, 
    }, 
    // - TODO - when time permits
    {
        "pattern": "TODO|HERE_BOZO",
        "color": "33ff33",
        "ignore_case": false,
    },

     // **** UNDERLINES **** Place here patterns to underline         
    // 'keyword' (Yellow underline)
    {
        "pattern":"TestResultWritter", 
        "color_scope": "keyword",
        "ignore_case": false, 
        "underline": true,
    }, 

    // Blue underline
    {
        "pattern":"DOMImplementation|DOMDocument|DOMWriter|DOMElement",  
        "color": "1b87f2", 
        "ignore_case": false, 
        "underline": true,
    }, 
    // Green underline
    {
        "pattern":"m_domImpl|m_domDoc|m_domWriter|m_domRoot",  
        "color": "33ff33",
        "ignore_case": false, 
        "underline": true,
    }, 

     // **** BACKGROUNDS ****
    // keyword text
    {
        "pattern":"\\bnew\\b|\\bdelete\\b", 
        "color_scope": "keyword",
        "ignore_case": false
    }, 

    // Class member: data + functions
    {
        //"pattern":"(m_)?(Get|Set|Is)(Function_name1|Function_name2)(optional_postFix)?",
        "pattern":"(((m_)|(Get|Set|Is))?(FirstBreakfast|LastBreakfast)(FnPtr)?)",
        "color_scope": "keyword",
        "ignore_case": false, 
        "underline": true,
    }, 

    // COMPILATION strings -> gcc
    // Highlights warning and error codes.
    //
    // Pattern may vary based on your makefile.
    // Compiler error: Red text 
    {
        //"pattern":"[a-zA-Z0-9_-]*(.h(pp)?|.c(pp)?):(\\d*:)?\\d*: error: ",
        "pattern":"[a-zA-Z0-9_-]*(.h|.hpp|.c|.cpp):(\\d*:)?\\d*: error: ",
        "color": "ff0000", 
        "ignore_case": false, 
        "underline": true,
       // test: some message in a file.cpp:333:555: error: the message
    }, 
    // Compiler warning 
    {
        "pattern":"[a-zA-Z0-9_-]*(.h|.cpp|.c):(\\d*:)?\\d*: warning: ",            
        "color_scope": "string", // yellow
        "ignore_case": false, 
        //"underline": true,
    }, 
] // END - list of regex patterns
ryu1kn commented 4 years ago

Cool, thanks for sharing the context. Using different type of decorations for different type of text makes sense (like function names with underline, class names with ..., and so on). It seems to be the time to support more decoration options.

Ares9323 commented 3 years ago

Is it possible with the current version to edit just the text colour instead of the background? Underline option would be a great addition, but I'd really like to set the text colour to a custom value (Possibly the classic Hex) to improve readability and in the json above I can see only a colour value (And I guess it's for the background)