ngx-markdown 是 Angular2+ 的一个第三方库，它的主要功能是将md文件转换为HTML格式，并且支持语法高亮。
DEMO网站：https://jfcere.github.io/ngx-markdown
GITHUB地址：https://github.com/jfcere/ngx-markdown
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__.'));
}
}
