ngx-markdown 是Angular2+的一个第三方库，它的主要功能是将md文件转换为HTML格式，并且支持语法高亮。 GITHUB地址：https://github.com/jfcere/ngx-markdown 安装 1. 安装ngx-markd
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.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。
分别是:
<!-- 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中的数据绑定。
指令组件(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>
管道(Pipe)
<!-- chain `language` pipe with `markdown` pipe to convert typescriptMarkdown variable content --><div [innerHTML]="typescriptMarkdown | language : 'typescript' | markdown"></div>
服务(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__.'));
}
}
【版权声明】本博文著作权归作者所有，任何形式的转载都请联系作者获取授权并注明出处！
【重要说明】本文为本人的学习记录，论点和观点仅代表个人而不代表当时技术的真理，目的是自我学习和有幸成为可以向他人分享的经验，因此有错误会虚心接受改正，但不代表此刻博文无误！
【Gitee地址】秦浩铖：https://gitee.com/wjw1014