[Beta] Highlight <Foo> and <foo> differently (#5368)

beta/patches/@codemirror+lang-javascript+0.19.6.patch

@@ -0,0 +1,15 @@
+diff --git a/node_modules/@codemirror/lang-javascript/dist/index.js b/node_modules/@codemirror/lang-javascript/dist/index.js
+index d089f6b..db09ea6 100644
+--- a/node_modules/@codemirror/lang-javascript/dist/index.js
++++ b/node_modules/@codemirror/lang-javascript/dist/index.js
+@@ -131,7 +131,9 @@ const javascriptLanguage = /*@__PURE__*/LRLanguage.define({
+                 JSXText: tags.content,
+                 "JSXStartTag JSXStartCloseTag JSXSelfCloseEndTag JSXEndTag": tags.angleBracket,
+                 "JSXIdentifier JSXNameSpacedName": tags.tagName,
+-                "JSXAttribute/JSXIdentifier JSXAttribute/JSXNameSpacedName": tags.attributeName
++                "JSXAttribute/JSXIdentifier JSXAttribute/JSXNameSpacedName": tags.attributeName,
++                "JSXAttribute/JSXLowerIdentifier JSXAttribute/JSXNameSpacedName": tags.attributeName,
++                "JSXBuiltin/JSXIdentifier": tags.standard(tags.tagName),
+             })
+         ]
+     }),

beta/src/components/MDX/CodeBlock/CodeBlock.tsx

@@ -3,11 +3,10 @@
  */
 
 import cn from 'classnames';
-import {highlightTree} from '@codemirror/highlight';
+import {highlightTree, HighlightStyle, tags} from '@codemirror/highlight';
 import {javascript} from '@codemirror/lang-javascript';
 import {html} from '@codemirror/lang-html';
 import {css} from '@codemirror/lang-css';
-import {HighlightStyle, tags} from '@codemirror/highlight';
 import rangeParser from 'parse-numeric-range';
 import {CustomTheme} from '../Sandpack/Themes';
 
@@ -233,7 +232,7 @@ function getSyntaxHighlight(theme: any): HighlightStyle {
       class: classNameToken('static'),
     },
     {
-      tag: tags.tagName,
+      tag: tags.standard(tags.tagName),
       class: classNameToken('tag'),
     },
     {tag: tags.variableName, class: classNameToken('plain')},
@@ -244,7 +243,7 @@ function getSyntaxHighlight(theme: any): HighlightStyle {
     },
     {
       // Highlight function definition differently (eg: functional component def in React)
-      tag: tags.definition(tags.function(tags.variableName)),
+      tag: [tags.definition(tags.function(tags.variableName)), tags.tagName],
       class: classNameToken('definition'),
     },
     {