Интеграция в браузере

Для использования Markdown-it в браузерной среде необходимо подключить библиотеку через <script> тег. Наиболее простой способ — использование CDN:

<script src="https://cdn.jsdelivr.net/npm/markdown-it@13.0.1/dist/markdown-it.min.js"></script>

После подключения создается объект Markdown-it, который отвечает за парсинг Markdown в HTML:

const md = window.markdownit();

Метод md.render() преобразует текст в Markdown в HTML-строку:

const result = md.render('# Заголовок\n\nТекст **жирным**.');
console.log(result);

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

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

Настройка и расширения

Markdown-it поддерживает множество опций для управления поведением парсера. Основные из них:

  • html — разрешает использование HTML в Markdown.
  • linkify — автоматически преобразует URL в кликабельные ссылки.
  • typographer — включает типографские замены (например, кавычки и тире).

Пример инициализации с опциями:

const md = window.markdownit({
  html: true,
  linkify: true,
  typographer: true
});

Использование плагинов

Markdown-it обладает гибкой системой плагинов. Плагины добавляют новые синтаксические возможности или изменяют поведение парсера.

Пример подключения плагина для подсветки кода с помощью highlight.js:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11.8.0/styles/github.min.css">
<script src="https://cdn.jsdelivr.net/npm/highlight.js@11.8.0/lib/common.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/markdown-it@13.0.1/dist/markdown-it.min.js"></script>
<script>
  const md = window.markdownit({
    highlight: function (str, lang) {
      if (lang && hljs.getLanguage(lang)) {
        try {
          return hljs.highlight(str, { language: lang }).value;
        } catch (__) {}
      }
      return ''; 
    }
  });

  const html = md.render('```js\nconsole.log("Hello");\n```');
  document.body.innerHTML = html;
</script>

Интерактивное использование с textarea

Markdown-it часто используется для рендеринга Markdown в реальном времени. Основная схема:

  1. Создание поля для ввода Markdown (<textarea>).
  2. Элемент для отображения HTML (<div>).
  3. Привязка обработчика события input к рендерингу Markdown.

Пример:

<textarea id="markdown-input" rows="10" cols="50"></textarea>
<div id="html-output"></div>

<script>
  const md = window.markdownit({ html: true });

  const input = document.getElementById('markdown-input');
  const output = document.getElementById('html-output');

  input.addEventListener('input', () => {
    output.innerHTML = md.render(input.value);
  });
</script>

Встроенные правила и кастомизация

Markdown-it использует систему токенов, которая позволяет вмешиваться в процесс рендеринга на уровне отдельных элементов.

Пример изменения рендера ссылок:

const md = window.markdownit();
const defaultRender = md.renderer.rules.link_open || function(tokens, idx, options, env, self) {
  return self.renderToken(tokens, idx, options);
};

md.renderer.rules.link_open = function(tokens, idx, options, env, self) {
  tokens[idx].attrPush(['target', '_blank']);
  return defaultRender(tokens, idx, options, env, self);
};

const html = md.render('[Пример](https://example.com)');
console.log(html);

В результате все ссылки будут открываться в новом окне.

Асинхронные возможности

Хотя Markdown-it сам по себе синхронен, его можно интегрировать с асинхронными функциями, например, для подгрузки дополнительных данных перед рендерингом:

async function renderMarkdownAsync(mdText) {
  const externalData = await fetch('data.json').then(res => res.json());
  return md.render(mdText + '\n\n' + externalData.content);
}

renderMarkdownAsync('# Заголовок').then(html => {
  document.getElementById('html-output').innerHTML = html;
});

Итоговая схема интеграции

  • Подключение через CDN или локальный файл.
  • Создание объекта Markdown-it с опциями.
  • Использование md.render() для преобразования текста.
  • При необходимости подключение плагинов для расширенного синтаксиса.
  • Реализация интерактивного рендеринга через обработчики событий.
  • Кастомизация рендеринга через правила и токены.
  • Возможность асинхронной интеграции с внешними данными.

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

Оглавление