Интеграция с Angular

Для интеграции библиотеки Markdown-it в проект на Angular необходимо сначала установить сам пакет через npm:

npm install markdown-it

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

import MarkdownIt from 'markdown-it';

Создание экземпляра Markdown-it позволяет настроить парсер в соответствии с требованиями проекта:

const md = new MarkdownIt({
  html: true,            // разрешает HTML-теги в тексте
  linkify: true,         // автоматически преобразует URL в ссылки
  typographer: true      // включение типографических замен
});

Парсинг Markdown в компоненте Angular

В Angular часто используют привязку данных для динамического отображения Markdown. В компоненте создаётся метод для преобразования текста:

export class MarkdownComponent {
  rawMarkdown: string = '# Заголовок\n\nПример **Markdown** текста';
  htmlContent: string;

  private md = new MarkdownIt({ html: true, linkify: true });

  constructor() {
    this.htmlContent = this.md.render(this.rawMarkdown);
  }
}

В шаблоне Angular результат можно выводить с использованием innerHTML:

<div [innerHTML]="htmlContent"></div>

Важно помнить о безопасности: innerHTML уязвим для XSS-атак. Для защиты рекомендуется использовать DomSanitizer:

import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

export class MarkdownComponent {
  htmlContent: SafeHtml;

  constructor(private sanitizer: DomSanitizer) {
    const rawHtml = this.md.render(this.rawMarkdown);
    this.htmlContent = this.sanitizer.bypassSecurityTrustHtml(rawHtml);
  }
}

Настройка плагинов и расширений

Markdown-it поддерживает систему плагинов, позволяющих добавлять новые синтаксические возможности. Подключение плагина выполняется через метод use():

import mila from 'markdown-it-link-attributes';

this.md.use(mila, {
  pattern: /^https?:\/\//,
  attrs: {
    target: '_blank',
    rel: 'noopener'
  }
});

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

Поддержка динамического контента

Для проектов с динамическим контентом (например, Markdown, получаемый из API) важно корректно обновлять HTML при изменении исходного текста. В Angular это реализуется через геттеры или ngOnChanges:

ngOnChanges(changes: SimpleChanges) {
  if (changes['rawMarkdown']) {
    const rawHtml = this.md.render(this.rawMarkdown);
    this.htmlContent = this.sanitizer.bypassSecurityTrustHtml(rawHtml);
  }
}

Подсветка синтаксиса кода

Для отображения блоков кода с подсветкой можно использовать связку Markdown-it и highlight.js:

import hljs from 'highlight.js';

const md = new MarkdownIt({
  highlight: function (str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return hljs.highlight(str, { language: lang }).value;
      } catch {}
    }
    return ''; // использование обычного текста, если подсветка не доступна
  }
});

В шаблоне Angular блоки <pre><code> будут содержать CSS-классы highlight.js, что позволяет применять стили подсветки.

Оптимизация производительности

При работе с большими текстами Markdown рекомендуется создавать один экземпляр Markdown-it на уровне сервиса и использовать его для всех компонентов. Это предотвращает многократное создание парсера и ускоряет рендеринг:

@Injectable({ providedIn: 'root' })
export class MarkdownService {
  private md = new MarkdownIt({ html: true, linkify: true });

  render(markdown: string): string {
    return this.md.render(markdown);
  }
}

Компоненты получают HTML через сервис:

this.htmlContent = this.sanitizer.bypassSecurityTrustHtml(
  this.markdownService.render(this.rawMarkdown)
);

Дополнительные возможности Markdown-it

  • Настройка правил парсинга: можно переопределять стандартные правила для заголовков, списков, ссылок.
  • Создание кастомных блоков: через block.ruler и inline.ruler можно добавлять собственный синтаксис.
  • Интеграция с Angular Universal: Markdown-it полностью совместим с серверным рендерингом, что позволяет генерировать HTML на сервере для SEO.

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

Оглавление