npm install ngx-markdown --save

"scripts" : [

    "../node_modules/marked/lib/marked.js"  //增加此句

]

npm install prismjs --save

如果你使用的是 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

]

组件

<!-- 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>

<!-- 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> 

<!-- chain `language` pipe with `markdown` pipe to convert typescriptMarkdown variable content -->

<div [innerHTML]="typescriptMarkdown | language : 'typescript' | markdown"></div>

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

  }

}