Библиотека Markdown-it предоставляет гибкую систему
опций, позволяющую настраивать обработку входного Markdown-текста и
поведение генератора HTML. Три ключевых опции, которые часто требуют
точной настройки, — это html, breaks и
linkify. Их понимание критично для правильного отображения
контента на веб-страницах.
htmlОпция html управляет тем, будет ли Markdown-it
интерпретировать встроенный HTML-тег в тексте. По умолчанию эта опция
отключена (false) для защиты от потенциально опасного
HTML-кода.
Примеры использования:
const MarkdownIt = require('markdown-it');
const md = new MarkdownIt({ html: true });
const result = md.render('Пример жирного текста внутри Markdown');
console.log(result);
// Пример жирного текста внутри Markdown
Ключевые моменты:
html: false любой HTML в тексте выводится как
обычный текст:const md = new MarkdownIt({ html: false });
const result = md.render('текст');
console.log(result);
// <strong>текст</strong>
Включение html важно при необходимости рендеринга
кастомных HTML-компонентов, вставки ,
и других встроенных тегов.
Следует учитывать вопросы безопасности: включение HTML делает контент уязвимым для XSS-атак, если источники данных небезопасны.
breaksОпция breaks управляет тем, как библиотека
интерпретирует одиночные переносы строк. В стандартном Markdown
одиночный перенос строки игнорируется, создавая текст в одну строку, а
двойной — формирует новый параграф. Опция breaks: true
позволяет воспринимать любой перенос строки как
.
Пример использования:
const md = new MarkdownIt({ breaks: true });
const text = `Строка 1
Строка 2`;
const result = md.render(text);
console.log(result);
// Строка 1
// Строка 2
Ключевые моменты:
breaks меняет стандартное поведение Markdown,
поэтому его стоит использовать только при необходимости.breaks работает независимо от опции html,
но их сочетание позволяет строить гибкие структуры с HTML-тегами и
точными переносами строк.linkifyОпция linkify позволяет автоматически преобразовывать
URL и email-адреса в кликабельные ссылки, без необходимости оборачивать
их в Markdown-синтаксис [текст](ссылка).
Пример использования:
const md = new MarkdownIt({ linkify: true });
const text = 'Сайт: https://example.com, Email: user@example.com';
const result = md.render(text);
console.log(result);
// Сайт: https://example.com, Email: user@example.com
Ключевые моменты:
linkify применяет встроенный механизм распознавания
ссылок и email, автоматически генерируя HTML-теги
.linkify-it для более сложных случаев (например, кастомные
схемы URL, исключение определённых доменов).html и breaks, но
требует осторожности при выводе динамического контента: ссылки
генерируются автоматически, что может быть нежелательно для некоторых
приложений.Эти три опции часто используются вместе для контроля над рендерингом текста:
const md = new MarkdownIt({
html: true,
breaks: true,
linkify: true
});
const text = `
Пример текста с HTML тегами
Перенос строки автоматически превращается в
Ссылка: https://openai.com
`;
const result = md.render(text);
console.log(result);
Результат:
Пример текста с HTML тегами
Перенос строки автоматически превращается в
Ссылка: https://openai.com
html: true позволяет рендерить
HTML внутри Markdown.breaks: true превращает переносы строк в
.linkify: true автоматически конвертирует URL в
кликабельные ссылки.Эта комбинация обеспечивает максимальный контроль над выводом Markdown, позволяя создавать как структурированные статьи, так и динамический контент с ссылками и встроенным HTML.