Блоки кода

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

Основы синтаксиса блоков кода

Блоки кода создаются с использованием тройных обратных кавычек:

```javascript
const sum = (a, b) => a + b;
console.log(sum(2, 3));

**Ключевые моменты:**

- Язык программирования указывается сразу после тройных обратных кавычек (`javascript`, `ts`, `python` и др.).
- Если язык не указан, блок кода будет отображен как обычный текст.
- MDX сохраняет стандартное поведение Markdown, но позволяет добавлять JSX внутри документа.

---

#### Встраивание компонентов React в блоки кода

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

```jsx

{`
function greet(name) {
  return \`Hello, \${name}!\`;
}
console.log(greet('MDX'));
`}

Особенности подхода:

  • Компонент CodeBlock может быть кастомным и включать подсветку синтаксиса.
  • Код передается как строка между фигурными скобками.
  • Возможна интеграция с библиотеками подсветки (Prism, Highlight.js).

Стилизация блоков кода

MDX позволяет полностью контролировать стили блоков кода с помощью CSS или styled-components:

  
    {`const multiply = (x, y) => x * y;`}

Важные моменты:

  • Элемент 
     отвечает за сохранение
форматирования кода.
  • Элемент содержит сам текст кода.
  • Любые CSS-свойства можно применять напрямую или через CSS-классы для глобальной стилизации.

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

Подсветка синтаксиса в MDX чаще всего реализуется через внешние библиотеки. Например, Prism.js:

import Prism from "prismjs";
import "prismjs/themes/prism-tomorrow.css";


  
    {`const divide = (a, b) => a / b;`}

Особенности использования:

  • Класс language-js определяет язык для подсветки.
  • Библиотека Prism автоматически применяет стили и цвета.
  • Можно использовать разные темы для светлой и тёмной темы.

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

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

import { LiveProvider, LiveEditor, LivePreview } from 'react-live';

 alert('Hello')}>Click me`}>

Ключевые преимущества:

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

Интеграция с внешними библиотеками кода

MDX позволяет легко подключать внешние компоненты и библиотеки для работы с кодом:

  • Highlight.js для подсветки с минимальной настройкой.
  • Prism-react-renderer для кастомной рендеринговой логики.
  • React-live для интерактивных примеров.

Пример интеграции с Prism-react-renderer:

import Highlight, { defaultProps } from "prism-react-renderer";


  {({ className, style, tokens, getLineProps, getTokenProps }) => (
    
      {tokens.map((line, i) => (
        

          {line.map((token, key) => (
            
          ))}
        

      ))}
    

  )}

Преимущества такого подхода:

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

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

MDX поддерживает как многострочные блоки, так и встроенные однострочные выражения:

  • Многострочные — создаются через тройные обратные кавычки.
  • Встроенные — через одинарные обратные кавычки, обычно для коротких фрагментов кода внутри текста.
`const version = "1.0.0";`

Поддержка TypeScript и других языков

MDX прекрасно работает с TypeScript, JSX и другими языками:

type User = {
  name: string;
  age: number;
};

const user: User = { name: "Alice", age: 30 };
console.log(user);
  • Использование языковых указаний улучшает подсветку и читаемость.
  • Можно комбинировать типы, интерфейсы и функции с интерактивными компонентами React.

Автоматическая нумерация и аннотации

Для учебников и документации удобно добавлять номера строк или аннотации к коду. С помощью кастомных компонентов можно реализовать:

const AnnotatedLine = ({ number, children }) => (
  

    {number}
    {children}
  

);


  const a = 5;
  const b = 10;
  console.log(a + b);
  • Позволяет визуально сопоставлять объяснения с конкретными строками кода.
  • Полезно для интерактивных учебных материалов.
Оглавление