Рендеринг цитат

Основы синтаксиса цитат

В библиотеке Marked для JavaScript цитаты обрабатываются по стандарту Markdown. Цитата обозначается символом > в начале строки. Все строки, начинающиеся с этого символа, интерпретируются как часть блока цитаты.

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

> Это пример простой цитаты.
> Она может занимать несколько строк.

При обработке с помощью Marked этот Markdown преобразуется в HTML:

<blockquote>
  <p>Это пример простой цитаты.
  Она может занимать несколько строк.</p>
</blockquote>

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

  • Любой текст после > считается частью цитаты.
  • Несколько > создают вложенные цитаты.
  • Цитата может включать заголовки, списки, код и другие элементы Markdown.

Вложенные цитаты

Для создания вложенных цитат используется несколько символов >:

> Внешняя цитата
> > Вложенная цитата

Marked рендерит это в соответствующие вложенные HTML-блоки:

<blockquote>
  <p>Внешняя цитата</p>
  <blockquote>
    <p>Вложенная цитата</p>
  </blockquote>
</blockquote>

Особенности:

  • Вложенные цитаты визуально отделяются от родительских блоков.
  • Возможна комбинация с другими элементами Markdown внутри любого уровня вложенности.

Настройка рендеринга цитат

Marked позволяет кастомизировать процесс рендеринга через объект Renderer. Для цитат используется метод blockquote:

import { marked } from 'marked';

const renderer = new marked.Renderer();

renderer.blockquote = (quote) => {
  return `<blockquote class="custom-quote">${quote}</blockquote>`;
};

const markdown = `> Цитата с кастомным оформлением`;
const html = marked(markdown, { renderer });

console.log(html);

В результате получится:

<blockquote class="custom-quote">
  <p>Цитата с кастомным оформлением</p>
</blockquote>

Особенности кастомизации:

  • Можно добавлять CSS-классы, атрибуты, или оборачивать цитату в дополнительные контейнеры.
  • Метод получает уже обработанный HTML текста цитаты, что позволяет свободно изменять структуру.

Работа с многострочными цитатами

Marked корректно обрабатывает многострочные цитаты. Любая последовательность строк, начинающихся с >, объединяется в один блок <blockquote>:

> Первая строка цитаты.
> Вторая строка цитаты.
> Третья строка цитаты.

Сгенерированный HTML:

<blockquote>
  <p>Первая строка цитаты.
  Вторая строка цитаты.
  Третья строка цитаты.</p>
</blockquote>

Чтобы разделить абзацы внутри цитаты, нужно вставить пустую строку между строками с >:

> Первый абзац цитаты.
>
> Второй абзац цитаты.

Результат:

<blockquote>
  <p>Первый абзац цитаты.</p>
  <p>Второй абзац цитаты.</p>
</blockquote>

Цитаты с другими элементами Markdown

Цитаты в Marked могут содержать заголовки, списки и кодовые блоки:

> ## Заголовок внутри цитаты
> - Пункт списка
> - Еще один пункт
>
> ```javascript
> console.log('Код внутри цитаты');
> ```

HTML, полученный через Marked:

<blockquote>
  <h2>Заголовок внутри цитаты</h2>
  <ul>
    <li>Пункт списка</li>
    <li>Еще один пункт</li>
  </ul>
  <pre><code class="language-javascript">console.log('Код внутри цитаты');
  </code></pre>
</blockquote>

Особенности:

  • Marked сохраняет всю семантику Markdown внутри цитаты.
  • Можно комбинировать текст, списки, изображения и кодовые блоки.

Использование опций Marked для цитат

Marked предоставляет глобальные опции, которые влияют на рендеринг блоков цитат:

  • gfm: true — включает расширенный синтаксис GitHub Flavored Markdown, включая поддержку вложенных цитат.
  • breaks: true — сохраняет разрывы строк внутри цитат.
  • sanitize: false — позволяет использовать HTML внутри цитат.

Пример с опциями:

const markdown = `> Цитата с разрывами
> и переносами строк`;

const html = marked(markdown, { gfm: true, breaks: true });

Сгенерированный HTML будет учитывать переносы строк внутри <blockquote>.

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

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

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

Оглавление