1 通过用以下命令安装 ngx-markdown ，安装成功后会同时将库添加到 package.json 文件中。

npm install ngx-markdown --save

2. 由于库使用 Marked 解析器，需要将js引用添加到 `angular.json`文件中，

要激活 Prism.js语法高亮，还需要包含如下

"styles": ["src/styles.less","node_modules/prismjs/themes/prism-okaidia.css","node_modules/prismjs/plugins/line-numbers/prism-line-numbers.css","node_modules/prismjs/plugins/command-line/prism-command-line.css","node_modules/katex/dist/katex.min.css"
],
"scripts": ["node_modules/marked/marked.min.js","node_modules/prismjs/prism.js","node_modules/prismjs/components/prism-csharp.min.js", "node_modules/prismjs/components/prism-css.min.js","node_modules/prismjs/plugins/line-numbers/prism-line-numbers.js","node_modules/prismjs/plugins/command-line/prism-command-line.js","node_modules/katex/dist/katex.min.js"
]

3. 配置

3.1 在主应用程序模块（AppModule）中导入 MarkdownModule：

import { NgModule } from '@angular/core';
//添加此行
import { MarkdownModule } from 'ngx-markdown';import { AppComponent } from './app.component';@NgModule({imports: [//添加此行MarkdownModule.forRoot(),  ],declarations: [AppComponent],bootstrap: [AppComponent],
})
export class AppModule { }

此时跳到下一节（4. 使用 - 使用方法1），可以正确编译展示。

***注意1:***

由于官方文档里先介绍了使用后介绍的配置，导致在未配置时使用会出现以下报错:

3.2: 使用 [src] 属性直接加载远程文件

为了只保留一个 HttpClient 实例并避免拦截器的问题，还必须提供 HttpClient,同3.1配置，并且在文件中再添加：

//添加此行
import { HttpClientModule,HttpClient} from '@angular/common/http';//...
@NgModule({imports: [//添加此行HttpClientModule,],//...
})

对应下一节（4. 使用 - 使用方法2），可以正确编译展示

3.3: 在子模块中使用

新建module

ng generate module mymodule

在myModule里新建component：

ng generate component mymodule/mycomponent

在mymodule.module.ts里配置如下：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { GameComponent } from './mycomponent/mycomponent.component';
import { MarkdownModule } from 'ngx-markdown';   //添加此行@NgModule({declarations: [MyComponent],imports: [CommonModule,MarkdownModule.forChild(),  //添加此行]
})
export class MymoduleeModule { }

***注意2:***：

如果仍有报错，要注意新建的mymodule是否被导入到了主应用程序模块（AppModule）中

4. 使用

使用方法1: 直接在标签内写markdown语法

<markdown># 直接在标签内写markdown语法
</markdown>

使用方法2: 通过src标签引用文件

<markdown [src]=" 'assets/md/markdown.md'"></markdown>

使用方法3: 动态加载

<markdown [data]="markdown" (load)="onLoad($event)" (error)="onError($event)">

在 app.component.ts文件里:

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { MarkdownService } from 'ngx-markdown';@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.less']
})
export class AppComponent {constructor(private mdService: MarkdownService,private _httpClient: HttpClient) {}title = 'angular-work';markdownRaw: any = '';markdown: any = '';onLoad(e:any){}onError(e:any){}async ngOnInit() {this.markdownRaw = await this._httpClient.get(`assets/md/mark.md`, {responseType: 'text',}).toPromise();this.markdown = this.mdService.compile(this.markdownRaw);}
}

***注意3:***

(1) angular的资源文件需要在assets文件夹下的路径,否则引用不到且不报错,不好排查。
(2) 文件名注意不要有空格(有时候复制粘贴容易带上注意不到的空格)，否则引用不到且不报错,不好排查。

5. 常见错误

5.1 ‘markdonw’ is not a known element,控制台报错

//...
'markdonw' is not a known element
//..

检查是否正确配置，模块是否正确导入。解决方案见"3.1配置"和"3.3配置"，以及"注意1"和"注意2"。

5.2 无报错但引用文件不生效

解决方案见"3.2配置"和"注意3"。

参考链接1: 官方文档

ngx-markdown 安装和使用相关推荐

