Рендеринг параграфов

В библиотеке Marked каждый блок текста в Markdown, который отделён пустой строкой, по умолчанию преобразуется в HTML-параграф <p>. Рендеринг параграфов является базовой функциональностью, на которой строятся более сложные элементы разметки, такие как списки, цитаты и таблицы.

Создание параграфов

Простейший пример работы с параграфами выглядит следующим образом:

import { marked } from 'marked';

const markdownText = `
Это первый параграф.

Это второй параграф.
`;

const html = marked(markdownText);
console.log(html);

Вывод:

<p>Это первый параграф.</p>
<p>Это второй параграф.</p>

Параграф формируется при наличии пустой строки между блоками текста. Без пустой строки Marked объединит последовательные строки в один параграф.

Обработка переносов строк

По умолчанию одинарный перенос строки внутри параграфа не создаёт новую строку в HTML. Для добавления разрыва строки используется два пробела в конце строки:

const markdownText = `Первая строка с пробелами в конце  
Вторая строка в том же параграфе.`;

const html = marked(markdownText);
console.log(html);

Вывод:

<p>Первая строка с пробелами в конце<br>
Вторая строка в том же параграфе.</p>

Использование <br> происходит автоматически при соблюдении правила двух пробелов.

Кастомизация рендерера параграфов

Marked позволяет переопределять стандартное поведение через объект Renderer. Это полезно для добавления классов CSS, атрибутов или дополнительных обёрток вокруг параграфов:

import { marked } from 'marked';

const renderer = {
  paragraph(text) {
    return `<p class="custom-paragraph">${text}</p>\n`;
  }
};

const markdownText = `
Это параграф с кастомным рендерером.
`;

const html = marked(markdownText, { renderer });
console.log(html);

Вывод:

<p class="custom-paragraph">Это параграф с кастомным рендерером.</p>

Таким образом, можно гибко управлять HTML-выводом, не затрагивая базовый Markdown.

Интеграция с другими элементами

Параграфы могут содержать встроенные элементы Markdown, такие как жирный текст, курсив, ссылки, код и изображения. Marked корректно обрабатывает такие вложенные конструкции:

const markdownText = `
Это **жирный текст** и *курсив* в одном параграфе.
Ссылка: [Google](https://www.google.com)
Код: \`console.log('Hello');\`
`;

const html = marked(markdownText);
console.log(html);

Вывод:

<p>Это <strong>жирный текст</strong> и <em>курсив</em> в одном параграфе.
Ссылка: <a href="https://www.google.com">Google</a>
Код: <code>console.log('Hello');</code></p>

Все эти элементы остаются частью одного <p>, если между строками нет пустой строки.

Контроль пустых параграфов

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

const markdownText = `
Текст перед пустым параграфом.

&nbsp;

Текст после пустого параграфа.
`;

const html = marked(markdownText);
console.log(html);

Вывод:

<p>Текст перед пустым параграфом.</p>
<p>&nbsp;</p>
<p>Текст после пустого параграфа.</p>

Использование &nbsp; обеспечивает корректное отображение визуально пустого блока в HTML.

Параграфы и вложенные блоки

При рендеринге сложных структур, таких как цитаты или списки, Marked различает внутренние параграфы. Например:

const markdownText = `
> Это цитата.
>
> Содержит второй параграф внутри.
`;

const html = marked(markdownText);
console.log(html);

Вывод:

<blockquote>
<p>Это цитата.</p>
<p>Содержит второй параграф внутри.</p>
</blockquote>

Каждый параграф внутри цитаты оборачивается в <p> и сохраняет структуру вложенности.

Настройка через опции

Marked поддерживает глобальные опции для управления рендерингом, включая режимы gfm, breaks, smartLists. Например, для автоматического преобразования всех переносов строк в <br> используется опция breaks: true:

const html = marked("Строка 1\nСтрока 2", { breaks: true });
console.log(html);

Вывод:

<p>Строка 1<br>
Строка 2</p>

Эта настройка особенно полезна при отображении текстов с частыми переносами, таких как чаты или комментарии.

Рендеринг параграфов в Marked — фундаментальная возможность для построения HTML из Markdown. Тонкая настройка через Renderer и опции позволяет полностью контролировать внешний вид и структуру текста, включая вложенные элементы и переносы строк. Понимание работы с параграфами облегчает интеграцию Markdown в любые веб-приложения и расширяет возможности кастомизации.

Оглавление