Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FEATURE REQUESt: Syntax highlighting for Gauge extension for VSCode #884

Open
vgeruslu opened this issue Aug 9, 2023 · 10 comments
Open

Comments

@vgeruslu
Copy link

vgeruslu commented Aug 9, 2023

I am using Gauge extension for Visual Studio Code, and have now got a large test-code base. I would wish there was a syntax highlighting for Gauge extension for Visual Studio Code, since now it is hard to read and manage Spec and Concept files. I see in https://docsgaugeorg.readthedocs.io/en/master/using.html that syntax highlighting of Gauge in other IDE's are quite good, while the one in VSCode, has almost no syntax highlighting.

And thanks for offering Gauge as a good BDD framework

@kiranpatil-ic
Copy link

There is a workaround to get it working (to some extent).

  • Press Ctrl + Shift +P in Vscode to bring up the command center
  • Type Open User Settings
  • Add the following (Please note the [Visual Studio Dark] is the name of the theme, so if you have a different theme, then please specify that)
    "editor.tokenColorCustomizations": {
        "[Visual Studio Dark]": {
           "textMateRules": [
            {
              "scope": "markup.list.unnumbered.markdown",
              "settings": {
                "foreground": "#efa486",  // <-- Change your color here
              }
            }
          ]
        }
      },

This will highlight the lines which will be executed (One's with prefix *). It still does not highlight the data tables or parameters.

@jensakejohansson
Copy link

jensakejohansson commented Jan 29, 2024

I agree, some syntax high-lighting would greatly improve the user experience. Aside from scenario names, different colors for tags, comments, steps/concepts & parameters would be great.

Anyone knows if this could be "easily" implemented? Or if there is reason why it has not been done?

@zabil
Copy link
Member

zabil commented Jan 29, 2024

I think the syntax specs are specified at https://github.com/getgauge/gauge-vscode/blob/master/syntaxes/markdown.tmLanguage

And is based on markdown. You can try changing it to see if that works.

@jensakejohansson
Copy link

jensakejohansson commented Feb 5, 2024

@zabil Thanks for pointing my in the right direction. After adding new scopes to the file I have syntax highlighting for parameters, tables, steps, tags etc.

This is all new too me, but to me it seems the tmLanguage-file contains quite a few things that are not really relevant to Gauge-files (since they only use a sub-set of the markdown-notation) while missing others gauge specific scopes, like for tags and parameters. I guess it's some sort of default markdown template.

After updating the scopes then the colors could be user-defined via .vscode/the settings.json in the project for different Gauge-specific definitions, like:
bild

At the moment I have achieved this locally:

bild

However, an unwanted side effect was that changes does not only apply to .spec & .cpt-files, but any other markdown-files in the project - like read-me-files, for example.

So I'd like to understand if it's possible to limit the scope of the .tmLanguage-file to only affect .spec & .cpt-file. @zabil Do you have any hints/insights regarding this?

If I find a solution/setup that isolates the changes to .spec & .cpt-files, then I'll propse a PR...

@sriv
Copy link
Member

sriv commented Feb 6, 2024

the syntax highlighting in vscode is provided by implementing a grammrr in TextMate grammar format (the file that @zabil referenced to).

Since vscode 1.43, there is support for semantic syntax highlighting which allows extensions to enrich the syntax highlighting by doing some parsing/tokenization on top of it. (Please see https://code.visualstudio.com/api/language-extensions/semantic-highlight-guide) for more details and https://github.com/microsoft/vscode-extension-samples/blob/main/semantic-tokens-sample/src/extension.ts for an example

My suggestion is that we use markdown grammar for the textmate grammar (since gauge is based on markdown) and enrich it by implementing a gauge specific DocumentSemanticTokensProvider.

If you are interested, please try it out.

@aedwards9
Copy link

This would be a really great feature. This is one of the first pieces of feedback I got when trying to roll out use of Gauge to a wider audience! This is what I ended up with based on trial and error / very naive understanding of textMate! But was better than nothing.

"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": [
"markup.list",
"meta.embedded.math.markdown",
"constant.numeric.math.tex",
"punctuation.math.begin.bracket.curly",
"punctuation.math.begin.bracket.round",
"markup.math.inline.markdown"
],
"settings": {
"foreground": "#57ad57",
"fontStyle": "bold"
}
}
]
}

@jensakejohansson would be keen to get it looking like your example!

@jensakejohansson
Copy link

jensakejohansson commented Apr 11, 2024

@aedwards9 I actually ended up building my own version of the extension with some smaller modifications to my liking. However, for the syntax highlighting I did (also from my rather limited experience of this) modify the markdown.tmLangauge-file and added configuration to define the wanted colours in my setting.json.

The markdown.tmLanguage file is found in the 'syntaxes'-directory of the Gauge extension-folder. On a Windows machine you typically find your VSC extensions here: %USERPROFILE%\.vscode\extensions

When you've updated that file you can control most of the relevant highlightning you'll need via the settings.json-file that is located in the '.vscode'-directory of your Gauge project. I'll share my two files with you here and most likely you could just replace your local files with these (unless you customized you settings.json with other project related things).

The attached zip includes my settings.json and markdown.tmLanuge file. Feel free to try it out if you'd like.

syntax-highlighting-gauge.zip

@aedwards9
Copy link

That's worked a treat @jensakejohansson - will be really helpful for our team thanks

@vgeruslu
Copy link
Author

Many thanks @jensakejohansson ... It worked like a charm ! I had in my mind first to develop my own syntax highlighter... But I was too busy to find the chance/time to learn all the details of the tokenColorCustomizations to make it work. I have now "installed" your mini-highlighter... And am telling my colleagues to use it too

@mario-s
Copy link

mario-s commented Sep 20, 2024

Thanks a lot @jensakejohansson. Although I was not able to change the color for step parameters.

"scope": "markup.gauge.step.params"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

No branches or pull requests

7 participants