Какво е MDX?

MDX е формат, който ви позволява да пишете JSX директно в Markdown документи. Той съчетава простотата на Markdown за създаване на съдържание с мощта на React компонентите, което го прави популярен за сайтове с документация, блогове и приложения с богато съдържание, изградени с фреймуъркове като Next.js, Gatsby и Docusaurus. MDX файл може да съдържа стандартен Markdown синтаксис заедно с import декларации, експортирани променливи и вградени JSX компоненти — всичко в един файл.

За разлика от обикновения Markdown, MDX се компилира до JavaScript, което означава, че синтактичните грешки във вашия JSX или import декларации могат да счупят целия документ. Това прави валидирането и правилното форматиране особено важни при работа с 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, незатворени тагове или невалидни imports — валидаторът показва съобщението за грешка, за да можете да я отстраните.
  • Форматиране: Нормализира празното пространство, като свива множество последователни празни редове в един, осигурява празни редове преди заглавия и около import/export блокове, и премахва trailing whitespace. Резултатът е чист, последователно структуриран документ.

Случаи на употреба

  • Писане на документация за проекти, базирани на React, които използват MDX за страници със съдържание
  • Отстраняване на грешки при MDX компилация преди публикуване на статичен сайт
  • Почистване на MDX файлове с непоследователни разстояния, допринесени от множество автори