Что такое MDX?

MDX — это формат, позволяющий писать JSX непосредственно внутри Markdown-документов. Он сочетает простоту Markdown для создания контента с возможностями React-компонентов, что делает его популярным для сайтов документации, блогов и контентных приложений, построенных на таких фреймворках, как Next.js, Gatsby и Docusaurus. MDX-файл может содержать стандартный синтаксис Markdown вместе с операторами импорта, экспортируемыми переменными и встроенными JSX-компонентами — всё в одном файле.

В отличие от обычного Markdown, MDX компилируется в JavaScript, а значит синтаксические ошибки в JSX или операторах импорта могут сломать весь документ. Это делает валидацию и правильное форматирование особенно важными при работе с MDX-контентом.

Описание инструмента

MDX Редактор предоставляет браузерную среду для написания, валидации и форматирования MDX-контента. Он включает подсветку синтаксиса как для Markdown, так и для JSX, встроенный валидатор, проверяющий MDX на наличие ошибок компиляции, а также форматтер, который приводит в порядок отступы и структуру для создания единообразных и читаемых документов.

Примеры

До форматирования:

import {Chart} from './components'
# Dashboard
Some intro text.


Extra blank lines here.
## Section
<Chart data={stats} />

После форматирования:

import {Chart} from './components'

# Dashboard

Some intro text.

Extra blank lines here.

## Section

<Chart data={stats} />

Возможности

  • Подсветка синтаксиса Markdown и JSX в едином редакторе
  • Валидация MDX с проверкой ошибок компиляции в режиме реального времени
  • Автоматическое форматирование, нормализующее пустые строки и отступы
  • Кнопка очистки для быстрого сброса содержимого редактора
  • Поддержка копирования для удобного экспорта отформатированного контента

Принцип работы

  • Валидация: компилирует MDX-контент с помощью компилятора @mdx-js/mdx. Если документ содержит синтаксические ошибки — например, некорректный JSX, незакрытые теги или недопустимые импорты — валидатор отображает сообщение об ошибке, чтобы вы могли её исправить.
  • Форматирование: нормализует пробельные символы, сворачивая несколько последовательных пустых строк в одну, обеспечивая наличие пустых строк перед заголовками и вокруг блоков import/export, а также удаляя завершающие пробелы. Результатом является чистый, последовательно структурированный документ.

Сценарии использования

  • Написание документации для проектов на основе React, использующих MDX для страниц с контентом
  • Отладка ошибок компиляции MDX перед развёртыванием статического сайта
  • Приведение в порядок MDX-файлов с непоследовательными отступами, внесёнными несколькими авторами