在前端开发中，使用 Markdown 方式写作已经成为一种越来越普遍的选择。然而，当它们需要被渲染为 HTML 时，就变得更加具有挑战性。这时，我们可以借助 npm 包 @beligh/angular-markdown，来使得 Markdown 内容能够在 Angular 中被渲染为 HTML。
1. 安装
在使用 @beligh/angular-markdown 时，需要先进行安装。可以使用 npm 的安装方式：
--- ------- ------------------------ ------
2. 引入
接下来，需要将该包引入到项目中。
在需要使用的 Angular 模块中引入：
------ - -------------- - ---- ---------------------------
-- ---
-----------
-------- -
-- ---
---------------
--
-- ---
--
------ ----- --------- - -3. 使用
在项目中使用该包，可以通过下面的方式：
--------- -----------------------------
在上面的代码中，data 属性是必需的，并且需要传入对应的 Markdown 文本。变量 markdown 可以在某个组件类中定义。
举个栗子：
------ - --------- - ---- ----------------
------------
--------- ---------
--------- -
--------- -----------------------------
--
--
------ ----- ------------ -
--------- ------ - -
- --
---- ------ ---
-- ----
- --
- --
--
-以上的代码，即可将 Markdown 文本渲染成 HTML。
4. 增强渲染
@beligh/angular-markdown 还有一个增强版本，叫做 @beligh/angular-markdown-it。它使用 markdown-it 渲染器，且支持缩略语，注脚、定义列表、emoji、subscript 和 superscript 等等。
在使用之前，还是要先安装：
--- ------- --------------------------- ------
引入也很类似：
------ - ---------------- - ---- ------------------------------
-- ---
-----------
-------- -
-- ---
-----------------
--
-- ---
--
------ ----- --------- - -使用方式和前一种方式类似，只不过需要使用另外一个组件：
------------ --------------------------------
同样地，也可以通过在某个组件类中定义 markdown 变量，来控制 Markdown 文本的内容：
------ - --------- - ---- ----------------
------------
--------- ---------
--------- -
------------ --------------------------------
--
--
------ ----- ------------ -
--------- ------ - -
- --
---- ------ ---
-- ----
- --
- --
--
-总结：
@beligh/angular-markdown 是一个轻量级的 Angular 组件，使得在 Angular 项目中渲染 Markdown 文本变得极为简单。我们可以适用它来展示格式化数据，丰富项目页面内容，还可以用来创建帮助文档或者发布博客等等。当我们需要增加对 Markdown 的解释能力时，可以使用增强后的 @beligh/angular-markdown-it。
代码示例：
https://stackblitz.com/edit/angular-grid-markdown-jev1yb?file=src/app/app.component.ts
参考资料：
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/131675