Выделение строк

MDX (Markdown for JSX) позволяет объединять возможности Markdown и React-компонентов, создавая интерактивный и динамический контент. Одной из частых задач является выделение строк кода или текста, чтобы улучшить читаемость и акцентировать внимание на важных частях документации или примеров.

Синтаксис для выделения текста

В MDX стандартные Markdown-конструкции работают без изменений. Для выделения текста применяются:

  • Жирный текст:
**важный текст**

Выводится как: важный текст

  • Курсив:
*курсивный текст*

Выводится как: курсивный текст

  • Моноширинный текст для кода или терминов:
`код или термин`

Выводится как: код или термин

Выделение строк кода

Для многострочного кода используют блоки с тройными обратными кавычками (```), при этом можно указать язык для подсветки синтаксиса:

```javascript
function greet(name) {
  return `Hello, ${name}!`;
}

MDX автоматически обрабатывает такие блоки, интегрируя их с React-компонентами, если используются плагины для подсветки синтаксиса, например `prism-react-renderer` или `rehype-prism`.

#### Использование компонента `<Highlight>`

MDX позволяет внедрять собственные React-компоненты прямо в Markdown. Для выделения строк часто применяют компонент `<Highlight>`:

```mdx
import Highlight from './Highlight';

<Highlight>
  const sum = (a, b) => a + b;
  console.log(sum(2, 3));
</Highlight>

Компонент может принимать пропсы для управления стилем:

<Highlight color="yellow" lineNumbers>
  const multiply = (x, y) => x * y;
</Highlight>
  • color — цвет фона для выделенной строки
  • lineNumbers — отображение номеров строк

Подсветка определённых строк

Иногда необходимо выделить не весь блок кода, а только отдельные строки. В этом случае удобно использовать маски или массив индексов:

<Highlight highlightLines={[1,3]}>
  function example() {
    console.log('Строка 1');
    console.log('Строка 2');
    console.log('Строка 3');
  }
</Highlight>

Здесь будут выделены первая и третья строки блока. Поддержка таких функций зависит от используемой библиотеки для подсветки кода.

Встроенные HTML-теги для кастомного выделения

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

<p style={{ backgroundColor: '#ffeb3b', padding: '4px' }}>
  Важная строка текста
</p>

Этот подход эффективен для выделения отдельных абзацев или строк без создания дополнительных компонентов.

Стилизация через CSS-модули и styled-components

Для тонкой настройки внешнего вида выделенных строк рекомендуется использовать CSS-модули или styled-components:

import styled from 'styled-components';

const HighlightedLine = styled.div`
  background-color: #ffeaa7;
  padding: 0.25em 0.5em;
  border-radius: 4px;
`;

<HighlightedLine>Ключевая строка</HighlightedLine>

Такой подход позволяет централизованно управлять стилями и использовать их повторно по всему проекту.

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

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

import { useState } from 'react';

function ClickHighlight({ text }) {
  const [active, setActive] = useState(false);
  return (
    <span
      onCl ick={() => setActive(!active)}
      style={{ backgroundColor: active ? 'yellow' : 'transparent', cursor: 'pointer' }}
    >
      {text}
    </span>
  );
}

<ClickHighlight text="Нажми для выделения" />

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

Практические рекомендации

  • Использовать компоненты для повторного применения — это уменьшает дублирование и повышает консистентность стиля.
  • При работе с кодом всегда указывать язык для блоков кода — это позволяет активировать подсветку синтаксиса.
  • Для сложного выделения строк сочетать CSS и пропсы компонентов, чтобы отделять визуальный стиль от логики приложения.

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

Оглавление