angular 中引入 markdown

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

 

转载于:https://www.cnblogs.com/wjw1014/p/11265129.html