HTML в MDX

MDX (Markdown + JSX) позволяет использовать стандартный Markdown синтаксис вместе с компонентами React, а также поддерживает встроенный HTML. Встраивание HTML в MDX открывает дополнительные возможности для форматирования и интерактивности контента.

Встраивание HTML

Любой корректный HTML-код можно вставлять прямо в MDX-документ. Например:

<div style={{ backgroundColor: 'lightgray', padding: '10px' }}>
  <h2>Пример заголовка в HTML</h2>
  <p>Этот параграф написан с использованием HTML-тегов внутри MDX.</p>
</div>

HTML-теги обрабатываются точно так же, как в обычном JSX. Можно использовать атрибуты, встроенные стили и классы. Для динамических стилей и классов применяется синтаксис JSX (style={{...}}, className="...").

Ограничения HTML в MDX

  • Некоторые теги не поддерживаются напрямую: MDX не поддерживает <script> и <style> в качестве прямого HTML-кода. Для добавления скриптов необходимо использовать компоненты React. Стили можно добавлять через style атрибут или CSS-модули.
  • Синтаксис JSX обязателен для атрибутов: Например, в обычном HTML пишут <div class="box">, а в MDX нужно использовать <div className="box">.

Работа с интерактивными элементами

HTML-формы и кнопки полностью работают в MDX. Можно комбинировать HTML с React-компонентами:

<form onSub mit={(e) => { e.preventDefault(); alert('Форма отправлена'); }}>
  <label htmlFor="name">Имя:</label>
  <input type="text" id="name" name="name" />
  <button type="submit">Отправить</button>
</form>

Здесь <form>, <input> и <button> — это стандартные HTML-элементы, но обработчики событий привязаны через JSX.

Встраивание мультимедиа

MDX позволяет использовать HTML-теги для изображений, видео и аудио. Примеры:

<img src="/images/example.png" alt="Пример изображения" width="400" />

<video controls>
  <source src="/videos/sample.mp4" type="video/mp4" />
  Ваш браузер не поддерживает видео.
</video>

<audio controls>
  <source src="/audio/sample.mp3" type="audio/mpeg" />
  Ваш браузер не поддерживает аудио.
</audio>

Эти элементы работают без изменений, а атрибуты, такие как controls, autoplay и loop, можно использовать так же, как в стандартном HTML.

Вложенные HTML-элементы

В MDX можно создавать сложные структуры с вложенными HTML-элементами, что позволяет полностью контролировать разметку:

<section>
  <header>
    <h1>Заголовок секции</h1>
  </header>
  <article>
    <p>Параграф внутри статьи.</p>
    <ul>
      <li>Элемент списка 1</li>
      <li>Элемент списка 2</li>
    </ul>
  </article>
</section>

Важно помнить, что все HTML-элементы должны быть корректно закрыты, иначе парсер MDX может выдавать ошибки.

Интеграция с компонентами React

HTML в MDX можно комбинировать с React-компонентами, что позволяет использовать динамическое содержание вместе со статической разметкой:

<div className="container">
  <CustomButton label="Нажми меня" />
  <p>Статический параграф рядом с компонентом.</p>
</div>

Такой подход позволяет создавать гибкие страницы с минимальным использованием Markdown-синтаксиса, оставляя контроль над разметкой и стилями полностью разработчику.

Заключение по использованию HTML

Использование HTML в MDX расширяет возможности Markdown, обеспечивая полный контроль над структурой и стилем контента. Комбинируя HTML с React-компонентами, можно создавать интерактивные и динамические страницы с мощной типизацией и поддержкой современного JavaScript.

HTML-теги в MDX — это мост между простым Markdown и полноценной разработкой компонентов, который позволяет плавно переходить от статического контента к динамическому.

Оглавление