Markdown в Angular

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

Markdown активно используется в кругах разработчиков для составления различного рода документаций, к примеру, популярная практика, для разметки README который распознают все сервисы git. К слову, этот блог также написан c использованием markdown, где 95% markdown кода преобразуется в HTML.

В моей практике, не так давно была задача создания корпоративной библиотеки компонентов для Angular, которая будет использоваться в нескольких командах. Соответственно появилась необходимость в качественном описании, которое отображается и в самом demo приложении, так и на страницах репозиториев. Дублировать информацию не было желания и принято решение использовать markdown файлы.

Наиболее завершенной и конечной библиотекой для работы с md показалась ngx-markdown (на момент написания статьи).

Установка

Установка пакета:

npm install ngx-markdown --save

Указываем на парсер markdown в файле angular.json.

"scripts": [
	"node_modules/marked/lib/marked.js"
]

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

Ниже опишу один из самых простых путей его использования.

@NgModule({
	imports: [
 		...
		MarkdownModule.forRoot({ loader: HttpClient })
  	 ]
...
})

Загружаем данные из md файла при помощи raw-loader.

public readonly MARKDOWN_DATA = '!!raw-loader!../../../README.md';

Для отображения используем тег markdown с атрибутом data

<markdown [data]='MARKDOWN_DATA'> </markdown>

Готово. Теперь markdown файлы конвертируются в HTML. В данном примере мы упростили вывод README.md файла и на страницах репозитория и на публичной странице.

Есть множество других путей использования этой библиотеки, которые описаны в официальной документации на странице Github.