Add MDX language (#6339)

* Add MDX language

MDX is a literate programming language that combines markdown with
several JavaScript language features, such as JSX, expressions, and ESM.

*   markdown: <https://commonmark.org/>
*   JavaScript: <https://tc39.es/ecma262/>
*   JSX: <https://facebook.github.io/jsx/>

Previously, there was some temporary duct-tape in place, to map `.mdx`
extensions to markdown: GH-4416.
This improved the situation from nothing to something, but has issues,
because the syntax that MDX brings wasn’t highlighted.

With this grammar, those can be properly highlighted.

Related-to: GH-4416.

* Add id

---------

Co-authored-by: Colin Seymour <colin@github.com>

.gitmodules

@@ -851,6 +851,9 @@
 [submodule "vendor/grammars/mako-tmbundle"]
 	path = vendor/grammars/mako-tmbundle
 	url = https://github.com/marconi/mako-tmbundle
+[submodule "vendor/grammars/markdown-tm-language"]
+	path = vendor/grammars/markdown-tm-language
+	url = https://github.com/wooorm/markdown-tm-language.git
 [submodule "vendor/grammars/marko-tmbundle"]
 	path = vendor/grammars/marko-tmbundle
 	url = https://github.com/marko-js/marko-tmbundle

grammars.yml

@@ -809,6 +809,9 @@ vendor/grammars/make.tmbundle:
 - source.makefile
 vendor/grammars/mako-tmbundle:
 - text.html.mako
+vendor/grammars/markdown-tm-language:
+- source.mdx
+- text.md
 vendor/grammars/marko-tmbundle:
 - text.marko
 vendor/grammars/mathematica-tmbundle:

lib/linguist/languages.yml

@@ -3862,6 +3862,17 @@ MAXScript:
   tm_scope: source.maxscript
   ace_mode: text
   language_id: 217
+MDX:
+  type: markup
+  color: "#fcb32c"
+  ace_mode: markdown
+  codemirror_mode: gfm
+  codemirror_mime_type: text/x-gfm
+  wrap: true
+  extensions:
+  - ".mdx"
+  tm_scope: source.mdx
+  language_id: 512838272
 MLIR:
   type: programming
   color: "#5EC8DB"
@@ -3980,7 +3991,6 @@ Markdown:
   - ".markdown"
   - ".mdown"
   - ".mdwn"
-  - ".mdx"
   - ".mkd"
   - ".mkdn"
   - ".mkdown"

samples/MDX/sample.mdx

@@ -0,0 +1,199 @@
+---
+title: Hello!
+---
+
+# Last year’s snowfall
+
+In {year}, the snowfall was above average.
+It was followed by a warm spring which caused
+flood conditions in many of the nearby rivers.
+
+# Extension: ESM
+
+import {Chart} from './chart.js'
+import population from './population.js'
+import {External} from './some/place.js'
+
+export const year = 2018
+export const pi = 3.14
+
+export function SomeComponent(props) {
+  const name = (props || {}).name || 'world'
+
+  return <div>
+    <p>Hi, {name}!</p>
+
+    <p>and some more things</p>
+  </div>
+}
+
+export function Local(props) {
+  return <span style={{color: 'red'}} {...props} />
+}
+
+## Extension: jsx tags
+
+<Chart year={year} color="#fcb32c" />
+
+<div className="note">
+  > Some notable things in a block quote!
+</div>
+
+<Component
+  open
+  x={1}
+  label={'this is a string, *not* markdown!'}
+  icon={<Icon />}
+/>
+
+## Extension: expressions
+
+Two 🍰 is: {Math.PI * 2}
+
+{(function () {
+  const guess = Math.random()
+
+  if (guess > 0.66) {
+    return <span style={{color: 'tomato'}}>Look at us.</span>
+  }
+
+  if (guess > 0.33) {
+    return <span style={{color: 'violet'}}>Who would have guessed?!</span>
+  }
+
+  return <span style={{color: 'goldenrod'}}>Not me.</span>
+})()}
+
+{/* A comment! */}
+
+Attention (emphasis): *hi* / _hi_
+Attention (strong): **hi** / __hi__
+Attention (strong & emphasis): ***hi*** / ___hi___.
+Attention (strikethrough): ~hi~ ~~hi~~.
+Character escape: \-, \&.
+Character reference: &amp; &#123; &#x123;.
+Code (text): `hi` and `` ` ``.
+Label end (resource): [a](https://example&dot;com 'title').
+Label end (reference, full): [a][b].
+Label end (reference, collapsed, shortcut): [a][], [a].
+
+## Definitions
+
+[a]: <https://example\.com> "b"
+[a]: https://example&dot;com 'b'
+[a]: # (b\&c)
+[a&amp;b]: <>
+
+## Heading (setext)
+
+alpha
+=====
+
+*bravo
+charlie*
+--------
+
+## Heading (atx)
+#
+## A ##
+### B
+#### C
+##### D
+###### E
+####### ?
+
+## Thematic break
+
+***
+
+## Code (fenced)
+
+````markdown
+```css
+em { color: red } /* What! */
+```
+````
+
+~~~js eval
+alert(true + 2 + '3')
+~~~
+
+## Block quote
+
+> # asd
+
+> **asd
+qwe**
+
+> ~~~js
+> console.log(1)
+> ~~~
+
+## List
+
+1. # asd
+
+* **asd
+qwe**
+
+* ~~~js
+  console.log('hi!')
+  ~~~
+
+123456789.    ```js
+              asd + 123
+
+## Extension: math
+
+Math (text): $$hi$$ and $$ $ $$.
+Math (flow):
+
+$$
+L = \frac{1}{2} \rho v^2 S C_L
+$$
+
+## Extension: GFM autolink literals
+
+a a@b.com/ ("aasd@example.com") mailto:a+b@c.com xmpp:a+b@c.com.
+
+a www.example.com/a(b) www.example.com/a(b(c)), wWw.example.com/a(b(c(d))).
+
+ahttps://example.com https://example.com/a(b) hTTp://example.com/a(b(c(d))).
+
+## Extension: GFM footnotes
+
+a[^b], [^c d].
+
+[^b]: *Lorem
+    dolor*.
+
+[^b]:
+    ??
+
+[^b]: ~~~js
+    console.log(1)
+    ~~~
+
+## Extension: GFM task list
+
+*  [ ] not done
+1. [x] done
+
+## Extension: GFM table
+
+| Stuff? | stuff! |
+| - | ----- |
+| asdasda | https://example.com |
+what&not; | qweeeeeeeeeee
+
+## Extension: GitHub gemoji
+
+:+1: :100:
+
+## Extension: GitHub mention
+
+@username @org/team.
+
+## Extension: GitHub reference
+
+GH-123, #123, GHSA-123asdzxc, cve-123asdzxc, user#123, user/project#123.

vendor/README.md

@@ -311,6 +311,7 @@ This is a list of grammars that Linguist selects to provide syntax highlighting
 - **M4Sugar:** [Alhadis/language-etc](https://github.com/Alhadis/language-etc)
 - **MATLAB:** [mathworks/MATLAB-Language-grammar](https://github.com/mathworks/MATLAB-Language-grammar)
 - **MAXScript:** [Alhadis/language-maxscript](https://github.com/Alhadis/language-maxscript)
+- **MDX:** [wooorm/markdown-tm-language](https://github.com/wooorm/markdown-tm-language)
 - **MLIR:** [jpienaar/mlir-grammar](https://github.com/jpienaar/mlir-grammar)
 - **MQL4:** [mqsoft/MQL5-sublime](https://github.com/mqsoft/MQL5-sublime)
 - **MQL5:** [mqsoft/MQL5-sublime](https://github.com/mqsoft/MQL5-sublime)