Windows10安装Markdown安装教程(超级详细)
markdown其实就是我们平常写博客的地方,下面我来详细介绍它的安装教程首先到官网去安装 markdown 点击download,我反正点击download后它自动就下载了然后下载好后是安装包, ...
down.php怎么安装,Markdown、phpstudy的安装及配置
1.Markdown及常用插件的安装和基本语法 Markdown安装 https://code.visualstudio.com 官网下载vsCode安装包,现在完成傻瓜式(直击下一步,下步即可)安装 ...
chrome浏览器安装markdown浏览插件
chrome本身是不支持markdown浏览的,打开.md文件,是长这样的然后,我们安装chrome的插件. 在谷歌应用商店里,搜索Markdown. 安装第二个Markdown Viewer. 然 ...
被气晕过去的Anaconda和本地安装的python3.6关于安装包(markdown包)报错问题
被气晕过去的Anaconda和本地安装的python3.6关于安装包(markdown包)报错问题 01 说明: 01 此次解决问题的心理过程的煎熬首先声明博主是个典型的强迫症患者,我觉得作为一 ...
WordPress+Markdown+为知笔记，实现高质量笔记和博客
本文写给:和我一样想要有一套操作容易.使用方便.兼容性好的高质量个人知识管理和博客实现方案的人. 欢迎通过此链接注册为知笔记来支持本人:https://note.wiz.cn/i/1fe81312 ...
如何下载python模块_python安装模块与包
Python模块,简单说就是一个.py文件,其中可以包含我们需要的任意Python代码.迄今为止,我们所编写的所有程序都包含在单独的.py文件中,因此,它们既是程序,同时也是模块.关键的区别在于,程序 ...
Sublime and Markdown
Sublime and Markdown 文章目录 Sublime and Markdown 安装 Sublime 设置 Sublime 安装插件 Package Control MarkdownEd ...
使用LaTeX，全面对标Word和Markdown
使用LaTeX,全面对标Markdown 最近终于考完试了,这个奇怪的学期也接近结束了.在再也忍受不了word诟病的排版系统后,我终于下定决心要学一学LaTeX来做排版.这么多天使用下来后,我发现la ...
Django + markdown 前台使用markdown编辑器深入浅出详解
一.需求来源近期有一个 django 前台使用 markdown 编辑器的需求,网上查了很多资料很多都是在后台使用 markdown 编辑器,然后在前台展示,可以参考.但是这种的教程对于想在前台页面 ...
Raspberry Pi, UPNP（二）, Scala
Raspberry Pi 概述树莓派(Raspberry Pi)在极客领域可谓大名鼎鼎,它的官网是: https://www.raspberrypi.org/ 从型号来看,它可以分为三大类型: 1) ...

ngx-markdown 安装和使用

1 通过用以下命令安装 ngx-markdown ，安装成功后会同时将库添加到 package.json 文件中。

2. 由于库使用 Marked 解析器，需要将js引用添加到 `angular.json`文件中，

3. 配置

3.1 在主应用程序模块（AppModule）中导入 MarkdownModule：

3.2: 使用 [src] 属性直接加载远程文件

3.3: 在子模块中使用

4. 使用

使用方法1: 直接在标签内写markdown语法

使用方法2: 通过src标签引用文件

使用方法3: 动态加载

5. 常见错误

5.1 ‘markdonw’ is not a known element,控制台报错

5.2 无报错但引用文件不生效

ngx-markdown 安装和使用相关推荐

最新文章

热门文章

ngx-markdown 安装和使用

1 通过用以下命令安装 ngx-markdown ，安装成功后会同时将库添加到 package.json 文件中。

2. 由于库使用 Marked 解析器，需要将js引用添加到 angular.json文件中，

3. 配置

3.1 在主应用程序模块（AppModule）中导入 MarkdownModule：

3.2: 使用 [src] 属性直接加载远程文件

3.3: 在子模块中使用

4. 使用

使用方法1: 直接在标签内写markdown语法

使用方法2: 通过src标签引用文件

使用方法3: 动态加载

5. 常见错误

5.1 ‘markdonw’ is not a known element,控制台报错

5.2 无报错但引用文件不生效

ngx-markdown 安装和使用相关推荐

最新文章

热门文章

2. 由于库使用 Marked 解析器，需要将js引用添加到 `angular.json`文件中，