ngx-markdown 是 Angular2+ 的一個第三方庫，它的主要功能是將md文件轉(zhuǎn)換為HTML格式，并且支持語法高亮含潘。
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īng)用中:
npm install prismjs --save
為了使 prism.js 語法高亮可以正常執(zhí)行,需要引入以下文件 :
- prism.js 的關(guān)鍵庫文件,
node_modules/prismjs/prism.js - 一個高亮主題,
node_modules/prismjs/themes - 代碼語言描述文件,
node_modules/prismjs/components文件
如果你使用的是 Angular Cli 構(gòu)建工具,可以將下列語句添加到.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 方法中來對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 還包括一個render屬性, 你可以通過它重寫將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)用模塊中的時候, 可以使用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 組件
有三種方式來將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__.'));
}
}
