前言
在前端开发中，我们经常需要编写一些文档与博客来记录项目经验和心得。使用 Markdown 语法可以方便、快捷地书写内容，而 agm-angular-markdown 则可以将 Markdown 格式的文本转换成 HTML 格式并渲染至页面中。
本文将详细介绍如何使用 npm 包 agm-angular-markdown 来实现 Markdown 的渲染。
安装
$ npm install agm-angular-markdown
使用
在 Angular 应用中使用
- 在 app.module.ts 中导入模块
-- -------------------- ---- ------- ------ - --------------- ------------- - ---- ----------------------- ----------- ------------- - ------------ -- -------- - ------------------------ -- ------- ------------- -- -- ---------- --- ---------- -------------- -- ------ ----- --------- - -展开代码
- 在模板中使用
在模板中定义一个文本区域，并使用 markdown 属性绑定渲染后的 HTML 结果：
<textarea [(ngModel)]="markdownText"></textarea> <div [innerHTML]="markdownText | markdown"></div>
配置
使用 MarkdownModule.forRoot 中的 MarkedOptions 来配置 Markdown 的转换参数。示例：
-- -------------------- ---- ------- ------ - ------------- - ---- ----------------------- ------ -------- ----------------------- ------------- - ----- -------- - --- ------------------ -- ----------------- ------------- - ------ ------ ----- -- - ------ --- -------------- --------------- -------------- -- ------------------ -- ------ - --------- --------- ---- ----- ------- ----- ------- ------ --------- ----- ----------- ----- ------------ ------ -- - ----------- -------- - ------------------------ -------- -------------- ----------- -------------------- -- -- --展开代码
使用插件
插件是一些可以在 Markdown 转换过程中处理文本的函数。agm-angular-markdown 内置了以下插件：
- hljs
- katex
- taskList
需要在引入模块时将插件一起传入。
-- -------------------- ---- ------- ------ - -------------- - ---- ----------------------- ------ - ---------- - ---- ------------------------------------ ------ - ----------- - ---- ------------------------------------- ------ - -------------- - ---- ----------------------------------------- ----------- -------- - ------------------------ -------- - ----------- ------------ -------------- -- -- -- --展开代码
以 hljs 为例，要使用 hljs 渲染代码块，需要在 Markdown 转换后，将渲染后的 HTML 中的代码块添加 .hljs 类。
在页面载入前，需要引入 hljs 的 CSS 文件，示例：
<head> <link rel="stylesheet" href="//cdn.bootcss.com/highlight.js/9.12.0/styles/default.min.css"> </head>
完整示例
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - --------------- ------------- - ---- ----------------------- ------ - ------------ - ---- ------------------ ------ - ---------- - ---- ------------------------------------ ------ - ----------- - ---- ------------------------------------- ------ - -------------- - ---- ----------------------------------------- ------ -------- ----------------------- ------------- - ----- -------- - --- ------------------ ------------- - ------ ------ ----- -- - ------ --- -------------- --------------- -------------- -- ------------------ -- ------ - --------- --------- ---- ----- ------- ----- ------- ------ --------- ----- ----------- ----- ------------ ------ -------- ---------------------- -- - ----------- ------------- - ------------ -- -------- - -------------- ------------------------ -------- -------------- ----------- -------------------- --- -- ---------- --- ---------- -------------- -- ------ ----- --------- - -展开代码
在 AppComponent 中定义 markdownText，可以通过输入框修改，然后将其渲染出来。
<textarea [(ngModel)]="markdownText"></textarea> <div [innerHTML]="markdownText | markdown"></div>
在需要使用 hljs 的页面中引入 CSS 文件：
<head> <link rel="stylesheet" href="//cdn.bootcss.com/highlight.js/9.12.0/styles/default.min.css"> </head>
在引入模块时将插件传入：
-- -------------------- ---- ------- ----------- -------- - ------------------------ -------- - ----------- ------------ -------------- -- -- -- --展开代码
总结
使用 agm-angular-markdown 作为渲染器可以方便地将 Markdown 格式的文本转换成页面中的 HTML，同时也可以方便地自定义渲染参数和使用插件。
通过深入学习和使用 agm-angular-markdown，我们可以大大简化文档与博客的编写，提高开发效率，同时也更加美观易读。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005572981e8991b448d41cf
