在前端开发中，使用 Markdown 方式写作已经成为一种越来越普遍的选择。然而，当它们需要被渲染为 HTML 时，就变得更加具有挑战性。这时，我们可以借助 npm 包 @beligh/angular-markdown，来使得 Markdown 内容能够在 Angular 中被渲染为 HTML。
1. 安装
在使用 @beligh/angular-markdown 时，需要先进行安装。可以使用 npm 的安装方式：
npm install @beligh/angular-markdown --save
2. 引入
接下来，需要将该包引入到项目中。
在需要使用的 Angular 模块中引入：
-- -------------------- ---- ------- ------ - -------------- - ---- --------------------------- -- --- ----------- -------- - -- --- --------------- -- -- --- -- ------ ----- --------- - -展开代码
3. 使用
在项目中使用该包，可以通过下面的方式：
<markdown [data]="markdown"></markdown>
在上面的代码中，data 属性是必需的，并且需要传入对应的 Markdown 文本。变量 markdown 可以在某个组件类中定义。
举个栗子：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------------ --------- --------- --------- - --------- ----------------------------- -- -- ------ ----- ------------ - --------- ------ - - - -- ---- ------ --- -- ---- - -- - -- -- -展开代码
以上的代码，即可将 Markdown 文本渲染成 HTML。
4. 增强渲染
@beligh/angular-markdown 还有一个增强版本，叫做 @beligh/angular-markdown-it。它使用 markdown-it 渲染器，且支持缩略语，注脚、定义列表、emoji、subscript 和 superscript 等等。
在使用之前，还是要先安装：
npm install @beligh/angular-markdown-it --save
引入也很类似：
-- -------------------- ---- ------- ------ - ---------------- - ---- ------------------------------ -- --- ----------- -------- - -- --- ----------------- -- -- --- -- ------ ----- --------- - -展开代码
使用方式和前一种方式类似，只不过需要使用另外一个组件：
<markdown-it [data]="markdown"></markdown-it>
同样地，也可以通过在某个组件类中定义 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
