facelessuser / BracketHighlighter

Bracket and tag highlighter for Sublime Text
https://facelessuser.github.io/BracketHighlighter/
1.75k stars 245 forks source link

How to match the custom tag in html or vue ? #594

Closed raffeyang closed 3 years ago

raffeyang commented 3 years ago
CleanShot 2021-09-05 at 16 10 35@2x
facelessuser commented 3 years ago

@Jax0rz As long as the tag is recognized with basic HTML syntax and HelloWorld looks like it does, BH can find it. The problem is that it will expect a closing tag.

Screen Shot 2021-09-05 at 8 10 27 PM

The rules are a bit different for XML though:

Screen Shot 2021-09-05 at 8 11 09 PM

So you need to tell BracketHighlighter that HelloWorld is a "void" element as it looks like that is what you want in this case:

A void element is an element whose content model never allows it to have contents under any circumstances. Void elements can have attributes.

So, go to Preferences->Package Settings->BracketHighlighter->Tag Settings and copy the void settings to your User bh_tag.sublime-settings file. Add helloworld and you should be good to go.

{
    // Tags that never have a closing.  You can use 'null' if it does not require a pattern.
    "void_tag_patterns": {
        "xml": null,
        "xhtml": null,
        "html": "helloworld|area|base|basefont|br|col|embed|frame|hr|img|input|isindex|keygen|link|meta|param|source|track|wbr",
        "cfml": "area|base|basefont|br|col|embed|frame|hr|img|input|isindex|keygen|link|meta|param|source|track|wbr"
    },
}

We can now see with HTML syntax set that we can highlight the void tag just fine.

Screen Shot 2021-09-05 at 8 18 20 PM

If you need to recognize both <el></el> and <el /> form, then maybe use self_closing_tag_patterns. This treats the element much like an XML/XHTML element.

Documentation reference:

@gir-bot remove S: triage @gir-bot add T: support