Горизонтальные линии

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

Синтаксис

В MDX горизонтальная линия создаётся так же, как в Markdown, с использованием трёх или более дефисов (-), звёздочек (*) или подчёркиваний (_), расположенных на отдельной строке:

---

или

***

или

___

Важно: строка должна состоять исключительно из выбранного символа и может содержать пробелы между ними, но не должна включать другие символы. Любые символы в строке помимо дефисов, звёздочек или подчёркиваний приведут к тому, что разделитель не будет отрисован.

Применение в компонентах MDX

MDX позволяет использовать React-компоненты вместе с Markdown-разметкой. Горизонтальные линии можно комбинировать с JSX:

import { Note } from './components/Note'

# Раздел 1

Текст до линии.

---

<Note>
  Важное примечание после горизонтальной линии.
</Note>

# Раздел 2

В этом примере --- создаёт визуальный разрыв между двумя секциями документа, при этом остаётся возможность вставки компонентов после линии. Это позволяет создавать чётко структурированные и интерактивные учебные материалы.

Настройка стилей горизонтальной линии

По умолчанию горизонтальная линия отображается в виде тонкой серой линии, но её стиль можно изменить через CSS или стили компонентов в MDX. Например, с помощью глобальных стилей:

hr {
  border: none;
  height: 2px;
  background-color: #333;
  margin: 24px 0;
}

Или через стилизованный компонент в MDX:

import { styled } from '@stitches/react'

const Divider = styled('hr', {
  border: 'none',
  height: '3px',
  background: 'linear-gradient(to right, #ff7e5f, #feb47b)',
  margin: '32px 0',
})

---

<Divider />

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

Комбинирование с заголовками и блоками

Горизонтальные линии часто применяются перед или после заголовков, чтобы визуально отделять разделы. Например:

## Пример секции

Текст раздела.

---

### Подраздел

Дополнительный контент.

Также можно использовать линии внутри списков или перед компонентами:

- Пункт 1
- Пункт 2

---

<Note>Это разделитель перед компонентом Note</Note>

Это позволяет чётко структурировать материал даже при сложной вложенности компонентов и списков.

Важные моменты при использовании

  1. Количество символов — для корректного отображения линии требуется не менее трёх символов (---, ***, ___). Две или меньше не создадут разделитель.
  2. Пробелы допускаются, но любые другие символы на строке разрушают синтаксис.
  3. Сочетание с компонентами — горизонтальные линии можно использовать совместно с JSX-компонентами, не нарушая структуру документа.
  4. Стилизация через CSS или стилизованные компоненты — позволяет создавать визуально уникальные разделители, выходящие за рамки стандартного серого <hr>.

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

Оглавление