Authoring

In your MDX folder, create any path/to/my-document.mdx:

---
title: My Document
description: Lorem ipsum...
nav: 0
image: dog.png
---

MARKDOWN

Any key is optional.

• title: if not provided, last part of the path is used: my document
• image:
  • relative (to the md file) or absolute path, eg: dog.png, ./dog.png, ../../dog.png, /dog.png or https://animals.com/dog.png
  • will be used as metadata image if provided
• nav: order in the navigation (on the same level)

All exported components/mdx/index.tsx React components will have MDX treatment.

Relative images are supported. Eg, inside your MDX folder:

|-- getting-started
|   |-- authoring.mdx  <= relative to this article
|   `-- gutenberg.jpg

---
title: Authoring
---

<img src='gutenberg.jpg' />

Result

<img src='gutenberg.jpg' width="1100" height="685" />

Some hidden features:

It is possible to display lines of code: use the `showLineNumbers`

You can also highlight some lines:
here {1,3-4}

You can start at `showLineNumbers=150`

still highlighting lines
here {3}

ins/del diff supported too:

diff --git a/example.txt b/example.txt
index 8c3317a..47ea956 100644
--- a/example.txt
+++ b/example.txt
@@ -1,4 +1,4 @@
-Hello, World!
+Hello, GitHub World!
 Here are some changes:
-This line will be modified.
+This line has been modified.
 This line will stay the same.

Responsive grid.

<Grid cols={2}>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  ...
</Grid>

Inline sandboxes.

<Sandpack
  template="react-ts"
  customSetup={{
    dependencies: {
      'three': 'latest',
      '@react-three/fiber': 'latest',
      '@react-three/drei': 'latest'
    },
  }}
  files={{
    '/styles.css': `html,body,#root {height:100%;margin:unset;}`,
    '/App.tsx': `import { Canvas } from '@react-three/fiber'
import { Cloud, CameraControls } from '@react-three/drei'

export default function App() {
  return (
    <Canvas camera={{position: [0,-13,0]}}>
      <Cloud speed={.4} growth={6} />
      <ambientLight intensity={Math.PI} />
      <CameraControls />
    </Canvas>
  )
}`,
  }}
/>

import { Canvas } from '@react-three/fiber'
import { Cloud, CameraControls } from '@react-three/drei'

export default function App() {
  return (
    <Canvas camera={{position: [0,-13,0]}}>
      <Cloud speed={.4} growth={6} />
      <ambientLight intensity={Math.PI} />
      <CameraControls />
    </Canvas>
  )
}

<Codesandbox id="3rjsl" />

Result

Cell fracture

Aka. "GitHub alerts"

<Gha keyword="NOTE">Highlights information that users should take into account, even when skimming.</Gha>

or better:

> [!NOTE]
> Highlights information that users should take into account, even when skimming.

<Hint>
  I'm a deprecated hint. Use `Gha` instead.
</Hint>