Панель инструментов

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

npm install marked

После установки библиотеку можно подключить в проекте:

const { marked } = require('marked');

Для использования в браузере доступен вариант через CDN:

<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

После подключения глобальная функция marked() становится доступной для преобразования Markdown в HTML.

Основное использование

Библиотека Marked предназначена для преобразования текста, написанного в Markdown, в HTML. Основной метод — marked():

const markdown = `
# Заголовок первого уровня

Текст с **жирным выделением** и *курсивом*.
`;

const html = marked(markdown);
console.log(html);

Результатом будет:

<h1>Заголовок первого уровня</h1>
<p>Текст с <strong>жирным выделением</strong> и <em>курсивом</em>.</p>

Настройки рендеринга

Marked позволяет гибко настраивать процесс преобразования через объект options:

marked.setOptions({
  gfm: true,              // Включение расширенного синтаксиса GitHub
  breaks: true,           // Перенос строки при одной новой строке
  smartLists: true,       // Умные списки
  smartypants: true       // Преобразование кавычек и тире в типографские символы
});

Проверка работы настроек:

const markdown = "Пример\nновой строки";
const html = marked(markdown); // <p>Пример<br>новой строки</p>

Создание пользовательских рендереров

Для более точного контроля над HTML можно создавать собственный рендерер:

const renderer = {
  heading(text, level) {
    return `<h${level} class="custom-heading">${text}</h${level}>`;
  },
  link(href, title, text) {
    return `<a href="${href}" title="${title || ''}" target="_blank">${text}</a>`;
  }
};

marked.use({ renderer });

const markdown = "# Заголовок с кастомным классом";
const html = marked(markdown);

Работа с безопасностью

Для предотвращения XSS можно использовать функцию DOMPurify или встроенные методы для безопасного вывода:

import DOMPurify from 'dompurify';

const unsafeHtml = marked(markdown);
const safeHtml = DOMPurify.sanitize(unsafeHtml);

Асинхронный парсинг

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

marked.parseAsync(markdown)
  .then(html => console.log(html))
  .catch(err => console.error(err));

Использование с React и другими фреймворками

В React Markdown обычно рендерится через dangerouslySetInnerHTML:

function MarkdownViewer({ content }) {
  return <div dangerouslySetInnerHTML={{ __html: marked(content) }} />;
}

Для Vue:

<div v-html="markedContent"></div>

<script>
import { marked } from 'marked';
export default {
  data() {
    return { markdown: '# Заголовок' };
  },
  computed: {
    markedContent() {
      return marked(this.markdown);
    }
  }
};
</script>

Обработка расширенного Markdown

Marked поддерживает:

  • Списки с вложенными элементами
  • Таблицы с выравниванием колонок
  • Кодовые блоки с подсветкой (через highlight.js или Prism.js)
  • Инлайн HTML при включённой опции gfm

Пример таблицы:

| Имя  | Возраст |
|------|--------:|
| Иван | 25      |
| Анна | 30      |

Рендеринг в HTML:

<table>
  <thead>
    <tr><th>Имя</th><th>Возраст</th></tr>
  </thead>
  <tbody>
    <tr><td>Иван</td><td>25</td></tr>
    <tr><td>Анна</td><td>30</td></tr>
  </tbody>
</table>

Поддержка пользовательских токенов и лексеров

Для расширенного анализа Markdown Marked предоставляет возможность работать с лексером:

const tokens = marked.lexer(markdown);
console.log(tokens);

Токены позволяют:

  • Разбирать структуру документа до рендеринга
  • Создавать собственные правила парсинга
  • Генерировать собственный HTML на основе токенов

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

marked.use({
  tokenizer: {
    customBold(src) {
      const match = /^\+\+([\s\S]+?)\+\+/.exec(src);
      if (match) {
        return { type: 'strong', raw: match[0], text: match[1] };
      }
    }
  }
});

Поддержка плагинов и расширений

Marked можно расширять через плагины, которые модифицируют парсер или рендерер. Пример использования с подсветкой синтаксиса кода:

import hljs from 'highlight.js';

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

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

Оглавление