Подсветка синтаксиса

MDX позволяет объединять Markdown и JSX в одном документе, что открывает возможности для динамического рендеринга компонентов внутри текстового контента. Одним из ключевых аспектов презентации кода в MDX является подсветка синтаксиса, которая делает код более читаемым и удобным для восприятия.

Использование кода в MDX

В MDX можно использовать стандартные блоки кода Markdown с тройными обратными кавычками:

```javascript
function sum(a, b) {
  return a + b;
}

Для рендеринга таких блоков MDX поддерживает компонент `pre` и `code`. Стандартный подход — использование **компонентов для подсветки**, например, `react-syntax-highlighter` или `prism-react-renderer`.

#### Интеграция с `react-syntax-highlighter`

1. Установка зависимости:

```bash
npm install react-syntax-highlighter
  1. Импорт компонента и нужной темы подсветки:
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { okaidia } from 'react-syntax-highlighter/dist/esm/styles/prism';
  1. Использование внутри MDX:
<SyntaxHighlighter language="javascript" style={okaidia}>
{`function greet(name) {
  return 'Hello, ' + name;
}`}
</SyntaxHighlighter>

Особенности:

  • Атрибут language указывает язык программирования для правильной подсветки.
  • Атрибут style определяет визуальную тему (цветовую схему).
  • Содержимое компонента передаётся как текст в фигурных скобках.

Интеграция с prism-react-renderer

prism-react-renderer предоставляет более гибкий способ кастомизации рендеринга:

  1. Установка:
npm install prism-react-renderer
  1. Импорт и использование:
import Highlight, { defaultProps } from 'prism-react-renderer';
import theme from 'prism-react-renderer/themes/dracula';

<Highlight {...defaultProps} code={`const sum = (a, b) => a + b;`} language="javascript" theme={theme}>
  {({ className, style, tokens, getLineProps, getTokenProps }) => (
    <pre className={className} style={style}>
      {tokens.map((line, i) => (
        <div {...getLineProps({ line, key: i })}>
          {line.map((token, key) => (
            <span {...getTokenProps({ token, key })} />
          ))}
        </div>
      ))}
    </pre>
  )}
</Highlight>

Особенности:

  • tokens — массив строк, каждая строка разбивается на токены.
  • getLineProps и getTokenProps создают корректные атрибуты для HTML-элементов.
  • Полная кастомизация стилей и тем позволяет адаптировать внешний вид под дизайн проекта.

Автоматическая подсветка в MDX

В проектах с использованием Next.js и MDX можно настроить автоматическую подсветку без обёрток для каждого блока кода, используя rehype-prism-plus:

  1. Установка:
npm install rehype-prism-plus
  1. Настройка в MDX-парсере:
import { MDXRemote } from 'next-mdx-remote';
import rehypePrism from 'rehype-prism-plus';

<MDXRemote {...source} components={components} options={{ rehypePlugins: [rehypePrism] }} />

Особенности:

  • Все блоки кода автоматически получают подсветку.
  • Поддерживаются темы Prism, возможность подключения своих CSS-стилей.
  • Можно настроить поддержку подсветки для множества языков через loadLanguages.

Настройка тем и стилей

Для кастомизации внешнего вида подсветки синтаксиса важно учитывать:

  • Цвета текста и фона.
  • Стиль токенов (ключевые слова, комментарии, строки).
  • Отступы и переносы строк.
  • Возможность адаптации под светлую и тёмную тему сайта.

Примеры тем включают: dracula, okaidia, tomorrow, night-owl.

Советы по удобству чтения

  • Использовать одинаковую тему подсветки для всего проекта.
  • Поддерживать контрастный фон для улучшения читаемости.
  • Ограничивать длину строки кода, чтобы избежать горизонтального скролла.
  • Использовать нумерацию строк, если необходимо ссылаться на конкретные участки кода.

Интерактивные блоки кода

MDX позволяет не только подсвечивать код, но и делать его интерактивным, используя компоненты-обёртки:

<LiveCode code={`function add(a, b) { return a + b; }`} />

Интерактивные блоки:

  • Позволяют редактировать код прямо в статье.
  • Поддерживают live-просмотр результата выполнения.
  • Улучшают вовлечённость и практическое понимание материала.

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

Оглавление