ngx-markdown 是 Angular2+ 的一個(gè)第三方庫(kù)，它的主要功能是將md文件轉(zhuǎn)換為HTML格式，并且支持語(yǔ)法高亮。
DEMO網(wǎng)站：https://jfcere.github.io/ngx-markdown
GITHUB地址：https://github.com/jfcere/ngx-markdown

1. 安裝

1.1 安裝 ngx-markdown

• 使用　npm　進(jìn)行安裝，在　`angular｀項(xiàng)目目錄中執(zhí)行：

npm install ngx-markdown --save

• 在應(yīng)用中引入 marked 的支持.引入:

"scripts" : [
    "../node_modules/marked/lib/marked.js"  //增加此句
]

1.2 安裝語(yǔ)法高亮

如果用不到語(yǔ)法高亮,可以跳過(guò)此步驟.

使用一下命令添加語(yǔ)法高亮的包到你的應(yīng)用中:

npm install prismjs --save

為了使 prism.js 語(yǔ)法高亮可以正常執(zhí)行,需要引入以下文件 :

• prism.js 的關(guān)鍵庫(kù)文件, node_modules/prismjs/prism.js
• 一個(gè)高亮主題, node_modules/prismjs/themes
• 代碼語(yǔ)言描述文件, node_modules/prismjs/components 文件

如果你使用的是 Angular Cli 構(gòu)建工具,可以將下列語(yǔ)句添加到.angular-cli.json文件中:

"styles": [
  "styles.css",
+ "../node_modules/prismjs/themes/prism-okaidia.css"
],
"scripts": [
+ "../node_modules/prismjs/prism.js",
+ "../node_modules/prismjs/components/prism-csharp.min.js", # c-sharp language syntax
+ "../node_modules/prismjs/components/prism-css.min.js" # css language syntax
]

2. 配置

2.1 主應(yīng)用模塊

在使用ngx-markdown之前, 你必須引入MarkdowmModule到 AppModule 中去, 并且在 forRoot 中聲明:

import { NgModule } from '@angular/core';
+ import { MarkdownModule } from 'ngx-markdown';

import { AppComponent } from './app.component';

@NgModule({
  imports: [
+   MarkdownModule.forRoot(),
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule { }

2.1.1 Marked配置

可以在 MarkdownModule 中 forRoot 方法中來(lái)對(duì)Markded進(jìn)行配置:

import { MarkdownModule, MarkedOptions } from 'ngx-markdown';

// using default options
MarkdownModule.forRoot(),

// using specific options with ValueProvider
MarkdownModule.forRoot({
  provide: MarkedOptions,
  useValue: {
    gfm: true,
    tables: true,
    breaks: false,
    pedantic: false,
    sanitize: false,
    smartLists: true,
    smartypants: false,
  },
}),

2.1.2 MarkedOptions.render

MarkedOptions 還包括一個(gè)render屬性, 你可以通過(guò)它重寫將markdown數(shù)據(jù)轉(zhuǎn)換為HTML的具體轉(zhuǎn)換方式.

例如:

import { MarkedOptions, MarkedRenderer } from 'ngx-markdown';

// function that returns `MarkedOptions` with renderer override
export function markedOptionsFactory(): MarkedOptions {
  const renderer = new MarkedRenderer();

  renderer.blockquote = (text: string) => {
    return '<blockquote class="blockquote"><p>' + text + '</p></blockquote>';
  };

  return {
    renderer: renderer,
    gfm: true,
    tables: true,
    breaks: false,
    pedantic: false,
    sanitize: false,
    smartLists: true,
    smartypants: false,
  };
}

// using specific option with FactoryProvider
MarkdownModule.forRoot({
  provide: MarkedOptions,
  useFactory: markedOptionsFactory,
}),

2.2 其他的模塊

當(dāng)你將 MarkdownModule 引入到其他應(yīng)用模塊中的時(shí)候, 可以使用forChild 方法實(shí)現(xiàn).
例如:

import { NgModule } from '@angular/core';
+ import { MarkdownModule } from 'ngx-markdown';

import { HomeComponent } from './home.component';

@NgModule({
  imports: [
+   MarkdownModule.forChild(),
  ],
  declarations: [HomeComponent],
})
export class HomeModule { }

3. 使用

3.1 組件

有三種方式來(lái)將markdown文件渲染為HTML.
分別是:

<!-- static markdown -->
<markdown>
  # Markdown
</markdown>

<!-- loaded from remote url -->
<markdown [src]="'path/to/file.md'" (error)="onError($event)"></markdown>

<!-- variable binding -->
<markdown [data]="markdown"></markdown>

第三種, 是使用的Angular中的數(shù)據(jù)綁定.

3.2 指令組件(Directive)

<!-- static markdown -->
<div markdown>
  # Markdown
</div>

<!-- loaded from remote url -->
<div markdown [src]="'path/to/file.md'" (error)="onError($event)"></div>

<!-- variable binding -->
<div markdown [data]="markdown"></div>

3.3 管道(Pipe)

<!-- chain `language` pipe with `markdown` pipe to convert typescriptMarkdown variable content -->
<div [innerHTML]="typescriptMarkdown | language : 'typescript' | markdown"></div>

3.4 服務(wù)(Service)

import { Component, OnInit } from '@angular/core';
import { MarkdownService } from 'ngx-markdown';

@Component({ ... })
export class ExampleComponent implements OnInit() {
  constructor(private markdownService: MarkdownService) { }

  ngOnInit() {
    // outputs: <p>I am using <strong>markdown</strong>.</p>
    console.log(this.markdownService.compile('I am using __markdown__.'));
  }
}