Sublime Forum

Color scheme option for invalid closing tag

#1

At some point in the past year, I had a color theme where a mismatched closing tag would appear in a different color, e.g., the </p> below:

<div>oops</p>

But now I can’t recall which theme had that, or what the setting would be if I wanted to the edit the theme myself.

Anyone know?

Thanks…

0 Likes

#2

I suspect something like that would have been coming from a package of some sort (linter or code checker maybe?) that does some analysis of the markup to be able to detect that the tag is mismatched. The HTML syntax that ships with Sublime doesn’t seem to detect that a closing tag is any different than an opening tag, let alone that it’s mismatched.

Did you perhaps have some additional packages installed previously that you currently don’t?

0 Likes

#3

Thank you for your reply. I recall it was part of a color scheme, but I cannot recall which, probably some version of Monokai, or some JSX related package. I’ve gone back through all the themes/color schemes/packages I had installed, but can’t seem to make that feature turn on. Bummer … it was very handy!

0 Likes

#4

A color scheme simply defines how scopes defined by the syntax definition are colored. By itself it is unable to specify colors for specific pieces of text. You likely had either a plugin that was highlighting the mismatched closing tag or a syntax definition that marked mismatched closing tags with the illegal scope.

0 Likes

#5

I think it was probably the latter, a syntax that defined an illegal tag. Just can’t seem to find the right phrase to google to find what I want. Thanks for your reply.

0 Likes

#6

I’m in way over my level of understanding of Sublime innards, but I can see in my JS Custom - React syntax file:

jsx-tag-attributes-top:
    - meta_scope: meta.tag.js
    - match: /
      scope: punctuation.definition.tag.begin.js
      set:
        -   - meta_scope: invalid.illegal.unmatched-tag.js
            - include: immediately-pop
        - jsx-expect-tag-end
        - jsx-tag-name

    - match: (?=\S)
      set:
        - jsx-tag-attributes
        - jsx-tag-name

and in my Monokai Phoenix color theme:

	<dict>
		<key>name</key>
		<string>invalid.illegal</string>
		<key>scope</key>
		<string>invalid.illegal</string>
		<key>settings</key>
		<dict>
			<key>background</key>
			<string>#562D56BF</string>
			<key>foreground</key>
			<string>#FD5FF1FF</string>
		</dict>
	</dict>

But it’s not picking up that scope in the schema (thanks Color Scheme Editor).

I’m pretty sure I’d found an article describing how to do this some time last fall, but alas cannot find it now.

0 Likes