Автолинки URL и email

Remark и Rehype — это мощные инструменты для обработки Markdown и HTML в экосистеме JavaScript. Одной из часто используемых возможностей является автоматическое преобразование URL и email-адресов в кликабельные ссылки, что существенно упрощает работу с текстовым контентом.

Remark: подключение автолинков

Для Markdown-парсинга и автоматического создания ссылок используется плагин remark-autolink, который расширяет функциональность базового парсера.

Установка плагина:

npm install remark remark-autolink-headings remark-parse remark-stringify

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

const remark = require('remark');
const remarkParse = require('remark-parse');
const remarkStringify = require('remark-stringify');
const remarkAutolinkHeadings = require('remark-autolink-headings');

remark()
  .use(remarkParse)
  .use(remarkAutolinkHeadings, {beh * avior: 'wrap'})
  .use(remarkStringify)
  .process('# Пример заголовка', function(err, file) {
    if (err) throw err;
    console.log(String(file));
  });

Здесь ключевой момент — beh * avior: ‘wrap’, который позволяет обернуть заголовки в ссылки. Для автоматической обработки URL и email чаще используют плагин remark-autolink, встроенный в Markdown-парсер через расширение remark-inline-links или remark-gfm.

Автолинки URL

Автоматическая генерация ссылок из URL достигается при помощи поддержки GFM (GitHub Flavored Markdown) и плагинов, которые анализируют текст на наличие URL-адресов.

Пример конфигурации с remark-gfm:

const remark = require('remark');
const remarkParse = require('remark-parse');
const remarkStringify = require('remark-stringify');
const remarkGfm = require('remark-gfm');

const markdown = `
Это ссылка на сайт: https://example.com
`;

remark()
  .use(remarkParse)
  .use(remarkGfm)
  .use(remarkStringify)
  .process(markdown, function(err, file) {
    if (err) throw err;
    console.log(String(file));
  });

После обработки https://example.com автоматически станет кликабельной ссылкой при рендеринге HTML.

Автолинки email

Для email требуется отдельная обработка, чтобы текст вида user@example.com превращался в ссылку mailto:user@example.com. Плагин remark-autolink-email (или аналогичные пользовательские трансформации) позволяет реализовать эту функциональность.

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

const visit = require('unist-util-visit');

function remarkAutolinkEmail() {
  return (tree) => {
    visit(tree, 'text', (node, index, parent) => {
      const emailRegex = /\b[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}\b/i;
      if (emailRegex.test(node.value)) {
        const parts = node.value.split(emailRegex);
        const matches = node.value.match(emailRegex);
        const nodes = [];
        for (let i = 0; i < parts.length; i++) {
          if (parts[i]) nodes.push({type: 'text', value: parts[i]});
          if (matches && matches[i]) {
            nodes.push({
              type: 'link',
              url: `mailto:${matches[i]}`,
              children: [{type: 'text', value: matches[i]}]
            });
          }
        }
        parent.children.splice(index, 1, ...nodes);
      }
    });
  };
}

Rehype: трансформация Markdown в HTML с автолинками

Rehype работает на уровне HTML и отлично подходит для окончательного рендеринга Markdown в браузер или в серверный HTML. После парсинга Markdown через Remark, можно использовать rehype-autolink-headings и кастомные трансформеры для URL и email.

Пример интеграции с Remark и Rehype:

const remark = require('remark');
const remarkParse = require('remark-parse');
const remarkGfm = require('remark-gfm');
const remarkRehype = require('remark-rehype');
const rehypeStringify = require('rehype-stringify');
const rehypeAutolinkHeadings = require('rehype-autolink-headings');

remark()
  .use(remarkParse)
  .use(remarkGfm)
  .use(remarkRehype)
  .use(rehypeAutolinkHeadings, {beh * avior: 'wrap'})
  .use(rehypeStringify)
  .process('# Заголовок\nСсылка: https://example.com\nEmail: user@example.com', function(err, file) {
    if (err) throw err;
    console.log(String(file));
  });

Особенности работы с Rehype:

  • Можно применять любые HTML-трансформации, в том числе для добавления target="_blank" к ссылкам.
  • Автолинки URL и email можно комбинировать с безопасной обработкой через rehype-sanitize, чтобы предотвратить внедрение нежелательного HTML.

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

  • Открытие ссылок в новой вкладке: через Rehype добавляется атрибут target="_blank".
  • Добавление CSS-классов: позволяет стилизовать все автолинки единообразно.
  • Игнорирование определённых URL/email: можно фильтровать через условные проверки при посещении узлов AST (Abstract Syntax Tree).

Полезные плагины и утилиты

  • unist-util-visit — обход дерева Markdown/HTML для кастомной обработки.
  • remark-gfm — поддержка автолинков URL по стандарту GitHub Markdown.
  • remark-rehype — преобразование Remark AST в Rehype AST для последующего рендеринга HTML.
  • rehype-stringify — финальная генерация HTML из дерева Rehype.
  • rehype-sanitize — обеспечение безопасности HTML-контента.

Использование автолинков в связке Remark + Rehype обеспечивает чистый и безопасный рендеринг ссылок, включая URL и email, с возможностью полной кастомизации стиля, поведения и логики генерации.

Оглавление