Angular8对markdown的支持

ngx-markdown 是 Angular2+ 的一个第三方库，它的主要功能是将md文件转换为HTML格式，并且支持语法高亮。

1. 安装

1.1 安装 ngx-markdown

使用　npm　进行安装，在　`angular｀项目目录中执行：

npm install ngx-markdown --save

在应用中引入 marked 的支持.引入:

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

1.2 安装语法高亮(如果用不到语法高亮,可以跳过此步骤)

使用一下命令添加语法高亮的包到你的应用中:

npm install prismjs --save

为了使 prism.js 语法高亮可以正常执行,需要引入以下文件 :

prism.js 的关键库文件, node_modules/prismjs/prism.js
一个高亮主题, node_modules/prismjs/themes
代码语言描述文件, node_modules/prismjs/components 文件

如果你使用的是Angular Cli构建工具,可以将下列语句添加到.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 主应用模块

在使用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 方法中来对Markded进行配置:

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 还包括一个render属性, 你可以通过它重写将markdown数据转换为HTML的具体转换方式.

例如:

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 其他的模块

当你将 MarkdownModule 引入到其他应用模块中的时候, 可以使用forChild 方法实现.
例如:

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 组件

有三种方式来将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中的数据绑定.

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 服务(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__.'));
  }
}

demo网站：https://jfcere.github.io/ngx-markdown
github地址：https://github.com/jfcere/ngx-markdown