Emoji

Поддержка Emoji в Markdown Библиотека Marked предоставляет гибкий механизм работы с Markdown, включая возможность расширений для обработки Emoji. По умолчанию Marked не преобразует текстовые обозначения типа :smile: или :heart: в графические иконки. Для этого необходимо подключение дополнительных парсеров или ручное использование токенов.

Настройка пользовательского рендерера Marked позволяет определить собственный объект renderer, в котором можно переопределять методы для рендеринга отдельных элементов. Для обработки Emoji ключевой метод — это text. Пример создания рендерера для замены стандартных обозначений Emoji на соответствующие символы Unicode:

import { marked } from 'marked';

const emojiMap = {
  ':smile:': '?',
  ':heart:': '❤️',
  ':thumbsup:': '?',
  ':star:': '⭐'
};

const renderer = {
  text(text) {
    return text.replace(/:\w+:/g, (match) => emojiMap[match] || match);
  }
};

marked.use({ renderer });

const markdown = 'Привет :smile:, я люблю :heart: Markdown!';
const html = marked(markdown);
console.log(html);
// Вывод: Привет ?, я люблю ❤️ Markdown!

Регулярные выражения для расширенной поддержки Для полноценной работы с Emoji удобно использовать регулярные выражения, позволяющие находить все обозначения в тексте. Часто используется шаблон /:\w+:/g, но для более сложных обозначений, включая дефисы и цифры, лучше применять /:[\w-]+:/g.

Комбинация с внешними библиотеками Для полноценного рендеринга Emoji можно интегрировать Marked с библиотеками вроде emoji-dictionary или twemoji, которые предоставляют полный набор Unicode-эмодзи и возможность замены на изображения:

import twemoji from 'twemoji';
import { marked } from 'marked';

const renderer = {
  text(text) {
    return twemoji.parse(text, { folder: 'svg', ext: '.svg' });
  }
};

marked.use({ renderer });

const markdown = 'Салют :star: и :thumbsup:!';
const html = marked(markdown);
console.log(html);
// Вывод: HTML с SVG-иконками Emoji

Использование в парсинге и токенизации Marked предоставляет возможность создания собственных лексеров. Для Emoji можно добавить отдельный токен:

import { marked } from 'marked';

const lexer = new marked.Lexer();

lexer.rules.emoji = /^:([\w-]+):/;

lexer.inlineRules.emoji = function(src) {
  const match = this.rules.emoji.exec(src);
  if (match) {
    return {
      type: 'emoji',
      raw: match[0],
      text: match[1]
    };
  }
};

const renderer = {
  emoji(token) {
    return emojiMap[`:${token.text}:`] || token.raw;
  }
};

marked.use({ renderer });

const markdown = 'Пример :smile: токена';
const html = marked(markdown);
console.log(html);

Совместимость с стандартным Markdown При внедрении Emoji важно сохранять корректность стандартного Markdown. Marked обрабатывает обычные заголовки, списки и ссылки, поэтому рендеринг Emoji должен быть прозрачным и не мешать существующей структуре документа.

Настройка глобальной замены Для проектов, где часто встречаются Emoji, удобно создать глобальный плагин:

function emojiPlugin(md) {
  const renderer = {
    text(text) {
      return text.replace(/:[\w-]+:/g, (match) => emojiMap[match] || match);
    }
  };
  md.use({ renderer });
}

marked.use({ extensions: [emojiPlugin] });

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

Преимущества использования Emoji в Markdown с Marked

  • Универсальность: работает с Unicode и внешними библиотеками.
  • Легкость интеграции: через renderer или токены.
  • Совместимость: не нарушает стандартный синтаксис Markdown.
  • Гибкость: позволяет выбирать между символами Unicode и изображениями через Twemoji.

Заключение по функциональности Emoji в Marked реализуются через расширение рендерера или добавление пользовательских токенов. Такой подход позволяет не только вставлять визуальные символы в текст, но и интегрировать сторонние библиотеки для более богатого визуального оформления. При правильной настройке Markdown-документы сохраняют чистоту синтаксиса и остаются удобными для редактирования и рендеринга.

Оглавление