From 4f5c076f14b18b3af18d6238dbb16ae87676cbc0 Mon Sep 17 00:00:00 2001 From: Titus Wormer Date: Wed, 22 Mar 2023 12:59:56 +0100 Subject: [PATCH] Add MDX language MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit MDX is a literate programming language that combines markdown with several JavaScript language features, such as JSX, expressions, and ESM. * markdown: * JavaScript: * 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. --- .gitmodules | 3 + grammars.yml | 3 + lib/linguist/languages.yml | 11 +- samples/MDX/sample.mdx | 199 ++++++++++++++++++ samples/Markdown/sample.mdx | 121 ----------- vendor/README.md | 1 + vendor/grammars/markdown-tm-language | 1 + .../markdown-tm-language.dep.yml | 57 +++++ 8 files changed, 274 insertions(+), 122 deletions(-) create mode 100644 samples/MDX/sample.mdx delete mode 100644 samples/Markdown/sample.mdx create mode 160000 vendor/grammars/markdown-tm-language create mode 100644 vendor/licenses/git_submodule/markdown-tm-language.dep.yml diff --git a/.gitmodules b/.gitmodules index 7de9fd0d02..62bcf22ac5 100644 --- a/.gitmodules +++ b/.gitmodules @@ -848,6 +848,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 diff --git a/grammars.yml b/grammars.yml index 052574ba58..2d441a3337 100644 --- a/grammars.yml +++ b/grammars.yml @@ -806,6 +806,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: diff --git a/lib/linguist/languages.yml b/lib/linguist/languages.yml index fe28015242..75cdb354e2 100644 --- a/lib/linguist/languages.yml +++ b/lib/linguist/languages.yml @@ -3860,6 +3860,16 @@ 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 MLIR: type: programming color: "#5EC8DB" @@ -3978,7 +3988,6 @@ Markdown: - ".markdown" - ".mdown" - ".mdwn" - - ".mdx" - ".mkd" - ".mkdn" - ".mkdown" diff --git a/samples/MDX/sample.mdx b/samples/MDX/sample.mdx new file mode 100644 index 0000000000..d6df853331 --- /dev/null +++ b/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
+

Hi, {name}!

+ +

and some more things

