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

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

npm install marked

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

import { marked } from 'marked';

Marked предоставляет функцию marked(), которая принимает Markdown-текст и возвращает HTML.

Конфигурация Marked

Marked поддерживает глобальные и локальные настройки. Основные параметры конфигурации:

  • gfm – включает поддержку GitHub Flavored Markdown (по умолчанию true).
  • breaks – преобразует переносы строк в <br> (по умолчанию false).
  • sanitize – удаляет потенциально опасный HTML (устаревший параметр, рекомендуется использовать безопасный рендеринг через Angular).
  • headerIds – генерирует идентификаторы для заголовков.

Пример настройки:

marked.setOptions({
  gfm: true,
  breaks: false,
  headerIds: true
});

Эти параметры влияют на поведение всех последующих вызовов marked() в приложении.

Рендеринг Markdown в компоненте Angular

Markdown-текст часто хранится в виде строки. Для преобразования в HTML можно создать метод в компоненте:

export class MarkdownComponent {
  markdown: string = `
# Заголовок первого уровня
Это **жирный текст** и _курсив_.
`;

  get htmlContent(): string {
    return marked(this.markdown);
  }
}

В шаблоне Angular HTML выводится через привязку свойства с безопасной вставкой:

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

Для безопасности важно использовать DomSanitizer, чтобы Angular не блокировал HTML:

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

export class MarkdownComponent {
  markdown: string = '# Пример Markdown';
  htmlContent: SafeHtml;

  constructor(private sanitizer: DomSanitizer) {
    this.htmlContent = this.sanitizer.bypassSecurityTrustHtml(marked(this.markdown));
  }
}

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

Marked позволяет создавать собственные рендереры для тонкой настройки вывода. Это полезно, например, для изменения внешнего вида заголовков, ссылок или списков:

import { Renderer } from 'marked';

const renderer = new Renderer();

renderer.link = (href: string, title: string, text: string) => {
  return `<a href="${href}" target="_blank" rel="noopener">${text}</a>`;
};

marked.setOptions({ renderer });

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

  • Добавлять атрибуты к ссылкам.
  • Настраивать стиль списков и таблиц.
  • Вставлять дополнительные обёртки для блоков кода.

Асинхронная загрузка Markdown

Часто Markdown хранится во внешних файлах. В Angular их можно загрузить через HttpClient:

import { HttpClient } from '@angular/common/http';

export class MarkdownService {
  constructor(private http: HttpClient) {}

  loadMarkdown(path: string): Promise<string> {
    return this.http.get(path, { responseType: 'text' }).toPromise();
  }
}

После получения текста его можно отобразить через marked() и DomSanitizer.

Интеграция с формами и динамическим контентом

Marked удобно использовать для динамического обновления контента в реактивных формах Angular. Например, при вводе текста в textarea можно отображать Markdown-предварительный просмотр в реальном времени:

<form [formGroup]="markdownForm">
  <textarea formControlName="content"></textarea>
</form>

<div [innerHTML]="sanitizer.bypassSecurityTrustHtml(marked(markdownForm.value.content))"></div>

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

Обработка кода и подсветка синтаксиса

Marked поддерживает блоки кода через тройные обратные кавычки. Для подсветки синтаксиса часто используют библиотеки вроде Prism.js или Highlight.js. Пример интеграции с Highlight.js:

import hljs from 'highlight.js';

marked.setOptions({
  highlight: (code, lang) => {
    return hljs.getLanguage(lang) ? hljs.highlight(code, { language: lang }).value : code;
  }
});

Теперь все блоки кода будут автоматически подсвечиваться.

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

При большом объёме Markdown рендеринг на лету может быть медленным. Для улучшения производительности:

  • Использовать ChangeDetectionStrategy.OnPush в компоненте.
  • Кэшировать результат marked() для неизменного текста.
  • Разбивать контент на блоки и рендерить только видимую часть (виртуальный скролл).

Примеры использования в Angular-приложениях

  1. Документация и блоги – хранение контента в Markdown и рендеринг с подсветкой кода.
  2. Чат-приложения – поддержка форматирования сообщений.
  3. Редакторы заметок – интеграция с textarea и динамический превью Markdown.

Marked в Angular обеспечивает гибкий и производительный способ работы с Markdown, сохраняя при этом полную совместимость с возможностями платформы и безопасностью рендеринга HTML.

Оглавление