angular 中引入 markdown

惟我獨尊 · 發表於 2019-7-29 17:15:00

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。

分别是:

<!-- 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__.'));
  }
}