+
+} + +export function Local(props) { + return +} + +## Extension: jsx tags + + + +
+ > Some notable things in a block quote! +
+ +} +/> + +## Extension: expressions + +Two 🍰 is: {Math.PI * 2} + +{(function () { + const guess = Math.random() + + if (guess > 0.66) { + return Look at us. + } + + if (guess > 0.33) { + return Who would have guessed?! + } + + return Not me. +})()} + +{/* A comment! */} + +Attention (emphasis): *hi* / _hi_ +Attention (strong): **hi** / __hi__ +Attention (strong & emphasis): ***hi*** / ___hi___. +Attention (strikethrough): ~hi~ ~~hi~~. +Character escape: \-, \&. +Character reference: & { ģ. +Code (text): `hi` and `` ` ``. +Label end (resource): [a](https://example˙com 'title'). +Label end (reference, full): [a][b]. +Label end (reference, collapsed, shortcut): [a][], [a]. + +## Definitions + +[a]: "b" +[a]: https://example˙com 'b' +[a]: # (b\&c) +[a&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¬ | 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. diff --git a/samples/Markdown/sample.mdx b/samples/Markdown/sample.mdx deleted file mode 100644 index 5a8d0a5507..0000000000 --- a/samples/Markdown/sample.mdx +++ /dev/null @@ -1,121 +0,0 @@ -import Doc from '~/components/layout/docs' -import { Code, InlineCode } from '~/components/text/code' -import { TerminalInput } from '~/components/text/terminal' -import { GenericLink } from '~/components/text/link' -import Note from '~/components/text/note' -import Example from '~/components/example' -import Tag from '~/components/text/tag' - -export const meta = { - title: 'Next.js Builder (@now/next)', - description: - 'The official Next.js Builder for ZEIT Now. Deploy Next.js applications with ease.' -} - -Status: Stable - -The Now Next.js Builder takes a [Next.js application](https://nextjs.org), defined by a `next.config.js` entrypoint and `pages` directory, and converts those pages into a series of individual [lambdas](/docs/v2/deployments/concepts/lambdas). - -It features built-in caching of `node_modules` and all compiler artifacts for very fast deployments. - -## When to use it - -`@now/next` is the ideal way to ship a fast, production-ready [Next.js application](https://nextjs.org) that scales automatically. - -For more information on why you should use Next.js for your project, see [the Next.js website](https://nextjs.org). - -## How to use it - -The first step is to set up a Next.js project. If you have not yet done so; [the best place to get started is the Next.js documentation](https://nextjs.org/docs/#setup). - -To get started, make sure you have installed the Next.js dependencies with the following command: - -yarn add next react react-dom - -Then, in your project directory, create a `pages` directory with some example pages, for example; the home index page, `pages/index.js`: - -```jsx -export default () =>
Hello world!
-``` - -Create a simple `next.config.js` file to use as our entrypoint for the build, and to configure that the build should be a collection of serverless [lambdas](/docs/v2/deployments/concepts/lambdas/): - -```js -module.exports = { - target: 'serverless' -} -``` - - - The serverless method is only supported in{' '} - - Next.js version 8 - {' '} - and above. - - -Then define a build step in a `now.json` configuration file: - -```json -{ - "version": 2, - "builds": [{ "src": "next.config.js", "use": "@now/next" }] -} -``` - -Upon deployment, you will get a URL like this: https://nextjs-8fnzfb1ci.now.sh - -## Technical Details - -### Entrypoint - -The entrypoint of this builder is a `next.config.js` file with the `target` configuration option set to `serverless`. - -``` -module.exports = { - target: "serverless" -} -``` - -This configuration, shown above, tells Next.js to build each page in the `pages` directory as a [lambda](/docs/v2/deployments/concepts/lambdas/) function. - -For more information on this, see [the Next.js documentation](https://github.com/zeit/next.js#serverless-deployment). - -### Dependencies installation - -The installation algorithm of dependencies works as follows: - -- If a `package-lock.json` is present, `npm install` is used -- Otherwise, `yarn` is used. - -### Private npm modules - -To install private npm modules, define `NPM_TOKEN` as a [build environment](/docs/v2/deployments/configuration#build.env) in `now.json`. - -### Node.js version - -The Node.js version used is the latest in the **8 branch**. - -### Custom Server - -This builder seperates your pages into individual serverless endpoints, so you cannot use a custom server. - -Using a custom server would require that all pages be routed through that custom server and the application would lose out on many of the benefits of [serverless](/docs/v2/deployments/concepts/lambdas/) Next.js. You can still achieve most of the logic that you have in a custom server by using [getInitialProps()](https://nextjs.org/docs/#fetching-data-and-component-lifecycle) and using [routes](/docs/v2/deployments/configuration/#routes). - -### Maximum Lambda Bundle Size - -To help keep cold boot times low, the [maximum output bundle size](/docs/v2/deployments/concepts/lambdas#maximum-bundle-size) for a Next.js output lambda is, by default, **`5mb`**. -This [limit is extendable](/docs/v2/deployments/builders/overview#configuring-output-lambda-size) up to **`50mb`**. - - - - Example maxLambdaSize configuration: - - {`{ - "builds": [ - { "src": "next.config.js", "use": "@now/next", "config": { "maxLambdaSize": "10mb" } } - ] -}`} - - -export default ({ children }) => {children} diff --git a/vendor/README.md b/vendor/README.md index f94010a8a5..99a291a950 100644 --- a/vendor/README.md +++ b/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) diff --git a/vendor/grammars/markdown-tm-language b/vendor/grammars/markdown-tm-language new file mode 160000 index 0000000000..9776f2e73a --- /dev/null +++ b/vendor/grammars/markdown-tm-language @@ -0,0 +1 @@ +Subproject commit 9776f2e73a3c1dac6a70c36255417a0edb388d31 diff --git a/vendor/licenses/git_submodule/markdown-tm-language.dep.yml b/vendor/licenses/git_submodule/markdown-tm-language.dep.yml new file mode 100644 index 0000000000..9d4241e6b0 --- /dev/null +++ b/vendor/licenses/git_submodule/markdown-tm-language.dep.yml @@ -0,0 +1,57 @@ +--- +name: markdown-tm-language +version: 9776f2e73a3c1dac6a70c36255417a0edb388d31 +type: git_submodule +homepage: https://github.com/wooorm/markdown-tm-language.git +license: mit +licenses: +- sources: license + text: | + (The MIT License) + + Copyright (c) 2023 Titus Wormer + + Permission is hereby granted, free of charge, to any person obtaining + a copy of this software and associated documentation files (the + 'Software'), to deal in the Software without restriction, including + without limitation the rights to use, copy, modify, merge, publish, + distribute, sublicense, and/or sell copies of the Software, and to + permit persons to whom the Software is furnished to do so, subject to + the following conditions: + + The above copyright notice and this permission notice shall be + included in all copies or substantial portions of the Software. + + THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, + EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF + MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. + IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY + CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, + TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE + SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. +- sources: readme.md + text: |- + [MIT][license] © [Titus Wormer][author] + + + + [build-badge]: https://github.com/wooorm/markdown-tm-language/workflows/main/badge.svg + + [build]: https://github.com/wooorm/markdown-tm-language/actions + + [license]: license + + [author]: https://wooorm.com + + [contribute]: https://opensource.guide/how-to-contribute/ + + [markdown]: https://commonmark.org + + [mdx]: https://mdxjs.com + + [demo]: https://wooorm.com/markdown-tm-language/ + + [starry-night]: https://github.com/wooorm/starry-night + + [shiki]: https://github.com/shikijs/shiki +notices: []