- )
-}
-
-export default Home
diff --git a/examples/contentlayer/posts/my.mdx b/examples/contentlayer/posts/my.mdx
deleted file mode 100644
index 788e361c..00000000
--- a/examples/contentlayer/posts/my.mdx
+++ /dev/null
@@ -1,12 +0,0 @@
----
-type: "Post"
-title: "Hello World"
----
-
-Lorem ipsum dolor sit amet.
-
-```python hello.py
-print("Rendered with Code Hike")
-```
-
-Lorem ipsum dolor sit amet.
diff --git a/packages/mdx/dev/content/comment-annotations.mdx b/packages/mdx/dev/content/comment-annotations.mdx
new file mode 100644
index 00000000..30d5aa99
--- /dev/null
+++ b/packages/mdx/dev/content/comment-annotations.mdx
@@ -0,0 +1,70 @@
+# Comment annotations
+
+Instead of defining the focus on the codeblock metastring, you can us comments inside the code to make the focus relative.
+
+```js
+function lorem(ipsum, dolor = 1) {
+ const sit = ipsum == null && 0
+ dolor = sit - amet(dolor)
+ // focus
+ return sit ? consectetur(ipsum) : []
+}
+
+// focus(1:4)
+function adipiscing(...elit) {
+ console.log(elit)
+ return elit.map(ipsum => ipsum.sit)
+}
+
+// focus[13:17]
+console.log("hey")
+```
+
+Same with other annotations like `bg` and `box`.
+
+```js
+// bg(1:2)
+function foo() {
+ // box[6:9]
+ console.log("hover me")
+ return 8
+}
+```
+
+You can pass a string parameter to comment annotations. For `bg` and `box`, it will be used as a color.
+
+```js index.js
+function lorem(ipsum, dolor = 1) {
+ // bg(1:3) linear-gradient(90deg, #020024 0%, #090979 35%, #00d4ff 100%)
+ const sit = ipsum == null && 0
+ dolor = sit - amet(dolor)
+ return sit ? consectetur(ipsum) : []
+}
+
+// this comment isn't an annotation
+//hello
+// 你好
+// å
+function adipiscing(...elit) {
+ console.log(elit)
+ // box[19:36] aqua
+ return elit.map(ipsum => ipsum.sit)
+}
+```
+
+And now we introduce two more annotations: `link` and `label`
+
+```js focus=4,8
+function lorem(ipsum, dolor = 1) {
+ const sit = ipsum == null && 0
+ dolor = sit - amet(dolor)
+ // link[16:26] https://github.com/code-hike/codehike
+ return sit ? consectetur(ipsum) : []
+}
+
+function adipiscing(...elit) {
+ // label something something
+ console.log("hover me")
+ return elit.map(ipsum => ipsum.sit)
+}
+```
diff --git a/packages/mdx/dev/content/meta-annotations.mdx b/packages/mdx/dev/content/meta-annotations.mdx
new file mode 100644
index 00000000..dacfc874
--- /dev/null
+++ b/packages/mdx/dev/content/meta-annotations.mdx
@@ -0,0 +1,29 @@
+# Annotations
+
+Besides `focus`, there are a few more annotations that can be used to highlight code.
+
+
+
+### `box` annotation
+
+```js box=2[15:43],4[10:12]
+function lorem(ipsum, dolor = 1) {
+ const sit = ipsum == null ? 0 : ipsum.sit
+ dolor = sit - amet(dolor)
+ return sit
+ ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor)
+ : []
+}
+```
+
+### `bg` annotation
+
+```js bg=2,4:6
+function lorem(ipsum, dolor = 1) {
+ const sit = ipsum == null ? 0 : ipsum.sit
+ dolor = sit - amet(dolor)
+ return sit
+ ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor)
+ : []
+}
+```
diff --git a/packages/mdx/dev/content/scrollycoding copy.mdx b/packages/mdx/dev/content/scrollycoding copy.mdx
new file mode 100644
index 00000000..5affd0a0
--- /dev/null
+++ b/packages/mdx/dev/content/scrollycoding copy.mdx
@@ -0,0 +1,135 @@
+_Based on [Next.js official docs](https://nextjs.org/docs/advanced-features/using-mdx)._
+
+Start by installing next and react on an empty directory:
+
+```bash
+npm install next react react-dom
+```
+
+
+
+Then also install the [mdx plugin for next](focus://1[13:21]), the [mdx loader](focus://1[23:36]), and [Code Hike](focus://1[38:56]).
+
+```bash
+npm install @next/mdx @mdx-js/loader @code-hike/mdx@next
+```
+
+
+
+
+
+
+
+Create a `next.config.js` file at the root of your project.
+
+Here we use the [_`require("@next/mdx")`_](focus://1,6,8) plugin to set up MDX imports.
+
+Also, make sure you include `"md"` and `"mdx"` on the _`pageExtensions`_ setting.
+
+After this step, you can use MDX files in your project, but you can't use Code Hike yet.
+
+{/* prettier-ignore */}
+```js next.config.js
+const withMDX = require("@next/mdx")({
+ extension: /\.mdx?$/,
+ options: {
+ remarkPlugins: [],
+ },
+})
+
+module.exports = withMDX({
+ pageExtensions: [
+ "ts", "tsx", "js",
+ "jsx", "md", "mdx"
+ ],
+})
+```
+
+---
+
+To set up Code Hike you need to [import the @code-hike/mdx plugin](focus://1,6[1:6]), and add it to the remarkPlugins array in the next.config.js file.
+
+You will also want to import a theme. You can import one from shiki, or make a custom one.
+
+Pass the theme into Code Hike's config object, there are a few more settings you can use, like lineNumbers for example.
+
+{/* prettier-ignore */}
+```js next.config.js focus=1:2,7:9
+const { remarkCH } = require("@code-hike/mdx")
+const theme = require("shiki/themes/nord.json")
+
+const withMDX = require("@next/mdx")({
+ extension: /\.mdx?$/,
+ options: {
+ remarkPlugins: [
+ [remarkCH, { theme }]
+ ],
+ },
+})
+
+module.exports = withMDX({
+ pageExtensions: [
+ "ts", "tsx", "js",
+ "jsx", "md", "mdx"
+ ],
+})
+```
+
+---
+
+Then you need to create a `pages/_app.js` file if you don't have one.
+
+You can find more information about the `_app.js` file in the [Next.js official docs](https://nextjs.org/docs/advanced-features/custom-app).
+
+{/* prettier-ignore */}
+```js pages/_app.js
+function MyApp({ Component, pageProps }) {
+ return
+}
+
+export default MyApp
+```
+
+---
+
+The pages/\_app.js file is where you add global stylesheets in Next.js.
+
+Here we need to import Code Hike's CSS.
+
+If you want to customize Code Hike's styles with a global stylesheet make sure to import it after this import to avoid specificity issues.
+
+{/* prettier-ignore */}
+```js pages/_app.js focus=1
+import "@code-hike/mdx/dist/index.css"
+
+function MyApp({ Component, pageProps }) {
+ return
+}
+
+export default MyApp
+```
+
+---
+
+Now you can create mdx files using codehike.
+
+Markdown (.md) files should also work.
+
+{/* prettier-ignore */}
+~~~md pages/my.mdx
+# Hello
+
+Lorem ipsum dolor sit amet.
+
+```python hello.py
+print("Rendered with Code Hike")
+```
+
+Lorem ipsum dolor sit amet.
+~~~
+
+
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
+
+Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
diff --git a/packages/mdx/dev/content/scrollycoding-demo.mdx b/packages/mdx/dev/content/scrollycoding-demo.mdx
new file mode 100644
index 00000000..0ef58add
--- /dev/null
+++ b/packages/mdx/dev/content/scrollycoding-demo.mdx
@@ -0,0 +1,170 @@
+# Scrollycoding
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
+
+Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
+
+
+
+## Step 1
+
+Lorem ipsum dolor sit amet, consectetur adipiscing something about points, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+> Nova in illis at dabat legi harundine non, ova miratur? _Quid in_ sole aer
+> ad diffusa illis voluisti fidensque coniugiale laniata curam. Aras rivus
+> eripuit, qua fistula haec partus; serpens, negat.
+
+Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus.
+
+
+
+```js app.js focus=3:10
+const { lorem, ipsum } = dolor({
+ sit: {
+ amet: 1,
+ consectetur: 2,
+ adipiscing: elit => ({
+ sed: elit,
+ }),
+ eiusmod: tempor => ({
+ incididunt: tempor,
+ }),
+ ut: labore => ({
+ et: labore,
+ dolore: labore + 1,
+ }),
+ magna: aliqua => ({
+ ut: aliqua,
+ }),
+ enim: ({ amet, ad }) => ({
+ minim: amet,
+ et: ad,
+ }),
+ veniam: quis => ({
+ incididunt: quis,
+ ut: quis,
+ }),
+ nostrud: elit => ({
+ exercitation: elit,
+ ullamco: elit,
+ }),
+ laboris: elit => ({
+ nisi: elit,
+ }),
+ },
+})
+```
+
+```css styles.css
+.lorem {
+ color: red;
+}
+```
+
+
+
+---
+
+## Step 2
+
+Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in.
+
+Praesent elementum facilisis leo vel fringilla est ullamcorper eget.
+
+Id aliquet risus feugiat in ante metus dictum at tempor. Sed blandit libero volutpat sed cras. Sed odio morbi quis commodo odio aenean sed adipiscing. Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in. Nibh cras pulvinar mattis nunc sed. Luctus accumsan tortor posuere ac ut consequat semper viverra. Fringilla ut morbi tincidunt augue interdum velit euismod.
+
+Morbi quis commodo.
+
+```js app.js focus=11:17
+
+```
+
+---
+
+## Step 3
+
+Id aliquet risus feugiat in ante metus dictum at tempor. Sed blandit libero volutpat sed cras. Sed odio morbi quis commodo odio aenean sed adipiscing. Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu.
+
+- Nisi lacus sed viverra tellus in
+- Nibh cras pulvinar mattis nunc sed
+- Luctus accumsan tortor posuere ac
+
+Ut consequat semper viverra. Fringilla ut morbi tincidunt augue interdum velit euismod.
+
+```js app.js focus=11:14
+const { lorem, ipsum } = dolor({
+ sit: {
+ amet: 1,
+ consectetur: 2,
+ adipiscing: elit => ({
+ sed: elit,
+ }),
+ eiusmod: tempor => ({
+ incididunt: tempor,
+ }),
+ ut: labore => ({
+ et: lorem(labore * ipsum),
+ dolore: lorem(labore + 1),
+ }),
+ enim: ({ amet, ad }) => ({
+ minim: amet,
+ et: ad,
+ }),
+ veniam: quis => ({
+ incididunt: quis,
+ ut: quis,
+ }),
+ nostrud: elit => ({
+ exercitation: elit,
+ ullamco: elit,
+ }),
+ laboris: elit => ({
+ nisi: elit,
+ }),
+ },
+})
+```
+
+---
+
+## Step 4
+
+Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in. Venenatis cras sed felis eget velit. Consectetur libero id faucibus nisl tincidunt.
+
+Sed blandit libero volutpat sed cras.
+
+- Nisi lacus sed viverra tellus in
+- Nibh cras pulvinar mattis nunc sed
+
+Gravida in fermentum et sollicitudin ac orci phasellus egestas tellus. Volutpat consequat mauris nunc congue nisi vitae.
+
+```js app.js focus=19:29
+
+```
+
+---
+
+## Step 5
+
+Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in.
+
+Praesent elementum facilisis leo vel fringilla est ullamcorper eget.
+
+Id aliquet risus feugiat in ante metus dictum at tempor. Sed blandit libero volutpat sed cras. Sed odio morbi quis commodo odio aenean sed adipiscing. Velit euismod in pellentesque massa placerat.
+
+Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in. Nibh cras pulvinar mattis nunc sed. Luctus accumsan tortor posuere ac ut consequat semper viverra.
+
+- Fringilla ut morbi tincidunt augue interdum velit euismod.
+- Luctus accumsan tortor posuere ac ut consequat semper viverra.
+
+Morbi quis commodo.
+
+```js app.js
+
+```
+
+
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
+
+Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
diff --git a/packages/mdx/dev/content/scrollycoding-preview.mdx b/packages/mdx/dev/content/scrollycoding-preview.mdx
new file mode 100644
index 00000000..86548ebe
--- /dev/null
+++ b/packages/mdx/dev/content/scrollycoding-preview.mdx
@@ -0,0 +1,184 @@
+# Scrollycoding
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
+
+Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
+
+
+
+## Step 1
+
+Lorem ipsum dolor sit amet, consectetur adipiscing something about points, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+> Nova in illis at dabat legi harundine non, ova miratur? _Quid in_ sole aer
+> ad diffusa illis voluisti fidensque coniugiale laniata curam. Aras rivus
+> eripuit, qua fistula haec partus; serpens, negat.
+
+Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget.
+
+Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus.
+
+```jsx src/App.js
+import { motion } from "framer-motion"
+
+const transition = { duration: 1 }
+
+export default function App() {
+ const bg = "hsl(20, 100%, 50%)"
+ return (
+
+
+
+ )
+}
+```
+
+---
+
+## Step 2
+
+Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in.
+
+Praesent elementum facilisis leo vel fringilla est ullamcorper eget.
+
+Id aliquet risus feugiat in ante metus dictum at tempor. Sed blandit libero volutpat sed cras. Sed odio morbi quis commodo odio aenean sed adipiscing. Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in. Nibh cras pulvinar mattis nunc sed. Luctus accumsan tortor posuere ac ut consequat semper viverra. Fringilla ut morbi tincidunt augue interdum velit euismod.
+
+Morbi quis commodo.
+
+```jsx src/App.js focus=1,6,9:15
+import { motion } from "framer-motion"
+
+const transition = { duration: 1 }
+
+export default function App() {
+ const bg = "hsl(110, 100%, 50%)"
+ return (
+
+
+
+ )
+}
+```
+
+---
+
+## Step 3
+
+Id aliquet risus feugiat in ante metus dictum at tempor. Sed blandit libero volutpat sed cras. Sed odio morbi quis commodo odio aenean sed adipiscing. Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu.
+
+- Nisi lacus sed viverra tellus in
+- Nibh cras pulvinar mattis nunc sed
+- Luctus accumsan tortor posuere ac
+
+Ut consequat semper viverra. Fringilla ut morbi tincidunt augue interdum velit euismod.
+
+```jsx src/App.js focus=1,6,9:15
+import { motion } from "framer-motion"
+
+const transition = { duration: 1 }
+
+export default function App() {
+ const bg = "hsl(200, 100%, 50%)"
+ return (
+
+
+
+ )
+}
+```
+
+---
+
+## Step 4
+
+Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in. Venenatis cras sed felis eget velit. Consectetur libero id faucibus nisl tincidunt.
+
+Sed blandit libero volutpat sed cras.
+
+- Nisi lacus sed viverra tellus in
+- Nibh cras pulvinar mattis nunc sed
+
+Gravida in fermentum et sollicitudin ac orci phasellus egestas tellus. Volutpat consequat mauris nunc congue nisi vitae.
+
+```jsx src/App.js focus=1,6,9:15
+import { motion } from "framer-motion"
+
+const transition = { duration: 1 }
+
+export default function App() {
+ const bg = "hsl(290, 100%, 50%)"
+ return (
+
+
+
+ )
+}
+```
+
+---
+
+## Step 5
+
+Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in.
+
+Praesent elementum facilisis leo vel fringilla est ullamcorper eget.
+
+Id aliquet risus feugiat in ante metus dictum at tempor. Sed blandit libero volutpat sed cras. Sed odio morbi quis commodo odio aenean sed adipiscing. Velit euismod in pellentesque massa placerat.
+
+Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in. Nibh cras pulvinar mattis nunc sed. Luctus accumsan tortor posuere ac ut consequat semper viverra.
+
+- Fringilla ut morbi tincidunt augue interdum velit euismod.
+- Luctus accumsan tortor posuere ac ut consequat semper viverra.
+
+Morbi quis commodo.
+
+```jsx src/App.js focus=1,6,9:15
+import { motion } from "framer-motion"
+
+const transition = { duration: 1 }
+
+export default function App() {
+ const bg = "hsl(10, 100%, 50%)"
+ return (
+
+
+
+ )
+}
+```
+
+
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
+
+Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
diff --git a/packages/mdx/dev/content/scrollycoding.mdx b/packages/mdx/dev/content/scrollycoding.mdx
new file mode 100644
index 00000000..5affd0a0
--- /dev/null
+++ b/packages/mdx/dev/content/scrollycoding.mdx
@@ -0,0 +1,135 @@
+_Based on [Next.js official docs](https://nextjs.org/docs/advanced-features/using-mdx)._
+
+Start by installing next and react on an empty directory:
+
+```bash
+npm install next react react-dom
+```
+
+
+
+Then also install the [mdx plugin for next](focus://1[13:21]), the [mdx loader](focus://1[23:36]), and [Code Hike](focus://1[38:56]).
+
+```bash
+npm install @next/mdx @mdx-js/loader @code-hike/mdx@next
+```
+
+
+
+
+
+
+
+Create a `next.config.js` file at the root of your project.
+
+Here we use the [_`require("@next/mdx")`_](focus://1,6,8) plugin to set up MDX imports.
+
+Also, make sure you include `"md"` and `"mdx"` on the _`pageExtensions`_ setting.
+
+After this step, you can use MDX files in your project, but you can't use Code Hike yet.
+
+{/* prettier-ignore */}
+```js next.config.js
+const withMDX = require("@next/mdx")({
+ extension: /\.mdx?$/,
+ options: {
+ remarkPlugins: [],
+ },
+})
+
+module.exports = withMDX({
+ pageExtensions: [
+ "ts", "tsx", "js",
+ "jsx", "md", "mdx"
+ ],
+})
+```
+
+---
+
+To set up Code Hike you need to [import the @code-hike/mdx plugin](focus://1,6[1:6]), and add it to the remarkPlugins array in the next.config.js file.
+
+You will also want to import a theme. You can import one from shiki, or make a custom one.
+
+Pass the theme into Code Hike's config object, there are a few more settings you can use, like lineNumbers for example.
+
+{/* prettier-ignore */}
+```js next.config.js focus=1:2,7:9
+const { remarkCH } = require("@code-hike/mdx")
+const theme = require("shiki/themes/nord.json")
+
+const withMDX = require("@next/mdx")({
+ extension: /\.mdx?$/,
+ options: {
+ remarkPlugins: [
+ [remarkCH, { theme }]
+ ],
+ },
+})
+
+module.exports = withMDX({
+ pageExtensions: [
+ "ts", "tsx", "js",
+ "jsx", "md", "mdx"
+ ],
+})
+```
+
+---
+
+Then you need to create a `pages/_app.js` file if you don't have one.
+
+You can find more information about the `_app.js` file in the [Next.js official docs](https://nextjs.org/docs/advanced-features/custom-app).
+
+{/* prettier-ignore */}
+```js pages/_app.js
+function MyApp({ Component, pageProps }) {
+ return
+}
+
+export default MyApp
+```
+
+---
+
+The pages/\_app.js file is where you add global stylesheets in Next.js.
+
+Here we need to import Code Hike's CSS.
+
+If you want to customize Code Hike's styles with a global stylesheet make sure to import it after this import to avoid specificity issues.
+
+{/* prettier-ignore */}
+```js pages/_app.js focus=1
+import "@code-hike/mdx/dist/index.css"
+
+function MyApp({ Component, pageProps }) {
+ return
+}
+
+export default MyApp
+```
+
+---
+
+Now you can create mdx files using codehike.
+
+Markdown (.md) files should also work.
+
+{/* prettier-ignore */}
+~~~md pages/my.mdx
+# Hello
+
+Lorem ipsum dolor sit amet.
+
+```python hello.py
+print("Rendered with Code Hike")
+```
+
+Lorem ipsum dolor sit amet.
+~~~
+
+
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
+
+Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
diff --git a/packages/mdx/dev/content/section.mdx b/packages/mdx/dev/content/section.mdx
new file mode 100644
index 00000000..e18218d4
--- /dev/null
+++ b/packages/mdx/dev/content/section.mdx
@@ -0,0 +1,51 @@
+# Code Links
+
+Lorem ipsum dolor sit amet.
+
+
+
+Consectetur adipiscing elit, sed do eiusmod tempor [incididunt](focus://4:7) ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget.
+_`orem`_, _`sum`_
+
+```js
+function lorem(ipsum, dolor) {
+ const sit = "lorem ipsum"
+ dolor = elit(dolor, 3)
+ while (++consectetur < amet) {
+ sit.eiusmod(150)
+ tempor(ipsum, adipiscing)
+ }
+}
+```
+
+Duis aute irure dolor in reprehenderit in voluptate velit esse cillum [dolore](focus://1[23:27],3) eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
+
+
+
+## With multiple files
+
+
+
+Lorem dolor sit amet, [javascript](focus://index.js#2:3) adipiscing elit, sed do eiusmod [styles](focus://styles.css#2:3) incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
+
+
+```js index.js
+function lorem(ipsum, dolor) {
+ const sit = ipsum - amet(dolor)
+ return sit + "lorem ipsum"
+}
+```
+
+```css styles.css
+.lorem-ipsum > .dolor pre {
+ background-color: var(--color-bg);
+ padding: 1em 0px 10vh 300px;
+}
+```
+
+
+
+_`ackground-color: va`_
+
+
diff --git a/packages/mdx/dev/content/simple-code.mdx b/packages/mdx/dev/content/simple-code.mdx
new file mode 100644
index 00000000..f0285a70
--- /dev/null
+++ b/packages/mdx/dev/content/simple-code.mdx
@@ -0,0 +1,92 @@
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
+```
+function lorem(ipsum, dolor = 1) {
+ return ipsum + dolor;
+}
+```
+
+```mermaid
+graph LR
+ Start1(Start)
+ --Bot 启动--> check1[检查群内的非 Authing 用户]
+ --> addUser[添加 Authing 用户并消息提醒绑定手机号]
+ --> End1(End)
+```
+
+```js
+function lorem(ipsum, dolor = 1) {}
+```
+
+---
+
+```js
+function lorem(ipsum, dolor = 1) {
+ const sit = ipsum == null ? 0 : ipsum.sit
+ dolor = sit - amet(dolor)
+ return sit
+ ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor)
+ : []
+}
+```
+
+---
+
+```js
+function lorem(ipsum, dolor = 1) {
+ const sit = ipsum == null ? 0 : ipsum.sit
+ dolor = sit - amet(dolor)
+ return sit
+ ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor)
+ : []
+}
+function lorem(ipsum, dolor = 1) {
+ const sit = ipsum == null ? 0 : ipsum.sit
+ dolor = sit - amet(dolor)
+ return sit
+ ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor)
+ : []
+}
+function lorem(ipsum, dolor = 1) {
+ const sit = ipsum == null ? 0 : ipsum.sit
+ dolor = sit - amet(dolor)
+ return sit
+ ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor)
+ : []
+}
+function lorem(ipsum, dolor = 1) {
+ const sit = ipsum == null ? 0 : ipsum.sit
+ dolor = sit - amet(dolor)
+ return sit
+ ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor)
+ : []
+}
+function lorem(ipsum, dolor = 1) {
+ const sit = ipsum == null ? 0 : ipsum.sit
+ dolor = sit - amet(dolor)
+ return sit
+ ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor)
+ : []
+}
+function lorem(ipsum, dolor = 1) {
+ const sit = ipsum == null ? 0 : ipsum.sit
+ dolor = sit - amet(dolor)
+ return sit
+ ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor)
+ : []
+}
+function lorem(ipsum, dolor = 1) {
+ const sit = ipsum == null ? 0 : ipsum.sit
+ dolor = sit - amet(dolor)
+ return sit
+ ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor)
+ : []
+}
+function lorem(ipsum, dolor = 1) {
+ const sit = ipsum == null ? 0 : ipsum.sit
+ dolor = sit - amet(dolor)
+ return sit
+ ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor)
+ : []
+}
+```
diff --git a/packages/mdx/dev/content/simple-editor.mdx b/packages/mdx/dev/content/simple-editor.mdx
new file mode 100644
index 00000000..bbebfb82
--- /dev/null
+++ b/packages/mdx/dev/content/simple-editor.mdx
@@ -0,0 +1,156 @@
+
+
+```js index.js
+console.log(1)
+```
+
+
+
+---
+
+
+
+```js index.js
+console.log(1)
+```
+
+```js app.js
+console.log("app")
+```
+
+---
+
+```html index.html
+
+
+ReactDOM.render(app, document.getElementById("root"))
+```
+
+
+
+But instead of using createElement directly you can use JSX.
+
+---
+
+
+
+```jsx src/index.js focus=4:10
+import React from "react"
+import ReactDOM from "react-dom"
+
+function MyComponent() {
+ return (
+
+
+
+ )
+}
+
+const app =
Hello React
+
+ReactDOM.render(app, document.getElementById("root"))
+```
+
+
+
+To create a component you only need to write a function with a name that starts with a capital letter.
+
+---
+
+
+
+```jsx src/index.js focus=4[10:20],12:17
+import React from "react"
+import ReactDOM from "react-dom"
+
+function MyComponent() {
+ return (
+
+
+
+ )
+}
+
+const app = (
+
+
+
+
+)
+
+ReactDOM.render(app, document.getElementById("root"))
+```
+
+
+
+Now you can use that function in JSX.
+
+---
+
+
+
+```jsx src/index.js focus=14[18:29],15[18:31]
+import React from "react"
+import ReactDOM from "react-dom"
+
+function MyComponent() {
+ return (
+
+
+
+ )
+}
+
+const app = (
+
+
+
+
+)
+
+ReactDOM.render(app, document.getElementById("root"))
+```
+
+
+
+You can assign attributes
+
+---
+
+
+
+```jsx src/index.js focus=4[22:29],14[18:29],15[18:31]
+import React from "react"
+import ReactDOM from "react-dom"
+
+function MyComponent({ name }) {
+ return (
+
+
+
+ )
+}
+
+const app = (
+
+
+
+
+)
+
+ReactDOM.render(app, document.getElementById("root"))
+```
+
+
+
+And React will pass them to the component as parameters
+
+---
+
+
+
+```jsx src/index.js focus=4[22:29],7
+import React from "react"
+import ReactDOM from "react-dom"
+
+function MyComponent({ name }) {
+ return (
+
+
+
+ )
+}
+
+const app = (
+
+
+
+
+)
+
+ReactDOM.render(app, document.getElementById("root"))
+```
+
+
+
+Inside JSX, you use curly braces to wrap dynamic data
+
+---
+
+
+
+```jsx src/index.js focus=5,9
+import React from "react"
+import ReactDOM from "react-dom"
+
+function MyComponent({ name }) {
+ const goalCount = 2
+ return (
+
+
+ {"⚽".repeat(goalCount)}
+
+ )
+}
+
+const app = (
+
+
+
+
+)
+
+ReactDOM.render(app, document.getElementById("root"))
+```
+
+
+
+In fact you can wrap any javascript expression.
+
+---
+
+
+
+```jsx src/index.js focus=7:9,13[15:35]
+import React from "react"
+import ReactDOM from "react-dom"
+
+function MyComponent({ name }) {
+ const goalCount = 2
+
+ const handleClick = event => {
+ // do something
+ }
+
+ return (
+
+
+ {"⚽".repeat(goalCount)}
+
+ )
+}
+
+const app = (
+
+
+
+
+)
+
+ReactDOM.render(app, document.getElementById("root"))
+```
+
+
+
+To add event listeners you pass a function to the corresponding attribute
+
+---
+
+
+
+```jsx src/index.js focus=5
+import React from "react"
+import ReactDOM from "react-dom"
+
+function MyComponent({ name }) {
+ const [goalCount, setCount] = React.useState(2)
+
+ const handleClick = event => {
+ // do something
+ }
+ return (
+
+
+ {"⚽".repeat(goalCount)}
+
+ )
+}
+
+const app = (
+
+
+
+
+)
+
+ReactDOM.render(app, document.getElementById("root"))
+```
+
+
+
+To add state to a component there's the useState function from React.
+
+---
+
+
+
+```jsx src/index.js focus=5,7:9
+import React from "react"
+import ReactDOM from "react-dom"
+
+function MyComponent({ name }) {
+ const [goalCount, setCount] = React.useState(2)
+
+ const handleClick = event => {
+ setCount(goalCount + 1)
+ }
+
+ return (
+
+
+ {"⚽".repeat(goalCount)}
+
+ )
+}
+
+const app = (
+
+
+
+
+)
+
+ReactDOM.render(app, document.getElementById("root"))
+```
+
+
+
+It gives you a function to update the state.
+
+---
+
+
+
+```jsx src/index.js focus=5,7:9,13,14
+
+```
+
+
+
+When you call it, React will know it needs to re-render the component.
+
+---
+
+
+
+```jsx src/index.js focus=19
+import React from "react"
+import ReactDOM from "react-dom"
+
+function MyComponent({ name }) {
+ const [goalCount, setCount] = React.useState(2)
+
+ const handleClick = event => {
+ setCount(goalCount + 1)
+ }
+
+ return (
+
+ )
+}
+
+const app = (
+
+ {players.map(playerName => (
+
+ ))}
+
+)
+
+ReactDOM.render(app, document.getElementById("root"))
+```
+
+
+
+React passes the nested elements inside a special property called children.
+
+
diff --git a/packages/mdx/dev/content/slideshow.mdx b/packages/mdx/dev/content/slideshow.mdx
new file mode 100644
index 00000000..e0a62e2b
--- /dev/null
+++ b/packages/mdx/dev/content/slideshow.mdx
@@ -0,0 +1,207 @@
+# Slideshow with preview
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
+
+
+
+Lorem ipsum dolor sit amet, consectetur adipiscing something about points, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+```jsx src/App.js
+import { motion } from "framer-motion"
+
+const transition = { duration: 1 }
+
+export default function App() {
+ const bg = "hsl(20, 100%, 50%)"
+ return (
+
+
+
+ )
+}
+```
+
+---
+
+## Step 2
+
+Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in.
+
+```jsx src/App.js focus=1,6,9:15
+import { motion } from "framer-motion"
+
+const transition = { duration: 1 }
+
+export default function App() {
+ const bg = "hsl(110, 100%, 50%)"
+ return (
+
+
+
+ )
+}
+```
+
+---
+
+## Step 3
+
+Id aliquet risus feugiat in ante metus dictum at tempor. Sed blandit libero volutpat sed cras.
+
+```jsx src/App.js focus=1,6,9:15
+import { motion } from "framer-motion"
+
+const transition = { duration: 1 }
+
+export default function App() {
+ const bg = "hsl(200, 100%, 50%)"
+ return (
+
+
+
+ )
+}
+```
+
+---
+
+## Step 4
+
+Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu.
+
+```jsx src/App.js focus=1,6,9:15
+import { motion } from "framer-motion"
+
+const transition = { duration: 1 }
+
+export default function App() {
+ const bg = "hsl(290, 100%, 50%)"
+ return (
+
+ )
+}
+```
+
+
+
+# Rest
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
+
+Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
diff --git a/packages/mdx/dev/content/spotlight-demo.mdx b/packages/mdx/dev/content/spotlight-demo.mdx
new file mode 100644
index 00000000..c4943882
--- /dev/null
+++ b/packages/mdx/dev/content/spotlight-demo.mdx
@@ -0,0 +1,80 @@
+# Spotlight
+
+This is how to use the `` component. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quia! Quidem, quisquam.
+
+
+
+```js app.js
+function lorem(ipsum, dolor = 1) {
+ const sit = ipsum == null && 0
+ dolor = sit - amet(dolor)
+ return sit ? consectetur(ipsum) : []
+}
+```
+
+---
+
+Change focus
+
+```js app.js focus=2:4
+
+```
+
+---
+
+Or change the code
+
+```js app.js focus=6:10
+function lorem(ipsum, dolor = 1) {
+ const sit = ipsum == null && 0
+ dolor = sit - amet(dolor)
+ return sit ? consectetur(ipsum) : []
+}
+
+function adipiscing(...elit) {
+ console.log(elit)
+ return elit.map(ipsum => ipsum.sit)
+}
+```
+
+---
+
+Or change the file
+
+
+
+```js app.js focus=1:4
+function adipiscing(...elit) {
+ console.log(elit)
+ return elit.map(ipsum => ipsum.sit)
+}
+```
+
+---
+
+```css styles.css
+.lorem {
+ color: #fff;
+ padding: 10px;
+ background: #000;
+}
+```
+
+
+
+---
+
+### By the way
+
+- you can
+- put any
+- markdown
+- here
+
+👍
+
+```js app.js
+
+```
+
+
diff --git a/packages/mdx/dev/content/spotlight-preview.mdx b/packages/mdx/dev/content/spotlight-preview.mdx
new file mode 100644
index 00000000..593dd9c9
--- /dev/null
+++ b/packages/mdx/dev/content/spotlight-preview.mdx
@@ -0,0 +1,140 @@
+# Spotlight with preview
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
+
+
+
+```jsx src/App.js
+import { motion } from "framer-motion"
+
+const transition = { duration: 1 }
+
+export default function App() {
+ const bg = "hsl(20, 100%, 50%)"
+ return (
+
+
+
+ )
+}
+```
+
+---
+
+## Step 1
+
+Lorem ipsum dolor sit amet, consectetur adipiscing something about points, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+```jsx src/App.js
+import { motion } from "framer-motion"
+
+const transition = { duration: 1 }
+
+export default function App() {
+ const bg = "hsl(20, 100%, 50%)"
+ return (
+
+
+
+ )
+}
+```
+
+---
+
+## Step 2
+
+Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in.
+
+```jsx src/App.js focus=1,6,9:15
+import { motion } from "framer-motion"
+
+const transition = { duration: 1 }
+
+export default function App() {
+ const bg = "hsl(110, 100%, 50%)"
+ return (
+
+
+
+ )
+}
+```
+
+---
+
+## Step 3
+
+Id aliquet risus feugiat in ante metus dictum at tempor. Sed blandit libero volutpat sed cras. Sed odio morbi quis commodo odio aenean sed adipiscing. Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu.
+
+```jsx src/App.js focus=1,6,9:15
+import { motion } from "framer-motion"
+
+const transition = { duration: 1 }
+
+export default function App() {
+ const bg = "hsl(200, 100%, 50%)"
+ return (
+
+
+
+ )
+}
+```
+
+---
+
+## Step 4
+
+Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in. Venenatis cras sed felis eget velit. Consectetur libero id faucibus nisl tincidunt.
+
+```jsx src/App.js focus=1,6,9:15
+import { motion } from "framer-motion"
+
+const transition = { duration: 1 }
+
+export default function App() {
+ const bg = "hsl(290, 100%, 50%)"
+ return (
+
+
+
+ )
+}
+```
+
+
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
+
+Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
diff --git a/packages/mdx/dev/content/spotlight.mdx b/packages/mdx/dev/content/spotlight.mdx
new file mode 100644
index 00000000..86971277
--- /dev/null
+++ b/packages/mdx/dev/content/spotlight.mdx
@@ -0,0 +1,265 @@
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
+## Bigger steps than code
+
+
+
+# Foo
+
+bar
+
+```js foo.js
+function foo() {
+ return "bar"
+}
+```
+
+---
+
+```js foo.js focus=1
+
+```
+
+Line 1
+
+---
+
+```js foo.js focus=2
+
+```
+
+Line 2
+
+---
+
+```js foo.js focus=3
+
+```
+
+Line 3
+
+
+
+## Bigger code than steps
+
+
+
+> Variants
+
+## Design composable component APIs with variants
+
+Variants are a first-class citizen of Stitches. With multiple variants, compound variants, and default variants, you can design composable component APIs which are typed automatically.
+
+```js
+const Button = styled("button", {
+ // base styles
+
+ variants: {
+ color: {
+ gray: {
+ backgroundColor: "gainsboro",
+ },
+
+ blue: {
+ backgroundColor: "dodgerblue",
+ },
+ },
+
+ size: {
+ md: {
+ height: "25px",
+ },
+
+ lg: {
+ height: "35px",
+ },
+ },
+ },
+
+ compoundVariants: [
+ {
+ color: "blue",
+
+ size: "lg",
+
+ css: {
+ backgroundColor: "purple",
+ },
+ },
+ ],
+
+ defaultVariants: {
+ color: "gray",
+
+ size: "md",
+ },
+})
+```
+
+---
+
+### Variants
+
+Define multiple component variants.
+
+```js focus=4:24
+
+```
+
+---
+
+### Compound Variants
+
+Apply styles only when multiple variants match.
+
+```js focus=26:36
+
+```
+
+---
+
+### Default Variants
+
+Set a value as the default for each variant.
+
+```js focus=38:42
+
+```
+
+
+
+Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+
+
+## Design composable component APIs with variants
+
+Variants are a first-class citizen of Stitches. With multiple variants, compound variants, and default variants, you can design composable component APIs which are typed automatically.
+
+```js
+const Button = styled("button", {
+ // base styles
+
+ variants: {
+ color: {
+ gray: {
+ backgroundColor: "gainsboro",
+ },
+
+ blue: {
+ backgroundColor: "dodgerblue",
+ },
+ },
+
+ size: {
+ md: {
+ height: "25px",
+ },
+
+ lg: {
+ height: "35px",
+ },
+ },
+ },
+
+ compoundVariants: [
+ {
+ color: "blue",
+
+ size: "lg",
+
+ css: {
+ backgroundColor: "purple",
+ },
+ },
+ ],
+
+ defaultVariants: {
+ color: "gray",
+
+ size: "md",
+ },
+})
+```
+
+---
+
+```js focus=4:24
+
+```
+
+### Variants
+
+Define multiple component variants.
+
+---
+
+```js focus=26:36
+
+```
+
+### Compound Variants
+
+Apply styles only when multiple variants match.
+
+---
+
+```js focus=38:42
+
+```
+
+### Default Variants
+
+Set a value as the default for each variant.
+
+---
+
+```js focus=38:42
+
+```
+
+### Default Variants
+
+Set a value as the default for each variant.
+
+---
+
+```js focus=38:42
+
+```
+
+### Default Variants
+
+Set a value as the default for each variant.
+
+---
+
+```js focus=38:42
+
+```
+
+### Default Variants
+
+Set a value as the default for each variant.
+
+---
+
+```js focus=38:42
+
+```
+
+### Default Variants
+
+Set a value as the default for each variant.
+
+---
+
+```js focus=38:42
+
+```
+
+### Default Variants
+
+Set a value as the default for each variant.
+
+
diff --git a/packages/mdx/dev/content/test.mdx b/packages/mdx/dev/content/test.mdx
new file mode 100644
index 00000000..4602d195
--- /dev/null
+++ b/packages/mdx/dev/content/test.mdx
@@ -0,0 +1,15 @@
+Lorem ipsum dolor sit amet. _`console.log("foo bar")`_.
+
+Lorem ipsum dolor sit amet. `console.log("foo bar")`.
+
+_`console.log("foo bar")`_
+
+_`console.log("foo bar")`_
+
+X console.log("foo bar")
+
+Lorem ipsum `var x = 1`
+
+_Lorem ipsum `var x = 1`_
+
+**`console.log("foo bar")`**
diff --git a/packages/mdx/dev/files.ts b/packages/mdx/dev/files.ts
new file mode 100644
index 00000000..f7995043
--- /dev/null
+++ b/packages/mdx/dev/files.ts
@@ -0,0 +1,41 @@
+import fs from "fs"
+import { remarkCodeHike } from "../src/index"
+import { compile } from "@mdx-js/mdx"
+import theme from "shiki/themes/slack-dark.json"
+import { withDebugger } from "mdx-debugger"
+
+export async function getFiles() {
+ const files = await fs.promises.readdir("./dev/content")
+ return files
+ .filter(file => file.endsWith(".mdx"))
+ .map(filename => filename.slice(0, -4))
+}
+export async function getContent(filename: string) {
+ const file = await fs.promises.readFile(
+ `./dev/content/${filename}.mdx`,
+ "utf8"
+ )
+
+ return file
+}
+
+export async function getCode(file: string) {
+ let debugLink = ""
+
+ const debugCompile = withDebugger(compile, {
+ log: (path: string, url: string) => {
+ debugLink = url
+ },
+ })
+
+ const code = String(
+ await debugCompile(file, {
+ outputFormat: "function-body",
+ remarkPlugins: [
+ [remarkCodeHike, { autoImport: false, theme }],
+ ],
+ })
+ )
+
+ return { code, debugLink }
+}
diff --git a/packages/mdx/next.config.js b/packages/mdx/next.config.js
new file mode 100644
index 00000000..b2774a97
--- /dev/null
+++ b/packages/mdx/next.config.js
@@ -0,0 +1,11 @@
+module.exports = {
+ redirects() {
+ return [
+ {
+ source: "/",
+ destination: "/test",
+ permanent: false,
+ },
+ ]
+ },
+}
diff --git a/packages/mdx/package.json b/packages/mdx/package.json
index d078f8ca..a7a5432e 100644
--- a/packages/mdx/package.json
+++ b/packages/mdx/package.json
@@ -58,6 +58,7 @@
"cssnano": "^4.1.10",
"esbuild": "^0.13.2",
"mdx-bundler": "^8.0.1",
+ "mdx-debugger": "^0.2.0",
"next": "^12.1.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
diff --git a/packages/mdx/pages/[demo]/[theme].js b/packages/mdx/pages/[demo]/[theme].js
deleted file mode 100644
index e4dc0d3c..00000000
--- a/packages/mdx/pages/[demo]/[theme].js
+++ /dev/null
@@ -1,307 +0,0 @@
-import { getMDXComponent } from "mdx-bundler/client"
-import React from "react"
-import dynamic from "next/dynamic"
-import { useRouter } from "next/router"
-import Head from "next/head"
-import Link from "next/link"
-import { toProps } from "../../tests/page-data"
-import { CH } from "../../src/components"
-
-export async function getServerSideProps({ params }) {
- try {
- const { demo, theme } = params
- const props = await toProps({ theme, demo })
- return { props }
- } catch (e) {
- console.error(
- "getServerSideProps error",
- JSON.stringify(e, null, 2)
- )
- }
- return { props: { error: true } }
-}
-
-export default function Page({
- error,
- source,
- preCodeHike,
- postCodeHike,
- result,
- demos,
- themes,
- currentTheme,
- currentDemo,
-}) {
- if (error) {
- return