Angular９とFirebaseでブログを作ってみる６（ngx-markdownでブログ内容をリッチに表示できるようにする）

前回、ブログの内容をFirestoreから取得できるようにしました。

今回は表示をリッチにしてみようかと思います。

方針

後々、ブログはQiitaのようにマークダウンでかけるようにしたいなーと思ってるので、まずは表示をマークダウンに対応させたいと思います。

ngx-markdownを使います。

インストール

npm install ngx-markdown --save

angular.jsonの修正

• marked.jsのパスを指定します
• ハイライト表示ができるようにprism.js/cssのパスも設定しておきます

angular.json

{
  ・・・
  "projects": {
    "my-blog": {
      ・・・
      "architect": {
        "build": {
          ・・・
          "options": {
            ・・・
            "styles": [
              "node_modules/prismjs/themes/prism-okaidia.css",
              ・・・
            ],
            "scripts": [
              "node_modules/marked/lib/marked.js",
              "node_modules/prismjs/prism.js"
            ]

MarkdownModuleのインポート

src/app/app.module.ts

・・・
import { MarkdownModule } from 'ngx-markdown';

@NgModule({
  ・・・
  imports: [
    ・・・
    MarkdownModule.forRoot(),

マークダウン形式の文字列を出力

• 表示するだけであればmarkDownディレクティブを指定します
  • ngPreserveWhitespacesで改行を有効にします

src/app/blogs/detail/detail.component.html

<div *ngIf="detail" class="blog-detail">
    <div class="title-area">
        <h1>{{detail.title}}</h1>
        <span class="date">作成日：{{detail.created_at | date: 'yyyy/MM/dd HH:mm'}}</span>
    </div>
    <div class="contents-area">
        <div markdown ngPreserveWhitespaces>
            {{contents}}
        </div>    
    </div>
</div>

• コンポーネント側で\nと<br>を改行コードに変換するようにします

src/app/blogs/detail/detail.component.ts

  get contents() {
    return this.detail.contents.replace(/(\\n|\<br>)/g, '\n');
  }

Firestoreにデータを登録

• Firestoreには改行が登録できないので\nで登録します
  • Angular側で\nと<br>を改行コードに変換してます

# マークダウンに対応しました\n\n## リスト\n\n- リスト１\n- リスト２\n\n## テーブル\n\n|列１|列２|\n|---|---|\n|値１|値２|\n\n## コード\n\n```test.txt\nコード\n```\n\n## 引用\n\n> test\n\n

こんな感じになりました

まとめ

次回はレスポンシブ対応して、いろんな画面幅で良い感じに見えるようにしたいと思います。

（追記）
Angular９とFirebaseでブログを作ってみる７（Qiitaの投稿履歴を表示する）