(jsx) multiple self-closing tags with attributes highlighting broken

Given jsx code:

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
        </div>
      </BrowserRouter>
    );
  }
}

It seems that the XML code is not highlighted because of the second Route tag with attributes. When I tried to modify src/language/javascript.js

          { // E4X / JSX
            begin: /</, end: /(\/\w+|\w+\/)>/,
            subLanguage: 'xml',
            contains: [
              {begin: /<\w+\s*\/>/, skip: true},
              {
-               begin: /<\w+/, end: /(\/\w+|\w+\/)>/, skip: true,
+               begin: /<\w+/, end: /(\/\w+[^>]*|\w+\S*\s*\/)>/, skip: true,

                contains: [
                  {begin: /<\w+\s*\/>/, skip: true},
                  'self'
                ]
              }
            ]
          }

The highlighting works as expected.

[joshgoebel]

https://github.com/highlightjs/highlight.js/issues/1625 reminded me that it’s not JUST HTML inside these blocks, but you can have JS style comments, template variables, etc…

The more I read the more it seems a separate JSX grammar might be the right choice for dealing with all of this.

[leafOfTree]

Thanks for tracking these jsx issues. @yyyc514

@leafOfTree

+      {
+        className: 'jsx-attr',
+        begin: /={/,
+        end: /}/,
+        subLanguage: 'xml',
+      },

Actually technically isn’t the sublanguage we should use javascript? The {} just allowed you to include javascript (event handlers, etc) which could also be more JSX code… correct?

And can’t {} truly be used anywhere, not just for attributes?

You are right about the {}. I know a little about highlight.js and I used xml as sublanguage beacuse src/language/javascript.js uses sublanguage: xml for jsx and it seems to work.