Why are my end tags colored differently than my start tags?

[dharness]

I know the README addresses this issue - but I can't help but feel it's only partially complete. Is there any way we could add how to resolve this issue?

If I knew how to actually resolve this issue I'd submit a PR but...

[dharness]

Maybe it's possible to use the html syntax style in place of the xml one?

[tomgatzgates]

<h3>Hello World</h3> breaks down for vim colors into

<*> = xmlTag
*h3* = xmlTagName
</h3> = xmlTagEnd

Question: Why is the xml tag end the whole thing (</h3>) rather than </*>? That way I can style my closing tag to have two different colors. One for </ > and another for the tag name h3

[nikolowry]

I ended up changing https://github.com/mxw/vim-jsx/blob/master/after/syntax/jsx.vim#L17 to:

syn include @XMLSyntax syntax/html.vim

It's highlighting better, but not perfect. It would be really appreciated if the read me explained how/where the xml endTag/StartTag syntax highlighting might be defined and how to change it. New-ish to vim and I couldn't find any quick answers on a web search.

---

Edit - after running :verbose hi xmlEndTag, I can see the xml syntax highlighting is coming form the defaults:

xmlEndTag      xxx links to Identifier
        Last set from /usr/share/vim/vim80/syntax/xml.vim

It be greatly appreciated to explain what an end-user should do to override the defaults.

[Ameobea]

I was able to get this working by adding these lines to my syntax file:

hi Tag              guifg=#bd9800   guibg=NONE      guisp=NONE      gui=NONE        ctermfg=11      ctermbg=NONE    cterm=NONE
hi xmlTag           guifg=#bd9800   guibg=NONE      guisp=NONE      gui=NONE        ctermfg=11      ctermbg=NONE    cterm=NONE
hi xmlTagName       guifg=#bd9800   guibg=NONE      guisp=NONE      gui=NONE        ctermfg=11      ctermbg=NONE    cterm=NONE
hi xmlEndTag        guifg=#bd9800   guibg=NONE      guisp=NONE      gui=NONE        ctermfg=11      ctermbg=NONE    cterm=NONE

This yields tags that look like this:

[nikolowry]

Revisiting this since my earlier suggestion was a fail and @Ameobea seems to have made some progress. @Ameobea is there any reason why you explicitly set guifg,guibg,guisp,gui,ctermbg,cterm? Still new-ish to vim and I'm still trying to understand the underlining color scheming.

I use base16-vim and only had to add the following to my vimrc:

hi Tag        ctermfg=04
hi xmlTag     ctermfg=04
hi xmlTagName ctermfg=04
hi xmlEndTag  ctermfg=04

Base16-vim and jsx:

[Ameobea]

@nikolowry I literally just copied the Tag line from my theme's .vim file and changed Tag into xmlTag, xmlTagName, etc.

[nikolowry]

Thanks for the quick reply @Ameobea - just trying to find the best solution to include in my vimrc for cross-colorscheme support.

[aaya-dev]

@dharness @tomgatzgates

Create xml.vim in ~/.vim/after/syntax/ and add the following:

syn region xmlTagName matchgroup=xmlEndTag start=+</+ end=+>+

You should be able to style the angle brackets and tag names separately using xmlTag, xmlEndTag, and xmlTagName. If you prefer, you can use matchgroup=xmlTag instead.

[zeroasterisk]

My problem here was that the jsx was parsed as xmlTagN

I hacked that into the colorscheme, but I didn't like the solution...

So i sent hunting for other plugins and I found https://github.com/neoclide/vim-jsx-improve

this does a better job than mxw/vim-jsx in correctly tagging the close tag... but I fear it's otherwise inferior...

chemzqm/vim-jsx-improve w/ & w/o pangloss - end tag called jsxCloseString

mxw/vim-jsx w/ pangloss - end tag called xmlTagN

how to determine highlighting

" determine the highlighting of the current term under the cursor
map <F10> :echo "hi<" . synIDattr(synID(line("."),col("."),1),"name") . '> trans<'

[danawoodman]

Could vim-jsx define a xmlTagEndName or similar?

[mxw]

Hi folks,

Could someone summarize what the action items here are? I only recently figured out why I wasn't getting notifications from this repo, so I'm inferring that there are two distinct issues here:

1. Start and end tags highlight differently. This is covered in the README, and the XML syntax package has its own [lack of] documentations that I think users should be willing to examine if they want to customize their XML highlighting.
2. Start tags aren't broken down the same way that end tags are. vim-jsx isn't really in the business of doing XML highlighting, just gluing it to JS highlighting, so I don't plan to fix that. You could perhaps modify the XML syntax package itself and get it into the next version of upstream vim?

[mxw]

If there are any action items or issues in this thread I've missed, please let me know.

[aaya-dev]

I agree that this is an XML syntax highlighting issue and that it falls outside of the scope of this project. My earlier comment addresses how to add syntax rules that customize the default behavior.

More detailed information is available through :help syn-files under the section titled ADDING TO AN EXISTING SYNTAX FILE

[aesnyder]

I use base16 and find that @nikolowry suggested works flawlessly.

hi Tag        ctermfg=04
hi xmlTag     ctermfg=04
hi xmlTagName ctermfg=04
hi xmlEndTag  ctermfg=04

[skbolton]

@aesnyder that worked for me sort of. It really made all my tags white and not have highlighting. If anyone else encounters this they can try

hi link xmlEndTag xmlTag

Which I found just by searching xml issues: https://stackoverflow.com/questions/39628500/xml-syntax-highlighting-vim-colorscheme-fix

Which by guessing it is a way to force the editor to match the start and end tags

[skbolton]

@avocadoras you can put it in your .vimrc

[caoyi5225]

When I use both @aa-ya and @skbolton 's config, it's worked. Thanks! put "hi link xmlEndTag xmlTag" in my vimrc and put "syn region xmlTagName matchgroup=xmlEndTag start=+</+ end=+>+" in .vim/after/syntax/xml.vim

[gitaarik]

If I understand correctly, nobody has managed to make the brackets (</ and >) for the end tags color different from the text inside the brackets?

[nikinbaidar]

On a Linux system write the following commands:

vim82 for my current version of vim which is 8.2

cd /usr/share/vim/vim82/syntax
sudo vim html.vim

If you move to line 263, you'll get "The default highlighting:", and subsequent lines

hi def link htmlTag           Function                                                                                                                  
hi def link htmlEndTag        Identifier

Change these as follows:

hi def link htmlTag           Function
hi def link htmlEndTag        htmlTag

If you also seek to match the colors of the tags with tag names then change

hi def link htmlTagName      htmlstatement
hi def link htmlTagName      htmlTag

I hope this will help.