fujidana / vscode-igorpro

Igor Pro extension for Visual Studio Code
MIT License
8 stars 0 forks source link

Syntax color match to Igor Pro #2

Open jraynorlxx opened 1 year ago

jraynorlxx commented 1 year ago

Would it be possible to change the default syntax color to match what is used inside Igor Pro in future updates?

Or can you please provide guidance on how I may change this on user settings JSON?

Many thanks!

fujidana commented 1 year ago

I know there is another VS Code extension for Igor Pro (qmsc.ipf). The extension tokenizes a comment line of IPF file as invalid and a string as comment. I wondered why the extension colors strangely to me but now I understand the behavior is for the purpose to match what Igor Pro's built-in editor does.

However, how VS code colors a token (e.g., invalid) relies on a color theme (e.g., "Default Light", "Abyss", ...) a user has selected; an extension author can not force a user's color theme. For example, comment token is colored green in "Default Light" but gray in "Quiet Light". What a language extension can do is tokenizing the codes and label the respective tokens. How the labeled token is colored is a job of a color theme. Tokenizing a string block as comment does not guarantee it is colored green.

Therefore, I want to keep my extension semantically consistent (i.e., tokenize a string block as string, and so on). As its results, the syntax coloring for IPF is different from what Igor Pro's built-in editor does but similar with codes written in other languages in VS Code.

fujidana commented 1 year ago

Edit your settings.json file to override the colorizing rules of your color theme:

{
    "editor.tokenColorCustomizations": {
        "strings": "#008000",
        "comments": "#FF0000"
    }
}

If you want to set rules just for IPF files, directly specify TextMate theme color rules:

{
    "editor.tokenColorCustomizations": {
        "textMateRules": [
            {
                "scope": "string.quoted.double.igorpro",
                "settings": {
                    "foreground": "#00FF00"
                }
            }
        ]
    }
}

You can find the scope names in https://github.com/fujidana/vscode-igorpro/blob/main/src/igorpro.tmLanguage.yaml and "Developer: Inspect Editor Tokens and Scopes" command in VS Code. Read Editor Syntax Highlighting in VS Code Docs: Color Themes for details.

fujidana commented 1 year ago

I use VS Code for other languages and prefer to a colorizing rule that is consistent with them. So now I don't have a plan to modify the scope name of the token. However, if you create and publish a colorizing setting (here or somewhere else), it will be helpful to someones who prefer a colorizing rule that is similar with Igor Pro's built-in editor.

"editor.tokenColorCustomizations" can be defined in a Workspace setting. Then one can limit the colorizing rule practically in IPF only without specifying TextMate scopes verbosely.

jraynorlxx commented 1 year ago

Thank you so much for looking into this over the weekend. I totally understand that you preference in colorizing rule to match with other languages you use in VS Code. I created some TextMate theme color rules using scope names in https://github.com/fujidana/vscode-igorpro/blob/main/src/igorpro.tmLanguage.yaml It is not perfect but it gets the work done. This is based on Light Themes. For Dark Themes, obviously one need to change "#000000" foreground color to "#FFFFFF" or "#CACACA". One probably also want to adjust other colors a bit to make it more easy on the eyes when in Dark Themes.

{
    "editor.tokenColorCustomizations": {
        "textMateRules": [
            {
                "scope": [
                    "string.quoted.double.igorpro",
                    "punctuation.string.begin.igorpro",
                    "punctuation.string.end.igorpro"
                ],
                "settings": {
                    "foreground": "#009200"
                }
            },
            {
                "scope": "meta.preprocessor.igorpro",
                "settings": {
                "foreground": "#A73D00"
                }
            },
            {
                "scope": [
                    "entity.other.pragma-key.igorpro",
                    "string.quoted.other.igorpro",
                    "keyword.operator.assignment.arithmetic.igorpro",
                    "entity.other.attribute-name.igorpro"
                ],
                "settings": {
                "foreground": "#000000"
                }
            },
            {
                "scope": [
                    "meta.menu-body.igorpro",
                    "meta.structure-body.igorpro",
                    "meta.picture-body.igorpro",
                    "meta.macro-body.igorpro",
                    "meta.function-body.igorpro",
                ],
                "settings": {
                "foreground": "#000000"
                }
            },
            {
                "scope": "comment.line.double-slash.igorpro",
                "settings": {
                "foreground": "#E80000"
                }
            },
            {
                "scope": [
                    "keyword.other.integer.hexadecimal.igorpro",
                    "constant.numeric.integer.hexadecimal.igorpro",
                    "constant.numeric.integer.octal.igorpro",
                    "keyword.other.integer.otcal.igorpro",
                    "constant.numeric.integer.decimal.igorpro",
                    "constant.numeric.float.igorpro",
                    "keyword.other.float.scientific-notation.igorpro",
                    "invalid.illegal.numeric.other.igorpro"
                ],
                "settings": {
                "foreground": "#000000"
                }
            },
            {
                "scope": [
                    "constant.language.infinity.igorpro",
                    "constant.language.nan.igorpro",
                    "support.function.function.igorpro",
                ],
                "settings": {
                "foreground": "#A73D00"
                }
            },
            {
                "scope": "support.function.operation.igorpro",
                "settings": {
                "foreground": "#236362"
                }
            },
            {
                "scope": [
                    "keyword.control.directive.pragma.igorpro",
                    "keyword.control.directive.include.igorpro",
                    "keyword.control.directive.define.igorpro",
                    "keyword.control.directive.conditional.igorpro",
                    "punctuation.definition.directive.igorpro"
                ],
                "settings": {
                "foreground": "#B30096"
                }
            },
        ]

    },

}

Here is an incomplete list of items I failed to make it mimic Igor Pro perfectly. They all mostly related to conditional compile and has minimal impact. 1.

include \<Igor Built-in Procedures Name>

include "My Procedures Name"

The current code make the "My Procedures Name" green like Igor Pro does. But the \<> are also green (it is black in Igor Pro) 2.

pragma DefaultTab = {3,20,4}

The {} are colored based on the Color Theme. I can't figure out which scope name to turn these black like Igor Pro does. 3.

define/#ifdef/#ifndef definition

The definition part is colored based on the Color Theme. 4.

if (Igorversion(Hello)>8)

This is probably the most extreme sample. The IgorVersion is correctly colored brown. The rest all have its own color rather than black in Igor Pro.

  1. Parentheses after function name inside Menu-End are colored based on the Color Theme.

fujidana commented 1 year ago

Hi, @jraynorlxx. Thank you for making your code to mimic Igor Pro style coloring public!

I make the extension give the name of tokens related with compiler derivative a similarly with C language. You can find the following C code in VS code has a similar color style (and token names, if you run "Developer: Inspect Editor Tokens and Scopes" in the command pallet (Ctrl+Shift+P).

#include <stdio.h>
#include "mylib.h"

#define CNAME value

That is I think the reason of the differences you pointed out in your comments 1, 2, and 3. I think Igor Pro colors "user-defined procedure" but does not color <built-in procedures> just because Igor Pro's built-in syntax colorizer is lazy. Both indicates a file name and are semantically similar. I don't think the extension needs to follow this manner. As of comment 4, the current rule of the extension is not so thoughtful as Igor Pro built-in editor but might be improved in future. Currently Igorversion in #if (Igorversion(Hello)>8) is not labeled as a function name. As of comment 5, sorry I could not catch your point. Recent VS Code colors a pair of brackets based on the nest level (setting ID: editor.bracketPairColorization.enabled) by default. Was the parentheses in your system colored by this feature?