Ленивая загрузка

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

Инициализация и базовое использование

Для работы с Marked необходимо установить библиотеку через npm:

npm install marked

Импорт и базовое преобразование Markdown в HTML осуществляется следующим образом:

import { marked } from 'marked';

const markdownText = '# Заголовок 1\n\nПример текста с **жирным** и *курсивом*.';
const htmlOutput = marked(markdownText);

console.log(htmlOutput);

Результат выполнения:

Заголовок 1


Пример текста с жирным и курсивом.

Marked поддерживает практически все стандартные конструкции Markdown: заголовки, списки, цитаты, кодовые блоки и ссылки.

Настройка парсера

Marked предоставляет гибкую систему конфигурации, позволяющую изменять поведение парсинга:

marked.setOptions({
  gfm: true,               // Включение GitHub Flavored Markdown
  breaks: true,            // Преобразование переносов строк в 

  smartLists: true,        // Улучшенные списки
  smartypants: true,       // Преобразование кавычек и тире
});
  • gfm — поддержка расширенного синтаксиса Markdown GitHub.
  • breaks — превращение одиночного переноса строки в тег
    .
  • smartLists — делает списки более «умными», правильно обрабатывая нумерацию и вложенные уровни.
  • smartypants — автоматически заменяет кавычки и дефисы на типографские аналоги.

Создание собственного рендерера

Marked позволяет переопределять рендеринг отдельных элементов Markdown. Это полезно для создания уникального HTML или интеграции с CSS-фреймворками.

const renderer = new marked.Renderer();

renderer.heading = function(text, level) {
  return `${text}`;
};

const markdownText = '## Заголовок второго уровня';
const htmlOutput = marked(markdownText, { renderer });

console.log(htmlOutput);

В этом примере заголовки будут получать кастомный CSS-класс, позволяющий управлять их стилем через стили сайта.

Ленивая загрузка Markdown

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

async function loadMarkdown(url) {
  const response = await fetch(url);
  if (!response.ok) throw new Error('Не удалось загрузить файл Markdown');
  const text = await response.text();
  return marked(text);
}

document.getElementById('load-btn').addEventListener('click', async () => {
  const html = await loadMarkdown('/docs/guide.md');
  document.getElementById('content').innerHTML = html;
});

Ключевые моменты:

  • Асинхронная загрузка с помощью fetch.
  • Преобразование текста в HTML только при необходимости.
  • Минимизация первоначальной нагрузки страницы, ускорение времени загрузки.

Безопасность и XSS

Marked поддерживает опцию безопасного рендеринга для предотвращения XSS-атак:

marked.setOptions({
  sanitizer: (html) => {
    // Простая фильтрация скриптов
    return html.replace(/.*?<\/script>/gi, '');
  },
  mangle: false, // отключение автоматической маскировки email
});

Дополнительно можно использовать сторонние библиотеки вроде DOMPurify для полноценной очистки HTML после преобразования.

Работа с большим контентом

При работе с большими Markdown-файлами рекомендуется:

  • Делить контент на части и подгружать по мере прокрутки или взаимодействия пользователя.
  • Использовать ленивую загрузку с async/await и динамическим import.
  • Кешировать результат преобразования в памяти или в localStorage для повторного использования без повторной обработки.

Пример кэширования:

const cache = new Map();

async function getMarkdown(url) {
  if (cache.has(url)) return cache.get(url);
  const response = await fetch(url);
  const text = await response.text();
  const html = marked(text);
  cache.set(url, html);
  return html;
}

Настройка подсветки кода

Marked поддерживает интеграцию с библиотеками подсветки кода, такими как highlight.js:

import hljs from 'highlight.js';

marked.setOptions({
  highlight: function(code, lang) {
    if (lang && hljs.getLanguage(lang)) {
      return hljs.highlight(code, { language: lang }).value;
    }
    return code;
  }
});

Теперь блоки кода в Markdown будут автоматически подсвечены с использованием выбранного языка программирования, улучшая читаемость документации.

Оглавление