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

Fail on theme scope #9818

Closed
AeonDigital opened this issue Jul 26, 2016 · 5 comments
Closed

Fail on theme scope #9818

AeonDigital opened this issue Jul 26, 2016 · 5 comments
Assignees
Labels
*question Issue represents a question, should be posted to StackOverflow (VS Code)

Comments

@AeonDigital
Copy link

  • VSCode Version: 1.3.1
  • OS Version: Win 10

I created a new theme for VS Code following the TextMate definitions and using the TmTheme Editor as guide to get the final result. Many hours of fun after, i install the theme in my local machine with VS Code and i needed to change almost all set scopes to get what i want.
Well, after all, remained some details which I suspect that are a problem in the way the VS Code identifies and applies the styles to each scope.
The code of my theme can be found in my repository.

Steps to Reproduce:
First of all, install the theme (you can use "ext install theme-aeondigital-dark")

*Using .php files will work

  1. Create a new *.php file and put some HTML tags inside. You can use a sample of my repository.
  2. Set a "script" and/or "style" tags in the file and copy some kind of valid code inside each (use the samples ;-) ).

In this case all styles defined will work as expected! \o/

**But using .html or .js has some bugs

  1. After install the theme, create a *.html or *.htm file and put the same HTML tested above and you can see that all tags will be in the same color and the properties value don´t "get" the right color.
  2. With *.js files has a similar trouble with the quoted strings. The definited color don´t "get" as expected.

I´m new user of the VS Code but i'm already loving it.
Congratulations to the whole team.

@kieferrm kieferrm added the *question Issue represents a question, should be posted to StackOverflow (VS Code) label Jul 27, 2016
@aeschli
Copy link
Contributor

aeschli commented Aug 3, 2016

I had a look at your theme. I like it!
I tested it with your samples and I see that there are differences. Now I don't know if we are talikng about the same examples, but the ones I looked it seems that you still lack some definitions, e.g. for scope 'string'.
One way to find out to what a token resolves is using the development tools. Help > Toggle Development Tools, then use the use the element picker ( top left toolbar) and select a word to see what scopes it got and to what theme rule it resolved

image

@aeschli
Copy link
Contributor

aeschli commented Aug 3, 2016

Closing for now. I'd need more specific (smaller) examples or what you see and and what is expected.
In general everything depends on the grammar used, and therefor there's no guarantee that what you see in the TmTheme editor must match with what we have in VSCode.

@aeschli aeschli closed this as completed Aug 3, 2016
@AeonDigital
Copy link
Author

Hi Martin.
I´m glad by your response.
In fact, by one moment i suspected that i´ll never get any feedback and i´m
happy why i was wrong. ;)

I did not know about the "Toggle Developer Tools" option. Tks.
But anyway. I used it to see how the VSCode defines the CSS classes that
will be apply to render the code being shown and still think the problem is
somewhere in the VSCode own.

I´m download the VSCode project from github repository and open it to check
by any glue about this case and it leave me to the folder
".\extensions\html"

If i´m right, here is the definitions of how VSCode identify each special
piece of HTML code and what CSS class will be set on it.
An exemple is the definition of rule that identify the HTML Block Tags
(start in the line 396 of ".\extensions\html\syntaxes\HTML.plist" |
screenshot attached ).

For some weird reason this definition is corrected applied on the HTML
Block Tags when they are in some PHP file but not in HTML files.
In PHP files, a tag that matches with this rule will get the class "token
meta block entity name tag any html" ( see in the attached file
"html_in_php.jpg" )
But in HTML files, the same code will get the class "token entity name tag
tag-nav" ( see in the attached file "html_in_html.jpg" ).

With the Developer Tools i´m able to identify with precision how rule will
be set in any part of code but to develop a Theme more consistent it is not
suficient. For this i need that the code be rendered in same way through
the file codes.


Well ... I hope I'm not being too boring.
Thank you very much for contacting us and I hope I have expressed myself
more accurately this time.

Images

Rule for HTML Block Tags [ .\extensions\html\syntaxes\HTML.plist line 396 ]

[image: Imagem inline 1]

HTML in PHP

[image: Imagem inline 2]

HTML in HTML

[image: Imagem inline 3]

2016-08-03 11:31 GMT-03:00 Martin Aeschlimann [email protected]:

Closing for now. I'd need more specific (smaller) examples or what you see
and and what is expected.
In general everything depends on the grammar used, and therefor there's no
guarantee that what you see in the TmTheme editor must match with what we
have in VSCode.


You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
#9818 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AE4sXYnylmxPHEnU2Fa8-x_tYzqMTscgks5qcKZCgaJpZM4JVq0O
.

Rianna Cantarelli

[email protected]
Fone: 48 9811-3139

@aeschli
Copy link
Contributor

aeschli commented Aug 4, 2016

You are correct, \extensions\html\syntaxes\HTML.plist is currently only used for PHP and for other grammars that embed html. The html tokenization is done by some legacy code. We are changing that for the August build, then also HTML will use the HTML.plist grammar. #8938 is the issue for that work.

That said, as a theme implementor you should not rely on a specific grammar. Grammars can be replaced or updated, even by VSCode extension.

@AeonDigital
Copy link
Author

Nice!
I see the problems reported with HTML , JS and CSS will be solved with the
new Build .
I am no expert in themes then this is all pretty new to me.
At this point I can not imagine why anyone would want to modify a Grammar
if not to make it more accurate or more compatible with standard textmate.
But in case of trying to make a theme that is independent of a Grammar, is
this possible?

Again, thank you very much for contacting me.

2016-08-04 4:22 GMT-03:00 Martin Aeschlimann [email protected]:

You are correct, \extensions\html\syntaxes\HTML.plist is currently only
used for PHP and for other grammars that embed html. The html tokenization
is done by some legacy code. We are changing that for the August build,
then also HTML will use the HTML.plist grammar. #8938
#8938 is the issue for that
work.

That said, as a theme implementor you should not rely on a specific
grammar. Grammars can be replaced or updated, even by VSCode extension.


You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
#9818 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AE4sXTTaHliP9S11D8Dh0PWJmE6Xsihhks5qcZMogaJpZM4JVq0O
.

Rianna Cantarelli

[email protected]
Fone: 48 9811-3139

@vscodebot vscodebot bot locked and limited conversation to collaborators Nov 18, 2017
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
*question Issue represents a question, should be posted to StackOverflow (VS Code)
Projects
None yet
Development

No branches or pull requests

3 participants