Библиотека Marked предоставляет гибкий механизм для расширения функциональности через плагины и пользовательские рендереры. Плагин в контексте Marked — это набор функций или объектов, которые позволяют изменять стандартное поведение парсера или рендерера Markdown. Понимание принципов работы плагинов критически важно для реализации сложной логики обработки текста.
Рендерер отвечает за преобразование токенов Markdown в HTML. В Marked можно создать собственный рендерер, наследуя стандартный, или полностью переопределяя методы.
Пример структуры пользовательского рендерера:
import { marked } from 'marked';
class CustomRenderer extends marked.Renderer {
heading(text, level, raw, slugger) {
return `${text} `;
}
link(href, title, text) {
return `${text}`;
}
}
marked.use({ renderer: new CustomRenderer() });
const html = marked('# Заголовок');
Ключевые моменты:
heading,
link, paragraph, code,
list и другие.marked.use({ renderer }).Для более глубокого контроля над обработкой Markdown используют пользовательские токены и плагин для лексера. Лексер преобразует исходный текст в массив токенов, которые затем передаются рендереру.
Пример добавления нового токена:
import { marked } from 'marked';
const highlightToken = {
name: 'highlight',
level: 'inline',
start(src) { return src.indexOf('=='); },
tokenizer(src, tokens) {
const match = /^==(.+?)==/.exec(src);
if (match) {
return { type: 'highlight', raw: match[0], text: match[1] };
}
},
renderer(token) {
return `${token.text}`;
}
};
marked.use({ extensions: [highlightToken] });
const html = marked('Это ==важное== слово.');
Особенности работы с токенами:
name — уникальное имя токена.level — указывает, относится ли токен к блочному
(block) или встроенному (inline)
содержимому.start — функция, ускоряющая поиск возможного
токена.tokenizer — основная функция, создающая токен.renderer — функция для отображения токена в HTML.Плагины позволяют:
Пример плагина для обработки кастомного блока цитат:
import { marked } from 'marked';
const quotePlugin = {
extensions: [{
name: 'customQuote',
level: 'block',
start(src) { return src.indexOf('>>>'); },
tokenizer(src) {
const match = /^>>>([\s\S]+?)\n{2,}/.exec(src);
if (match) {
return { type: 'customQuote', raw: match[0], text: match[1].trim() };
}
},
renderer(token) {
return `${token.text}
`;
}
}]
};
marked.use(quotePlugin);
const html = marked('>>> Это цитата с кастомным оформлением\n\nСледующий абзац');
extensions, где каждый
элемент описывает отдельное расширение.renderer можно полностью настроить для HTML,
React или других целей.Для более гибкой интеграции Marked позволяет использовать хуки. Хук — это функция, которая вызывается на определенном этапе обработки Markdown.
Примеры хуков:
walkTokens(token): вызывается для каждого токена перед
рендерингом.renderer.hook(type, callback): позволяет изменить
поведение определенного метода рендерера.Пример использования walkTokens для подсветки
ссылок:
marked.use({
walkTokens(token) {
if (token.type === 'link') {
token.href = token.href.startsWith('http') ? token.href : `https://${token.href}`;
}
}
});
const html = marked('[Google](www.google.com)');
Хуки обеспечивают:
start для быстрого поиска возможных
токенов.