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: '<div>**child**</div>',
+				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 <div>
+    <p>Hi, {name}!</p>
+
+    <p>and some more things</p>
+  </div>
+}
+
+export function Local(props) {
+  return <span style={{color: 'red'}} {...props} />
+}
+
+# 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.
+
+<Chart year={year} color="#fcb32c" />
+
+<div className="note">
+  > Some notable things in a block quote!
+</div>
+
+# 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()`.
+
+<Component
+  open
+  x={1}
+  label={'this is a string, *not* markdown!'}
+  icon={<Icon />}
+/>
+
+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! */}