Обычный Markdown поддерживает только базовое форматирование. MDX позволяет использовать React-компоненты прямо внутри статей — интерактивные табы, деревья файлов, блоки скачивания и многое другое.
Ниже — все доступные компоненты с живыми примерами.
Выделенные блоки для важной информации. Четыре типа:
Info — общая информация и подсказки для читателя.
Tip — полезный совет, который сэкономит время.
Warning — предупреждение о возможных проблемах.
Error — критичная ошибка или важное ограничение.
<Callout type="info">Текст подсказки</Callout>
<Callout type="tip">Полезный совет</Callout>
<Callout type="warning">Будьте осторожны</Callout>
<Callout type="error">Критичная ошибка</Callout>Пошаговые инструкции с нумерацией:
Установи зависимости через пакетный менеджер.
Создай конфигурационный файл в корне проекта.
Запусти dev-сервер и проверь результат.
<Steps>
### Установка
Описание шага
### Настройка
Описание шага
### Запуск
Описание шага
</Steps>Переключение между вариантами контента:
<Tabs storageKey="install-pm">
<Tab label="npm">npm install ...</Tab>
<Tab label="yarn">yarn add ...</Tab>
<Tab label="pnpm">pnpm add ...</Tab>
</Tabs>Добавь prop storageKey="my-key" чтобы выбор таба сохранялся в localStorage.
Таблицы можно делать двумя способами:
|) — быстро для простых случаев.<Table /> — когда нужен “наш” стиль, подпись, выравнивание, ширины колонок и React-контент внутри ячеек.В MDX надёжнее использовать синтаксис с вложенными компонентами (
<Table.Head />,<Table.Row />, …), а не массивы в пропсах.
| Компонент | Описание |
|---|---|
Callout | Выделенные блоки |
Tabs | Переключение между вариантами контента |
<Table caption="Компоненты (обычная)">
<Table.Head>
<Table.Row>
<Table.Th>Компонент</Table.Th>
<Table.Th width="65%">Описание</Table.Th>
</Table.Row>
</Table.Head>
<Table.Body>
<Table.Row>
<Table.Td><code>Callout</code></Table.Td>
<Table.Td>Выделенные блоки</Table.Td>
</Table.Row>
</Table.Body>
</Table>Сетка карточек для навигации или обзора:
Фреймворк для React с серверным рендерингом и статической генерацией.
Библиотека анимаций с spring-физикой и жестами.
<Cards cols={2}>
<Card title="Next.js" icon="▲">Описание</Card>
<Card title="Motion" icon="🎭">Описание</Card>
</Cards>Карточка с ссылкой:
<Card title="GitHub" icon="🔗" href="https://github.com">
Откроется в новой вкладке
</Card>Блоки кода с подсветкой синтаксиса и кнопкой копирования — создаются автоматически из markdown-разметки:
```js
const greeting = "Привет, мир!";
console.log(greeting);
```
Результат:
const greeting = "Привет, мир!";
console.log(greeting);Поддерживаются все популярные языки: js, jsx, ts, css, php, bash, json и другие.
Визуализация структуры файлов и папок:
<FileTree>
<Folder name="src" defaultOpen>
<Folder name="components" defaultOpen>
<File name="Header.jsx" />
</Folder>
<File name="globals.css" />
</Folder>
<File name="package.json" />
</FileTree>Папки кликабельны — можно раскрывать и сворачивать. Prop defaultOpen открывает папку по умолчанию.
Блок для скачивания файлов:
<Download
href="/files/example.zip"
title="Скачать пример проекта"
description="Описание файла"
size="24 KB"
/>Работает и с внешними ссылками — для них автоматически добавляется target="_blank":
<Download
href="https://github.com/user/repo/archive/main.zip"
title="Скачать с GitHub"
/>Контент на всю ширину экрана, выходящий за пределы контейнера статьи:
<Bleed>
<img src="/images/wide-screenshot.png" alt="Скриншот" />
</Bleed>Помимо компонентов, поддерживается весь стандартный Markdown:
Инлайн-код с подсветкойЦитата — выделяется бордером и фоном
| Компонент | Описание |
|---|---|
| Callout | Выделенные блоки |
| Tabs | Переключатели |
| FileTree | Дерево файлов |
| Download | Кнопка скачивания |