一、介绍
ngx-markdown-hyggerio 是一个 Angular 的 markdown 渲染组件，基于 marked 和 highlight.js 实现。该组件支持很多额外的语法和特性，例如表格、代码块高亮、LaTeX 公式等。
下面将介绍如何使用该组件，并且给出具体的代码实现。
二、安装
npm install ngx-markdown-hyggerio --save
三、基本使用
- 首先，在模块中导入
MarkdownModule模块：
import { NgModule } from '@angular/core';
import { MarkdownModule } from 'ngx-markdown-hyggerio';
@NgModule({
imports: [ MarkdownModule ],
// ...
})
export class AppModule { }- 在组件中使用
markdown标签：
<markdown> # 标题 这是一段 **加粗** 的文字。 ``` typescript const foo = 'bar';```
这样，就可以渲染出带有标题、加粗字体和代码块的 markdown 文本。其中，markdown 标签中可以包含任意的 markdown 文本。
四、高级用法
1. 自定义话题
有时我们需要扩展 markdown 的语法，比如添加特定的话题，这时可以注册一个自定义话题。
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - -------------- - ---- ------------------------
------ - ----------------- - ---- ------------------------
-----------
------------- - ----------------- --
-------- -
------------------------
------- ----------
--
--
-- ---
--
------ ----- --------- - -上面的 MyCustomDirective 是一个自定义的指令，它可以为一段 markdown 文本添加特定的话题，并实现特定的功能。例如：
import { Directive, ElementRef } from '@angular/core';
@Directive({ selector: '[myCustom]' })
export class MyCustomDirective {
constructor(el: ElementRef) {
el.nativeElement.innerHTML = '<p><strong><em>Custom Directive</em></strong></p>';
}
}这样，当我们使用 <markdown myCustom> 标签时，就会自动进行自定义渲染。
2. Markdown 解析配置
在 ngx-markdown-hyggerio 中，我们可以通过配置 MarkdownModule 的参数来定制不同的解析器选项。
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - -------------- - ---- ------------------------
-----------
-------- -
------------------------
-- ---
--
--
-- ---
--
------ ----- --------- - -常用的配置项有：
markedOptions：定义marked解析器的选项。
-- -------------------- ---- -------
------ - ------------- - ---- ------------------------
-- ---
-----------
-------- -
------------------------
-------------- -
--------- --- -----------------
---- -----
------- -----
------- ------
--------- ------
--------- ------
----------- -----
------------ -----
-
--
--
-- ---
--
------ ----- --------- - -highlightOptions：定义highlight.js解析器的选项。
-- -------------------- ---- -------
------ - ---------------- - ---- ------------------------
-- ---
-----------
-------- -
------------------------
----------------- -
--
-
--
--
-- ---
--
------ ----- --------- - -sanitizeOptions：定义DomSanitizer解析器的选项。
-- -------------------- ---- -------
------ - ---------------- - ---- ----------------
-- ---
-----------
-------- -
------------------------
---------------- -
------------ - ---- --------- ---- --
------------------ -
---- - ------- -
-
-
--
--
-- ---
--
------ ----- --------- - -五、总结
本文介绍了 ngx-markdown-hyggerio 组件的安装和使用方法，并详细介绍了如何高效使用该组件进行 markdown 文本的渲染。希望这篇教程对大家的学习和实践有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f77238a385564ab6925