Комбинирование рендереров

В библиотеке Marked для JavaScript каждый элемент Markdown можно преобразовывать в HTML с использованием рендерера. Рендерер представляет собой объект с набором методов, отвечающих за генерацию HTML для различных типов блоков и inline-элементов: заголовков, параграфов, ссылок, списков, изображений, кода и других.

Создание собственного рендерера

Для начала создается экземпляр класса Renderer:

const { marked } = require('marked');

const customRenderer = new marked.Renderer();

Каждый метод рендерера можно переопределить. Например, чтобы изменить вывод заголовков:

customRenderer.heading = function(text, level) {
  return `<h${level} class="custom-heading">${text}</h${level}>`;
};

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

Комбинирование стандартного и кастомного рендерера

В Marked можно комбинировать поведение нескольких рендереров, создавая гибридный рендерер, который использует стандартное поведение для части элементов и кастомное для другой. Стандартный рендерер доступен через new marked.Renderer() без изменений.

Пример комбинирования:

const defaultRenderer = new marked.Renderer();

const hybridRenderer = new marked.Renderer();

// Кастомный рендеринг для ссылок
hybridRenderer.link = function(href, title, text) {
  return `<a href="${href}" target="_blank" class="external-link">${text}</a>`;
};

// Использование стандартного рендерера для всего остального
Object.keys(defaultRenderer).forEach(key => {
  if (!hybridRenderer[key]) {
    hybridRenderer[key] = defaultRenderer[key];
  }
});

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

Пошаговая стратегия комбинирования

  1. Выделение элементов для кастомизации Определяется, какие элементы Markdown требуют индивидуального форматирования: заголовки, ссылки, списки, блоки кода, изображения и т.д.

  2. Создание кастомного рендерера Для каждого выбранного элемента создается метод с необходимой логикой HTML.

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

  4. Проверка и тестирование Генерируем HTML из Markdown и проверяем, что комбинированный рендеринг работает корректно для всех типов элементов.

Пример комплексного комбинированного рендерера

const defaultRenderer = new marked.Renderer();

const advancedRenderer = new marked.Renderer();

// Кастомные заголовки
advancedRenderer.heading = (text, level) => {
  return `<h${level} class="title-level-${level}">${text}</h${level}>`;
};

// Кастомные ссылки
advancedRenderer.link = (href, title, text) => {
  return `<a href="${href}" target="_blank" rel="noopener noreferrer">${text}</a>`;
};

// Кастомные блоки кода с подсветкой
advancedRenderer.code = (code, language) => {
  return `<pre class="code-block language-${language}"><code>${code}</code></pre>`;
};

// Остальные методы наследуются из стандартного рендерера
Object.keys(defaultRenderer).forEach(key => {
  if (!advancedRenderer[key]) {
    advancedRenderer[key] = defaultRenderer[key];
  }
});

// Использование
const markdown = `
# Заголовок
Ссылка на [Google](https://google.com)
\`\`\`javascript
console.log("Hello Marked");
\`\`\`
`;

const html = marked(markdown, { renderer: advancedRenderer });
console.log(html);

Особенности работы с комбинированными рендерерами

  • Методы рендерера вызываются последовательно для каждого блока Markdown, поэтому порядок определения кастомных методов имеет значение.
  • При переопределении методов важно возвращать корректный HTML, иначе Marked не сможет корректно объединить блоки.
  • Комбинированные рендереры позволяют частично внедрять кастомизацию, не переписывая полностью весь рендеринг.

Полезные приёмы

  • Делегирование к стандартному рендереру Даже для кастомного метода можно вызывать стандартный рендерер внутри, чтобы модифицировать результат:
advancedRenderer.paragraph = function(text) {
  const original = defaultRenderer.paragraph(text);
  return `<div class="custom-paragraph">${original}</div>`;
};
  • Создание цепочек рендереров Можно создавать несколько небольших рендереров и объединять их, используя функцию копирования методов:
function mergeRenderers(base, overrides) {
  Object.keys(overrides).forEach(key => {
    base[key] = overrides[key];
  });
  return base;
}
  • Сохранение совместимости с будущими версиями Marked Использование стандартного рендерера для необработанных методов позволяет автоматически поддерживать новые типы блоков, добавленные в библиотеку.

Комбинирование рендереров в Marked открывает возможности для тонкой кастомизации Markdown-рендеринга без полной переписи библиотеки. Такой подход облегчает поддержку кода и позволяет создавать богатый HTML с минимальными усилиями.

Оглавление