Inline код

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

Синтаксис inline кода

Для создания inline кода используется одинарная обратная кавычка `. Пример базового синтаксиса:

Используем функцию `formatDate()` для форматирования даты.

В результате рендеринга этот фрагмент будет выделен как код внутри текста.

Поддержка JSX внутри inline кода

MDX позволяет использовать JSX-выражения вместе с inline кодом, однако необходимо различать строки кода и компоненты. Inline код ограничен текстовым контентом и не выполняет JSX напрямую. Для динамических вставок используется фигурная скобка {}:

Сегодня дата: `{new Date().toLocaleDateString()}`

Здесь фрагмент внутри {} вычисляется как JavaScript, а обратные кавычки остаются для визуального выделения кода.

Экранирование символов

Внутри inline кода можно использовать символы, которые в обычном Markdown требуют экранирования. Например, обратная кавычка внутри кода:

Используем шаблон: `` `Hello, ${name}!` ``

Обратите внимание на удвоение обратных кавычек: внешние используются для обрамления, а внутренние — остаются частью кода.

Inline код и стилизация

MDX наследует стили Markdown, поэтому inline код обычно отображается моноширинным шрифтом и с фоном. Дополнительно можно использовать CSS или стилизованные компоненты для изменения внешнего вида:

<span style={{ backgroundColor: '#f5f5f5', padding: '2px 4px', borderRadius: '4px' }}>
  `formatDate()`
</span>

Это позволяет создавать более выразительные визуальные выделения для небольших фрагментов кода, не прибегая к блокам <pre>.

Inline код внутри JSX-компонентов

MDX позволяет комбинировать текст и JSX, включая inline код внутри компонентов:

<Highlight>
  Используйте `map()` для обхода массивов.
</Highlight>

Компонент Highlight получает содержимое с inline кодом и может применять собственные стили или логику подсветки.

Особенности рендеринга

  • Inline код не создает блочного элемента; он остаётся внутри строки текста.
  • Стили по умолчанию зависят от CSS, подключённого в проекте (например, через @mdx-js/react или тему theme-ui).
  • Для совместимости с React-компонентами важно различать текстовый inline код и выражения {}.

Практические советы

  1. Для коротких функций и переменных используйте inline код вместо блочных блоков.
  2. Если внутри inline кода встречаются обратные кавычки, используйте двойное обрамление или экранирование.
  3. Для визуального выделения добавляйте кастомные стили через компоненты или инлайновые стили.
  4. Не пытайтесь выполнять JSX внутри обратных кавычек — это приведет к ошибкам компиляции.

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

Оглавление