апрель 22, 2017 · angular

Конвертируем MarkDown в HTML + подсветка синтакисиса для кода в Angular 4

Контент для сайта я храню в .md-файлах, но выводить я хочу отформатированный текст. А так как в постах есть примеры кода, то и подсветка синтаксиса лишней не будет.

Установка

Для реализации данного функционала нам понадобится плагин: MdRender.

Он содержит модуль, который обьединяет работу двух JavaScript библиотек: Showdown и Highlight.js.

npm install @nvxme/ngx-md-render --save

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

...
import { MdRenderModule } from '../package/md-render.module';

@NgModule({
  imports: [
    ...
    MdRenderModule,
  ],
  ...
})

Модуль провайдит сервис для парсинга-рендеринга, теперь достаточно заинжектить и вызвать в нужном месте сервис:

...
source: string;
rendered: SafeHtml;
...
constructor(private sanitizer: DomSanitizer,
            private mdRender: MdRenderService) {
}
...
const html = this.mdRender.render(this.source);
const this.rendered = this.sanitizer.bypassSecurityTrustHtml(html);

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

Стилизация highlight.js

Последний шаг: подключение стилей для разметки, все возможные стили вы можете найти в node_modules/highlight.js/styles.

Чтобы стили добавились в бандл, добавьте ссылку на файл в раздел styles файла .angular-cli.json:

{
  ...
  "styles": [
    "main.scss",
    "../node_modules/highlight.js/styles/dracula.css"
  ]
}
  • LinkedIn
  • Tumblr
  • Reddit
  • Google+
  • Pinterest
  • Pocket