квітень 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