ng2-realmark 是一个开源的 npm 包，旨在为 Angular 2+ 的应用程序提供实时预览 Markdown 文本的功能。它非常易于使用，支持定制和样式迁移。下面将介绍其使用教程和示例代码。
安装
通过 NPM 进行安装：
npm install ng2-realmark --save
在 Angular 中使用
在 Angular 的模块中引入 NgRealmarkModule：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - ---------------- - ---- ---------------
------ - ------------ - ---- ------------------
-----------
------------- -
------------
--
-------- -
-------------
----------------
--
---------- --------------
--
------ ----- --------- - -在 HTML 文件中使用 ng-realmark 指令：
<textarea [(ngModel)]="markdown"></textarea> <ng-realmark [markdown]="markdown"></ng-realmark>
其它选项
ng-realmark 具有其它选项，可以通过传入配置属性进行定制。
以下是 ng-realmark 的所有可选属性。
| 属性名 | 默认值 | 描述 |
|---|---|---|
| markdown | '' | 要渲染的 Markdown 文本 |
| options | null | marked.js 的配置选项 |
| sanitize | false | 是否使用 DOMPurify 进行 XSS 过滤 |
| highlight | true | 是否语法高亮代码块 |
| showToolbar | true | 是否显示工具栏 |
| toolbarClass | null | 工具栏的自定义 CSS 类名 |
| preClass | 'realmark' | 预览区域包含的自定义 CSS 类名 |
示例代码
以下是一个完整的示例，展示 ng-realmark 如何与其它 Angular 组件一起使用。
在 app.component.ts 文件中：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
--------- ----------------------------------
------------ --------------------- ------------------- ------------------------------------
-
--
------ ----- ------------ -
--------- ------ - -
- ------- ----
------- --------------- --- ---------- --- ---
------
- ------
- ---
- ----
- ----
- ------
---- ---------- ----- ------ ---
------ ------- ------- ---------------------
-在模块中引入 NgRealmarkModule：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - ---------------- - ---- ---------------
------ - ------------ - ---- ------------------
-----------
------------- -
------------
--
-------- -
-------------
----------------
--
---------- --------------
--
------ ----- --------- - -现在，您已经准备好使用 ng-realmark 来渲染 Markdown 文本了！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005577a81e8991b448d479a