Рендеринг ссылок

Библиотека Marked предназначена для преобразования текста в формате Markdown в HTML. Одной из ключевых задач является корректная обработка ссылок, как внутренних, так и внешних. Marked предоставляет гибкие возможности для настройки рендеринга ссылок через объект Renderer и функции обратного вызова.

Основные типы ссылок

Markdown поддерживает несколько форматов ссылок:

  1. Инлайн-ссылки Синтаксис:

    [текст ссылки](URL "опциональный заголовок")

    Пример:

    [Google](https://www.google.com "Поиск")

  2. Ссылки с определением Синтаксис:

    [текст ссылки][идентификатор]

[идентификатор]: URL "опциональный заголовок"

    Пример:

    [Google][1]

[1]: https://www.google.com "Поиск"

  3. Автоматические ссылки Синтаксис:

    <https://www.google.com>

Marked корректно обрабатывает все три типа ссылок, преобразуя их в HTML-теги <a>.

Настройка рендеринга через Renderer

Объект Renderer позволяет переопределить поведение рендеринга ссылок. В частности, можно задать собственные атрибуты для всех ссылок или изменить структуру HTML.

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

import { marked } from 'marked';

const renderer = new marked.Renderer();

renderer.link = (href, title, text) => {
  const titleAttr = title ? ` title="${title}"` : '';
  return `<a href="${href}" target="_blank" rel="noopener noreferrer"${titleAttr}>${text}</a>`;
};

marked.setOptions({ renderer });

const markdown = '[Google](https://www.google.com "Поиск")';
const html = marked(markdown);
console.log(html);

В этом примере:

  • Все ссылки открываются в новом окне (target="_blank").
  • Добавлен атрибут безопасности rel="noopener noreferrer".
  • Сохраняются заголовки (title) и текст ссылки.

Обработка ссылок с безопасностью

При рендеринге внешних ссылок важно учитывать XSS-уязвимости. Marked предоставляет опцию sanitize, но начиная с версии 1.x рекомендуется использовать внешние библиотеки для безопасного экранирования, такие как DOMPurify.

Пример безопасного рендеринга:

import DOMPurify from 'dompurify';

const unsafeHtml = marked('[Click me](jav * ascript:alert("XSS"))');
const safeHtml = DOMPurify.sanitize(unsafeHtml);

Это предотвращает выполнение вредоносного JavaScript кода через ссылки.

Пользовательские атрибуты ссылок

Через рендерер можно добавлять любые атрибуты к ссылкам. Например, можно автоматически добавлять data-* атрибуты для аналитики:

renderer.link = (href, title, text) => {
  return `<a href="${href}" data-tracked="true"${title ? ` title="${title}"` : ''}>${text}</a>`;
};

Это удобно для интеграции Markdown-контента с системами аналитики и отслеживания кликов.

Обработка ссылок внутри других элементов

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

1. Список с ссылкой: [Example](https://example.com)
2. Еще один пункт

Рендерер ссылок вызывается для каждого <a> внутри элементов списка без дополнительной настройки.

Поддержка ссылок с изображениями

Markdown позволяет вставлять изображения в виде ссылок:

[![Alt текст](image.png)](https://example.com)

В этом случае рендерер ссылок вызывается для внешнего <a>, а рендерер изображений (renderer.image) — для <img>. Можно комбинировать кастомный рендеринг для обеих сущностей:

renderer.image = (href, title, text) => {
  return `<img src="${href}" alt="${text}"${title ? ` title="${title}"` : ''} class="markdown-image"/>`;
};

Примеры сложного рендеринга

  1. Автоматическое добавление иконки внешнего сайта:
renderer.link = (href, title, text) => {
  const isExternal = /^https?:\/\//.test(href);
  const icon = isExternal ? ' ?' : '';
  return `<a href="${href}"${title ? ` title="${title}"` : ''}>${text}${icon}</a>`;
};
  1. Подсветка активных ссылок на сайте:
const currentUrl = '/about';
renderer.link = (href, title, text) => {
  const activeClass = href === currentUrl ? ' class="active"' : '';
  return `<a href="${href}"${activeClass}${title ? ` title="${title}"` : ''}>${text}</a>`;
};

Выводы по использованию

  • Marked обеспечивает гибкий и безопасный рендеринг ссылок, поддерживая все виды Markdown-ссылок.
  • Использование кастомного Renderer позволяет добавлять атрибуты, управлять безопасностью и визуальной презентацией ссылок.
  • Для защиты от XSS рекомендуется комбинировать Marked с библиотеками вроде DOMPurify.
  • Возможности рендерера позволяют интегрировать Markdown-контент с веб-приложениями, аналитикой и стилями.

Хотите, я могу подготовить отдельный раздел “Расширенные возможности рендеринга ссылок с динамическими данными и шаблонами”, который охватывает использование Marked для CMS и веб-приложений?

Оглавление