CODEWITHSUNDEEP
visual-studio-codetextmate
tomByrer
tomByrer

Reputation: 1155

Scope open tag only in VSCode/Textmate HTML Grammar

I'm trying to edit a theme to style the opening HTML tags, without using the same style on closing tag. EG make italic like this:

<***div*** class="my-divvy">Here is <***strong***>strong</**strong**> text tags in HTML.</**div**>

There is entity.name.tag.html scope, but that will capture both the open (<div>) AND closing (</div>) tags, which I do not want. There is also meta.tag.structure.div.start.html entity.name.tag, replacing div for every HTML tag, but that would make a long array which I am trying to avoid.

How can I edit the language definition (html.tmLanguage.json file) to provide an open-tag-only scope so I can add a simple rule to the theme please?

Bonus: similar issue with JSX; who to scope only the open tags.

Upvotes: 0

Views: 689

Answers (1)

Mark
Mark

Reputation: 182401

If you use the Developer: Inspect TM Scopes command, you will see that there is a separate scope for start and end tags, like:

meta.tag.structure.div.start.html meta.tag.structure.div.end.html

Unfortunately, there doesn't appear to be any generic start and end tag scope - you have to include the element name - like div or span in each one. So, this works for the div's and span's ending tags in the settings.json file:

    "scope": "meta.tag.structure.div.start.html entity.name.tag, meta.tag.inline.span.start.html entity.name.tag",

but you need an entry like "meta.tag.structure.div.start.html entity.name.tag" for each tag name you want to support - swapping div out each time.

And I had to include entity.name.tag within each tag's scope to get it to work.

Try this in your theme file:

"scope": [
  "meta.tag.structure.div.start.html entity.name.tag", 
  "meta.tag.inline.span.start.html entity.name.tag",
  "etc.",
  "etc.",
]

Upvotes: 1

Related Questions