From 7d2065d55d45b6a590366f05347ba06c4e244847 Mon Sep 17 00:00:00 2001 From: Remco Haszing Date: Thu, 5 May 2022 15:48:53 +0200 Subject: [PATCH 01/10] Add initial mdx language --- src/basic-languages/mdx/mdx.contribution.ts | 24 ++++++++ src/basic-languages/mdx/mdx.test.ts | 8 +++ src/basic-languages/mdx/mdx.ts | 65 +++++++++++++++++++++ 3 files changed, 97 insertions(+) create mode 100644 src/basic-languages/mdx/mdx.contribution.ts create mode 100644 src/basic-languages/mdx/mdx.test.ts create mode 100644 src/basic-languages/mdx/mdx.ts diff --git a/src/basic-languages/mdx/mdx.contribution.ts b/src/basic-languages/mdx/mdx.contribution.ts new file mode 100644 index 00000000..c435bfcf --- /dev/null +++ b/src/basic-languages/mdx/mdx.contribution.ts @@ -0,0 +1,24 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ + +import { registerLanguage } from '../_.contribution'; + +declare var AMD: any; +declare var require: any; + +registerLanguage({ + id: 'mdx', + extensions: ['.mdx'], + aliases: ['MDX', 'mdx'], + loader: () => { + if (AMD) { + return new Promise((resolve, reject) => { + require(['vs/basic-languages/mdx/mdx'], resolve, reject); + }); + } else { + return import('./mdx'); + } + } +}); diff --git a/src/basic-languages/mdx/mdx.test.ts b/src/basic-languages/mdx/mdx.test.ts new file mode 100644 index 00000000..7e64f0a2 --- /dev/null +++ b/src/basic-languages/mdx/mdx.test.ts @@ -0,0 +1,8 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ + +import { testTokenization } from '../test/testRunner'; + +testTokenization('mdx', []); diff --git a/src/basic-languages/mdx/mdx.ts b/src/basic-languages/mdx/mdx.ts new file mode 100644 index 00000000..d87e5244 --- /dev/null +++ b/src/basic-languages/mdx/mdx.ts @@ -0,0 +1,65 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ + +import type { languages } from '../../fillers/monaco-editor-core'; + +export const conf: languages.LanguageConfiguration = { + comments: { + blockComment: ['{/*', '*/}'] + } +}; + +export const language = { + defaultToken: '', + tokenPostfix: '.mdx', + escapes: /\\(?:["'\\abfnrtv]|x[\dA-Fa-f]{1,4}|u[\dA-Fa-f]{4}|U[\dA-Fa-f]{8})/, + bracket_open: ['{'], + single_quote: ["'"], + double_quote: ['"'], + tokenizer: { + root: [ + [/^\s*import/, { token: 'keyword', next: '@import', nextEmbedded: 'js' }], + [/<\w+/, { token: 'keyword', next: '@jsx' }], + [/<\/?\w+>/, { token: 'keyword' }], + [/\*\*.+\*\*/, 'strong'], + [/{/, { token: 'delimiter.bracket', nextEmbedded: 'js' }], + { include: 'expression' } + ], + import: [[/'\s*(;|$)/, { token: 'string', next: '@pop', nextEmbedded: '@pop' }]], + expression: [[/}/, { token: 'delimiter.bracket', nextEmbedded: '@pop' }]], + jsx: [ + [/\w+=/, { token: 'delimiter.bracket', next: '@jsx_expression' }], + [/\/?>/, { token: 'keyword', next: '@pop' }] + ], + jsx_expression: [ + [ + /["'{]/, + { + cases: { + '@bracket_open': { + token: 'delimiter.bracket', + next: '@expression', + nextEmbedded: 'js' + }, + '@double_quote': { token: 'string', next: '@string_double' }, + '@single_quote': { token: 'string', next: '@string_single' } + } + } + ] + ], + string_double: [ + [/[^"\\]+/, 'string'], + [/@escapes/, 'string.escape'], + [/\\./, 'string.escape.invalid'], + [/"/, 'string', '@pop'] + ], + string_single: [ + [/[^'\\]+/, 'string'], + [/@escapes/, 'string.escape'], + [/\\./, 'string.escape.invalid'], + [/'/, 'string', '@pop'] + ] + } +}; From e87ef8ef11b6df9f8c1b70db72cf52db65ca1859 Mon Sep 17 00:00:00 2001 From: Remco Haszing Date: Fri, 6 May 2022 18:25:31 +0200 Subject: [PATCH 02/10] Update mdx language definition --- src/basic-languages/mdx/mdx.ts | 129 +++++++++++++++++++++++---------- 1 file changed, 91 insertions(+), 38 deletions(-) diff --git a/src/basic-languages/mdx/mdx.ts b/src/basic-languages/mdx/mdx.ts index d87e5244..d0c9ea70 100644 --- a/src/basic-languages/mdx/mdx.ts +++ b/src/basic-languages/mdx/mdx.ts @@ -8,58 +8,111 @@ import type { languages } from '../../fillers/monaco-editor-core'; export const conf: languages.LanguageConfiguration = { comments: { blockComment: ['{/*', '*/}'] - } + }, + brackets: [['{', '}']] }; export const language = { defaultToken: '', tokenPostfix: '.mdx', - escapes: /\\(?:["'\\abfnrtv]|x[\dA-Fa-f]{1,4}|u[\dA-Fa-f]{4}|U[\dA-Fa-f]{8})/, - bracket_open: ['{'], - single_quote: ["'"], - double_quote: ['"'], + control: /[!#()*+.[\\\]_`{}\-]/, + escapes: /\\@control/, + tokenizer: { root: [ + [/^---$/, { token: 'meta.content', next: '@frontmatter', nextEmbedded: 'yaml' }], + [/^\s{4}.*$/, { token: 'variable.source' }], [/^\s*import/, { token: 'keyword', next: '@import', nextEmbedded: 'js' }], - [/<\w+/, { token: 'keyword', next: '@jsx' }], - [/<\/?\w+>/, { token: 'keyword' }], - [/\*\*.+\*\*/, 'strong'], - [/{/, { token: 'delimiter.bracket', nextEmbedded: 'js' }], - { include: 'expression' } + [/^\s*export/, { token: 'keyword', next: '@export', nextEmbedded: 'js' }], + [/<\w+/, { token: 'type.identifier', next: '@jsx' }], + [/<\/?\w+>/, 'type.identifier'], + [ + /^(\s*)(>*\s*)(#{1,6}\s)/, + [{ token: 'white' }, { token: 'comment' }, { token: 'keyword', next: '@header' }] + ], + [/^(\s*)(>*\s*)([*+-])(\s+)/, ['white', 'comment', 'keyword', 'white']], + [/^(\s*)(>*\s*)(\d{1,9}\.)(\s+)/, ['white', 'comment', 'number', 'white']], + [/^(\s*)(>*\s*)(\d{1,9}\.)(\s+)/, ['white', 'comment', 'number', 'white']], + [/^(\s*)(>*\s*)(-{3,}|\*{3,}|_{3,})$/, ['white', 'comment', 'keyword']], + [/`{3,}(\s.*)?$/, { token: 'string', next: '@codeblock_backtick' }], + [/~{3,}(\s.*)?$/, { token: 'string', next: '@codeblock_tilde' }], + [ + /`{3,}(\S+).*$/, + { token: 'string', next: '@codeblock_highlight_backtick', nextEmbedded: '$1' } + ], + [ + /~{3,}(\S+).*$/, + { token: 'string', next: '@codeblock_highlight_tilde', nextEmbedded: '$1' } + ], + [/^(\s*)(-{4,})$/, ['white', 'comment']], + [/^(\s*)(>+)/, ['white', 'comment']], + { include: 'content' } + ], + content: [ + [ + /(\[)(.+)(]\()(.+)(\s+".*")(\))/, + ['', 'string.link', '', 'type.identifier', 'string.link', ''] + ], + [/(\[)(.+)(]\()(.+)(\))/, ['', 'type.identifier', '', 'string.link', '']], + [/(\[)(.+)(]\[)(.+)(])/, ['', 'type.identifier', '', 'type.identifier', '']], + [/(\[)(.+)(]:\s+)(\S*)/, ['', 'type.identifier', '', 'string.link']], + [/(\[)(.+)(])/, ['', 'type.identifier', '']], + [/`.*`/, 'variable.source'], + [/_/, { token: 'emphasis', next: '@emphasis_underscore' }], + [/\*(?!\*)/, { token: 'emphasis', next: '@emphasis_asterisk' }], + [/\*\*/, { token: 'strong', next: '@strong' }], + [/{/, { token: 'delimiter.bracket', next: '@expression', nextEmbedded: 'js' }] ], import: [[/'\s*(;|$)/, { token: 'string', next: '@pop', nextEmbedded: '@pop' }]], - expression: [[/}/, { token: 'delimiter.bracket', nextEmbedded: '@pop' }]], + expression: [ + [/{/, { token: 'delimiter.bracket', next: '@expression' }], + [/}/, { token: 'delimiter.bracket', next: '@pop', nextEmbedded: '@pop' }] + ], + export: [[/^\s*$/, { token: 'delimiter.bracket', next: '@pop', nextEmbedded: '@pop' }]], jsx: [ - [/\w+=/, { token: 'delimiter.bracket', next: '@jsx_expression' }], - [/\/?>/, { token: 'keyword', next: '@pop' }] + [/\s+/, ''], + [/(\w+)(=)("(?:[^"\\]|\\.)*")/, ['attribute.name', 'operator', 'string']], + [/(\w+)(=)('(?:[^'\\]|\\.)*')/, ['attribute.name', 'operator', 'string']], + [/(\w+(?=\s|>|={|$))/, ['attribute.name']], + [/={/, { token: 'delimiter.bracket', next: '@expression', nextEmbedded: 'js' }], + [/>/, { token: 'type.identifier', next: '@pop' }] ], - jsx_expression: [ - [ - /["'{]/, - { - cases: { - '@bracket_open': { - token: 'delimiter.bracket', - next: '@expression', - nextEmbedded: 'js' - }, - '@double_quote': { token: 'string', next: '@string_double' }, - '@single_quote': { token: 'string', next: '@string_single' } - } - } - ] + header: [ + [/.$/, { token: 'keyword', next: '@pop' }], + { include: 'content' }, + [/./, { token: 'keyword' }] + ], + strong: [ + [/\*\*/, { token: 'strong', next: '@pop' }], + { include: 'content' }, + [/./, { token: 'strong' }] + ], + emphasis_underscore: [ + [/_/, { token: 'emphasis', next: '@pop' }], + { include: 'content' }, + [/./, { token: 'emphasis' }] + ], + emphasis_asterisk: [ + [/\*(?!\*)/, { token: 'emphasis', next: '@pop' }], + { include: 'content' }, + [/./, { token: 'emphasis' }] + ], + frontmatter: [[/^---$/, { token: 'meta.content', nextEmbedded: '@pop', next: '@pop' }]], + codeblock_highlight_backtick: [ + [/\s*`{3,}\s*$/, { token: 'string', next: '@pop', nextEmbedded: '@pop' }], + [/.*$/, 'variable.source'] + ], + codeblock_highlight_tilde: [ + [/\s*~{3,}\s*$/, { token: 'string', next: '@pop', nextEmbedded: '@pop' }], + [/.*$/, 'variable.source'] ], - string_double: [ - [/[^"\\]+/, 'string'], - [/@escapes/, 'string.escape'], - [/\\./, 'string.escape.invalid'], - [/"/, 'string', '@pop'] + codeblock_backtick: [ + [/\s*`{3,}\s*$/, { token: 'string', next: '@pop' }], + [/.*$/, 'variable.source'] ], - string_single: [ - [/[^'\\]+/, 'string'], - [/@escapes/, 'string.escape'], - [/\\./, 'string.escape.invalid'], - [/'/, 'string', '@pop'] + codeblock_tilde: [ + [/\s*~{3,}\s*$/, { token: 'string', next: '@pop' }], + [/.*$/, 'variable.source'] ] } }; From 5e5600bd44e2bdc81c39c02f6ee13251745188bc Mon Sep 17 00:00:00 2001 From: Remco Haszing Date: Thu, 12 May 2022 10:47:28 +0200 Subject: [PATCH 03/10] Register mdx contribution --- src/basic-languages/monaco.contribution.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/basic-languages/monaco.contribution.ts b/src/basic-languages/monaco.contribution.ts index 56b078c1..f27a3f0c 100644 --- a/src/basic-languages/monaco.contribution.ts +++ b/src/basic-languages/monaco.contribution.ts @@ -38,6 +38,7 @@ import './lua/lua.contribution'; import './liquid/liquid.contribution'; import './m3/m3.contribution'; import './markdown/markdown.contribution'; +import './mdx/mdx.contribution'; import './mips/mips.contribution'; import './msdax/msdax.contribution'; import './mysql/mysql.contribution'; From 9e1bd604de5f8a795561f28e335b5cfc2e81fa42 Mon Sep 17 00:00:00 2001 From: Remco Haszing Date: Thu, 12 May 2022 10:57:05 +0200 Subject: [PATCH 04/10] Add website mdx sample --- website/index/samples/sample.mdx.txt | 92 ++++++++++++++++++++++++++++ 1 file changed, 92 insertions(+) create mode 100644 website/index/samples/sample.mdx.txt diff --git a/website/index/samples/sample.mdx.txt b/website/index/samples/sample.mdx.txt new file mode 100644 index 00000000..295a0c28 --- /dev/null +++ b/website/index/samples/sample.mdx.txt @@ -0,0 +1,92 @@ +--- +frontmatter: data +yaml: true +--- + +[link](https://example.com) + +~~~ +aasd +asd +asd +~~~ + +# Hello MDX {1+2} + +import { MyComponent } from './MyComponent' + +This is **bold {'foo' + 1} text** + +This is _emphasis {'foo' + 1} text_ + +This is *emphasis {'foo' + 1} text too* + + This is an indented *code* block + +export function foo() { + console.log('asd', 1) + if(true) { + return 'yep' + } + return 'nope' +} + + +This is regular content + +- this is a list + +* this is also a list + ++ me too! + +1. pizza +2. fries +3. ice cream + +---- + +_________ + +***\ +~~~css +body { + color: red; +} +~~~ + +> - this is a list +> +> * this is also a list +> +> + me too! +> +> 1. pizza +> 2. fries +> 3. ice cream +> +> --- +> +> _________ +> +> *** +> +> ```css +> body { +> color: red; +> } +> ``` + +> This is a blockquote +> +>> This is a nested {'blockquote'} + +{'foo' + 1 + 2 + {} + 12} + +{/* this is a comment */} + + + + This is **also** markdown. + + From ce7f3259c1d4e001b82fbc74324872839a664c9f Mon Sep 17 00:00:00 2001 From: Remco Haszing Date: Thu, 12 May 2022 10:57:13 +0200 Subject: [PATCH 05/10] Document samples are needed when adding a language --- CONTRIBUTING.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index cb9019f2..8e49114b 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -19,6 +19,7 @@ Please understand that we only bundle languages with the monaco editor that have - create `$/src/basic-languages/{myLang}/{myLang}.ts` - create `$/src/basic-languages/{myLang}/{myLang}.test.ts` - edit `$/src/basic-languages/monaco.contribution.ts` and register your new language +- create `$/website/index/samples/sample.{myLang}.txt` ```js import './{myLang}/{myLang}.contribution'; From 92a1dad12d5e76a661ebd0b3ea25201bb03f8546 Mon Sep 17 00:00:00 2001 From: Remco Haszing Date: Fri, 13 May 2022 16:31:24 +0200 Subject: [PATCH 06/10] Remove mdx indented code blocks MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit They aren’t supported. --- src/basic-languages/mdx/mdx.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/basic-languages/mdx/mdx.ts b/src/basic-languages/mdx/mdx.ts index d0c9ea70..890befb7 100644 --- a/src/basic-languages/mdx/mdx.ts +++ b/src/basic-languages/mdx/mdx.ts @@ -21,7 +21,6 @@ export const language = { tokenizer: { root: [ [/^---$/, { token: 'meta.content', next: '@frontmatter', nextEmbedded: 'yaml' }], - [/^\s{4}.*$/, { token: 'variable.source' }], [/^\s*import/, { token: 'keyword', next: '@import', nextEmbedded: 'js' }], [/^\s*export/, { token: 'keyword', next: '@export', nextEmbedded: 'js' }], [/<\w+/, { token: 'type.identifier', next: '@jsx' }], From 7755d67b8baebab3da2524ddd90f2dd60589fce4 Mon Sep 17 00:00:00 2001 From: Remco Haszing Date: Fri, 13 May 2022 16:32:48 +0200 Subject: [PATCH 07/10] Configure auto closing pairs and on enter rules --- src/basic-languages/mdx/mdx.ts | 48 ++++++++++++++++++++++++++++++++-- 1 file changed, 46 insertions(+), 2 deletions(-) diff --git a/src/basic-languages/mdx/mdx.ts b/src/basic-languages/mdx/mdx.ts index 890befb7..5d1d86b0 100644 --- a/src/basic-languages/mdx/mdx.ts +++ b/src/basic-languages/mdx/mdx.ts @@ -3,13 +3,57 @@ * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ -import type { languages } from '../../fillers/monaco-editor-core'; +import { languages } from '../../fillers/monaco-editor-core'; export const conf: languages.LanguageConfiguration = { comments: { blockComment: ['{/*', '*/}'] }, - brackets: [['{', '}']] + brackets: [['{', '}']], + autoClosingPairs: [ + { open: '"', close: '"' }, + { open: "'", close: "'" }, + { open: '“', close: '”' }, + { open: '‘', close: '’' }, + { open: '`', close: '`' }, + { open: '{', close: '}' }, + { open: '_', close: '_' }, + { open: '**', close: '**' } + ], + onEnterRules: [ + { + beforeText: /^\s*- .+/, + action: { indentAction: languages.IndentAction.None, appendText: '- ' } + }, + { + beforeText: /^\s*\+ .+/, + action: { indentAction: languages.IndentAction.None, appendText: '+ ' } + }, + { + beforeText: /^\s*\* .+/, + action: { indentAction: languages.IndentAction.None, appendText: '* ' } + }, + { + beforeText: /^> /, + action: { indentAction: languages.IndentAction.None, appendText: '> ' } + }, + { + beforeText: /<\w+/, + action: { indentAction: languages.IndentAction.Indent } + }, + { + beforeText: /\s+>\s*$/, + action: { indentAction: languages.IndentAction.Indent } + }, + { + beforeText: /<\/\w+>/, + action: { indentAction: languages.IndentAction.Outdent } + }, + ...Array.from({ length: 100 }, (_, index) => ({ + beforeText: new RegExp(`^${index}\\. .+`), + action: { indentAction: languages.IndentAction.None, appendText: `${index + 1}. ` } + })) + ] }; export const language = { From dbf74268d3524d8eacd675713db202e746265f0f Mon Sep 17 00:00:00 2001 From: Remco Haszing Date: Fri, 22 Jul 2022 11:06:21 +0200 Subject: [PATCH 08/10] Add < > to auto closing pairs They represent JSX elements. --- src/basic-languages/mdx/mdx.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/basic-languages/mdx/mdx.ts b/src/basic-languages/mdx/mdx.ts index 5d1d86b0..388ddc44 100644 --- a/src/basic-languages/mdx/mdx.ts +++ b/src/basic-languages/mdx/mdx.ts @@ -18,7 +18,8 @@ export const conf: languages.LanguageConfiguration = { { open: '`', close: '`' }, { open: '{', close: '}' }, { open: '_', close: '_' }, - { open: '**', close: '**' } + { open: '**', close: '**' }, + { open: '<', close: '>' } ], onEnterRules: [ { From d4ea5f53f1f5041c3009f0bce2fafc476572eb74 Mon Sep 17 00:00:00 2001 From: Remco Haszing Date: Fri, 22 Jul 2022 11:07:26 +0200 Subject: [PATCH 09/10] Mark ( ) as auto closing pair in MDX This is nice for writing content. --- src/basic-languages/mdx/mdx.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/basic-languages/mdx/mdx.ts b/src/basic-languages/mdx/mdx.ts index 388ddc44..dfbc01e8 100644 --- a/src/basic-languages/mdx/mdx.ts +++ b/src/basic-languages/mdx/mdx.ts @@ -17,6 +17,7 @@ export const conf: languages.LanguageConfiguration = { { open: '‘', close: '’' }, { open: '`', close: '`' }, { open: '{', close: '}' }, + { open: '(', close: ')' }, { open: '_', close: '_' }, { open: '**', close: '**' }, { open: '<', close: '>' } From 1322e33b0d7faedb8339bce3133065a2dcd5f36a Mon Sep 17 00:00:00 2001 From: Remco Haszing Date: Fri, 7 Apr 2023 15:55:47 +0200 Subject: [PATCH 10/10] Add basic MDX tests The sample is taken from https://github.com/wooorm/markdown-tm-language. --- src/basic-languages/mdx/mdx.test.ts | 165 +++++++++++++++++- .../website/data/home-samples/sample.mdx.txt | 91 ++++++++++ 2 files changed, 255 insertions(+), 1 deletion(-) create mode 100644 website/src/website/data/home-samples/sample.mdx.txt diff --git a/src/basic-languages/mdx/mdx.test.ts b/src/basic-languages/mdx/mdx.test.ts index 7e64f0a2..99ef43cc 100644 --- a/src/basic-languages/mdx/mdx.test.ts +++ b/src/basic-languages/mdx/mdx.test.ts @@ -5,4 +5,167 @@ import { testTokenization } from '../test/testRunner'; -testTokenization('mdx', []); +testTokenization( + ['mdx', 'yaml'], + [ + // headers + [ + { + line: '# header 1', + tokens: [{ startIndex: 0, type: 'keyword.mdx' }] + }, + { + line: '## header 2', + tokens: [{ startIndex: 0, type: 'keyword.mdx' }] + }, + { + line: '### header 3', + tokens: [{ startIndex: 0, type: 'keyword.mdx' }] + }, + { + line: '#### header 4', + tokens: [{ startIndex: 0, type: 'keyword.mdx' }] + }, + { + line: '##### header 5', + tokens: [{ startIndex: 0, type: 'keyword.mdx' }] + }, + { + line: '###### header 6', + tokens: [{ startIndex: 0, type: 'keyword.mdx' }] + } + ], + + // Lists + [ + { + line: '- apple', + tokens: [ + { startIndex: 0, type: 'keyword.mdx' }, + { startIndex: 1, type: 'white.mdx' }, + { startIndex: 2, type: '' } + ] + }, + { + line: '* pear', + tokens: [ + { startIndex: 0, type: 'keyword.mdx' }, + { startIndex: 1, type: 'white.mdx' }, + { startIndex: 2, type: '' } + ] + }, + { + line: '+ pineapple', + tokens: [ + { startIndex: 0, type: 'keyword.mdx' }, + { startIndex: 1, type: 'white.mdx' }, + { startIndex: 2, type: '' } + ] + }, + { + line: '1. orange', + tokens: [ + { startIndex: 0, type: 'number.mdx' }, + { startIndex: 2, type: 'white.mdx' }, + { startIndex: 3, type: '' } + ] + } + ], + + // Frontmatter + [ + { + line: '---', + tokens: [{ startIndex: 0, type: 'meta.content.mdx' }] + }, + { + line: 'frontmatter: yaml', + tokens: [ + { startIndex: 0, type: 'type.yaml' }, + { startIndex: 11, type: 'operators.yaml' }, + { startIndex: 12, type: 'white.yaml' }, + { startIndex: 13, type: 'string.yaml' } + ] + }, + { + line: '---', + tokens: [{ startIndex: 0, type: 'meta.content.mdx' }] + } + ], + + // links + [ + { + line: '[MDX](https://mdxjs.com)', + tokens: [ + { startIndex: 0, type: '' }, + { startIndex: 1, type: 'type.identifier.mdx' }, + { startIndex: 4, type: '' }, + { startIndex: 6, type: 'string.link.mdx' }, + { startIndex: 23, type: '' } + ] + }, + { + line: '[monaco][monaco]', + tokens: [ + { startIndex: 0, type: '' }, + { startIndex: 1, type: 'type.identifier.mdx' }, + { startIndex: 7, type: '' }, + { startIndex: 9, type: 'type.identifier.mdx' }, + { startIndex: 15, type: '' } + ] + }, + { + line: '[monaco][]', + tokens: [ + { startIndex: 0, type: '' }, + { startIndex: 1, type: 'type.identifier.mdx' }, + { startIndex: 9, type: '' } + ] + }, + { + line: '[monaco]', + tokens: [ + { startIndex: 0, type: '' }, + { startIndex: 1, type: 'type.identifier.mdx' }, + { startIndex: 7, type: '' } + ] + }, + { + line: '[monaco]: https://github.com/microsoft/monaco-editor', + tokens: [ + { startIndex: 0, type: '' }, + { startIndex: 1, type: 'type.identifier.mdx' }, + { startIndex: 7, type: '' }, + { startIndex: 10, type: 'string.link.mdx' } + ] + } + ], + + // JSX + [ + { + line: '
**child**
', + tokens: [ + { startIndex: 0, type: 'type.identifier.mdx' }, + // This is incorrect. MDX children that start on the same line are JSX, not markdown + { startIndex: 5, type: 'strong.mdx' }, + { startIndex: 14, type: 'type.identifier.mdx' } + ] + }, + { + line: '{console.log("This is JavaScript")}', + tokens: [ + { startIndex: 0, type: 'delimiter.bracket.mdx' }, + { startIndex: 1, type: 'identifier.js' }, + { startIndex: 8, type: 'delimiter.js' }, + { startIndex: 9, type: 'identifier.js' }, + { startIndex: 12, type: 'delimiter.parenthesis.js' }, + { startIndex: 13, type: 'string.js' }, + { startIndex: 33, type: 'delimiter.parenthesis.js' }, + { startIndex: 34, type: 'delimiter.bracket.mdx' } + ] + } + ] + ] +); diff --git a/website/src/website/data/home-samples/sample.mdx.txt b/website/src/website/data/home-samples/sample.mdx.txt new file mode 100644 index 00000000..0e2479f9 --- /dev/null +++ b/website/src/website/data/home-samples/sample.mdx.txt @@ -0,0 +1,91 @@ +--- +title: Hello! +--- + +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 +} + +# 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. + + + +
+ > Some notable things in a block quote! +
+ +# Heading (rank 1) +## Heading 2 +### 3 +#### 4 +##### 5 +###### 6 + +> Block quote + +* Unordered +* List + +1. Ordered +2. List + +A paragraph, introducing a thematic break: + +--- + +```js +// Get an element. +const element = document.querySelectorAll('#hi') + +// Add a class. +element.classList.add('asd') +``` + +a [link](https://example.com), an ![image](./image.png), some *emphasis*, +something **strong**, and finally a little `code()`. + +} +/> + +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! */}