angular怎么将markdown格式转换成html格式渲染在页面上

最近有个需求 后端返回markdown格式的数据前端要进行渲染
查阅资料后具体操作步骤如下
参考链接https://jfcere.github.io/ngx-markdown/cheat-sheet

1. 安装 ngx-markdown

// 我这里项目时angular8的 所以也选择相对应的版本
npm i ngx-markdown@8.2.2 --save

2. 在AppModule中引用

import {
    MarkdownModule } from 'ngx-markdown';

@NgModule({
   
  declarations: [
  ],
  imports: [
    MarkdownModule.forRoot()  // 需要加的
  ],
  providers: [
  ],
  bootstrap: [AppComponent],
})

3.在子module重复上一部操作

4.在html使用

<div class="markdown" markdown ngPreserveWhitespaces>
      # front-end-template

      This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.3.19.

      ## Development server

      Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you
      change any of the source files.

      ## Code scaffolding

      Run `ng generate component component-name` to generate a new component. You can also use `ng generate
      directive|pipe|service|class|guard|interface|enum|module`.

      ## Build

      Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod`
      flag for a production build.

      ## Running unit tests

      Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).


 </div>

5.注：这时候样式可能不大对，大家可以网上找样式贴上去，注意必须加ng-deep，否则不会生效

::ng-deep {
   

    h1,
    h2,
    h3,
    h4 {
   
      color: #111111;
      font-weight: 400;
      margin-top: 1em;
    }

    h1,
    h2,
    h3,
    h4,
    h5 {
   
      font-family: Georgia, Palatino, serif;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    p,
    dl {
   
      margin-bottom: 16px;
      padding: 0;
    }

    h1 {
   
      font-size: 48px;
      line-height: 54px;
    }

    h2 {
   
      font-size: 36px !important;
      line-height: 42px;
    }

    h1,
    h2 {
   
      border-bottom: 1px solid #EFEAEA;
      padding-bottom: 10px;
    }

    h3 {
   
      font-size: 24px;
      line-height: 30px;
    }

    h4 {
   
      font-size: 21px;
      line-height: 26px;
    }

    h5 {
   
      font-size: 18px;
      list-style: 23px;
    }

    a {
   
      color: #0099ff;
      margin: 0;
      padding: 0;
      vertical-align: baseline;
    }

    a:hover {
   
      text-decoration: none;
      color: #ff6600;
    }

    a:visited {
   }

    ul,
    ol {
   
      padding: 0;
      padding-left: 24px;
      margin: 0;
    }

    li {
   
      line-height: 24px;
    }

    p,
    ul,
    ol {
   
      font-size: 16px;
      line-height: 24px;
    }

    ol ol,
    ul ol {
   
      list-style-type: lower-roman;
    }



    code,
    pre {
   
      border-radius: 3px;
      background-color: #f7f7f7;
      color: inherit;
      color: red;
    }

    code {
   
      font-family: Consolas, Monaco, Andale Mono, monospace;
      margin: 0 2px;
    }

    pre {
   
      line-height: 1.7em;
      overflow: auto;
      padding: 6px 10px;
      border-left: