Angular NGX-Markdown 笔记

# 1. 简介

ngx-markdown is an Angular library that uses marked to parse markdown to html combined with Prism.js for syntax highlight.

# 2. 集成到 Angular 项目

# (1). 安装基本功能

执行命令: npm install ngx-markdown --save,结束后修改 angular.json

// angular.json
"scripts": [
+ "node_modules/marked/lib/marked.js"
]

# (2). 安装语法高亮

// angular.json

"styles": [
  "styles.css",
+ "node_modules/prismjs/themes/prism-okaidia.css"
],
"scripts": [
+ "node_modules/prismjs/prism.js",
+ "node_modules/prismjs/components/prism-java.min.js",
+ "node_modules/prismjs/components/prism-typescript.min.js",
+ "node_modules/prismjs/components/prism-css.min.js" // css language syntax
]

# (3). 导入模块

// ...
+ import { MarkdownModule } from 'ngx-markdown';
// ...

import 'prismjs';
import 'prismjs/components/prism-java.min.js';
import 'prismjs/components/prism-typescript.min.js';
import 'prismjs/components/prism-css.min.js';

@NgModule({
  imports: [
+   MarkdownModule.forRoot(),
    FormsModule, // 这个在后面的使用示例中需要
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule { }

# (4). 使用示例

@Component({
  selector: 'app-editor',
  template: `
    <textarea class="variable-textarea" [(ngModel)]="markdown"></textarea>
    <markdown class="variable-binding" [data]="markdown"></markdown>
  `,
  styleUrls: ['./editor.component.scss']
export class EditorComponent implements OnInit {
    onstructor(private markdownService: MarkdownService) { }

    markdown = `
    # Title
    ## sub title
    
    `
}