Рендеринг горизонтальных линий

В библиотеке Marked горизонтальные линии создаются с помощью Markdown-синтаксиса. Стандартный синтаксис для горизонтальной линии включает три или более дефиса (---), подчеркивания (___) или звездочки (***) на отдельной строке. Эти символы должны быть отделены от текста пустой строкой и не могут содержать других символов на той же строке.

Пример корректного синтаксиса:

---

***

___

Результатом преобразования через Marked будет HTML-элемент <hr>, представляющий горизонтальную линию:

<hr>

Настройка поведения через параметры

Marked предоставляет возможность изменять поведение рендеринга через объект options. Для горизонтальных линий ключевое значение имеет renderer — кастомный объект, в котором можно переопределить метод hr().

Пример создания кастомного рендерера:

const marked = require('marked');

const renderer = new marked.Renderer();

renderer.hr = function() {
    return '<hr style="border: 2px solid red;">\n';
};

const markdown = '---';
const html = marked(markdown, { renderer });

console.log(html);

В результате сгенерированный HTML будет содержать стилизованную красную линию.

Взаимодействие с другими элементами Markdown

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

  • Линия должна отделяться пустой строкой от предыдущего и следующего блока текста.
  • Если перед или после линии нет пустой строки, Marked может интерпретировать символы как обычный текст, а не как <hr>.

Пример некорректного использования:

Текст перед---
Текст после

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

Расширенные возможности кастомизации

  1. Добавление классов и идентификаторов Можно добавить CSS-классы к линии через кастомный рендерер:
renderer.hr = function() {
    return '<hr class="divider" id="section-break">';
};
  1. Интерактивные линии Возможность вставки JavaScript-атрибутов, например:
renderer.hr = function() {
    return '<hr oncl ick="alert(\'Разделение выполнено\')">';
};
  1. Использование SVG вместо стандартного <hr> Иногда требуется более сложная графика:
renderer.hr = function() {
    return `
        <svg height="2" width="100%">
            <line x1="0" y1="1" x2="100%" y2="1" style="stroke:rgb(0,0,0);stroke-width:2" />
        </svg>
    `;
};

Влияние опций Marked на рендеринг

Некоторые глобальные опции Marked, которые могут косвенно влиять на отображение линий:

  • gfm (по умолчанию true) — включает поддержку GitHub Flavored Markdown, без этого горизонтальные линии с дефисами и звездочками могут не распознаваться.
  • breaks — включает автоматические переносы строк. Это не изменяет работу <hr>, но влияет на визуальное оформление вокруг линии.
  • smartLists и smartypants — не влияют напрямую, но полезны при комплексных документах, где линии чередуются с списками и кавычками.

Практические советы по рендерингу

  • Всегда использовать минимум три символа (---, ***, ___) для надежного распознавания линии.
  • Для стилизованных линий рекомендуется кастомный рендерер вместо постобработки HTML, чтобы избежать конфликтов с безопасностью и XSS.
  • Горизонтальные линии лучше отделять пустыми строками, особенно при генерации из динамического контента, чтобы Marked корректно определял границы блока.

Примеры интеграции с другими элементами

С заголовками и списками:

# Заголовок

---

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

Рендеринг через Marked даст:

<h1>Заголовок</h1>
<hr>
<ul>
<li>Пункт 1</li>
<li>Пункт 2</li>
</ul>

С текстовыми блоками и цитатами:

> Цитата

***

Текст после линии

HTML-результат:

<blockquote>
<p>Цитата</p>
</blockquote>
<hr>
<p>Текст после линии</p>

Итоговые рекомендации

  • Для большинства случаев стандартного <hr> достаточно встроенного рендерера Marked.
  • Кастомизация рендерера открывает возможности для стилизации и интерактивности.
  • Контроль пустых строк и символов вокруг линии гарантирует корректное преобразование Markdown в HTML.

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

Оглавление