ngx-markdown 是 Angular2+ 的一个第三方库，它的主要功能是将md文件转换为HTML格式，并且支持语法高亮。
GITHUB地址：https://github.com/jfcere/ngx-markdown
安装
1. 安装 ngx-markdown
使用 npm 进行安装，在 `angular｀项目目录中执行：
npm install ngx-markdown --save
在应用中引入 marked 的支持.引入:
"scripts" : [ "../node_modules/marked/lib/marked.js" //增加此句 ]
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 ]
组件
有三种方式来将markdown文件渲染为HTML。
分别是:
# Markdown "'path/to/file.md'" (error)="onError($event)"> "markdown">
第三种, 是使用的Angular中的数据绑定。
指令组件(Directive)
# Markdown"'path/to/file.md'" (error)="onError($event)">"markdown">
管道(Pipe)
"typescriptMarkdown | language : 'typescript' | markdown">
服务(Service)
import { Component, OnInit } from '@angular/core';
import { MarkdownService } from 'ngx-markdown';
@Component({ ... })
export class ExampleComponent implements OnInit() {
constructor(private markdownService: MarkdownService) { }
ngOnInit() {
// outputs: I am using markdown.
console.log(this.markdownService.compile('I am using __markdown__.'));
}
}