简介
pm-loader 是一个基于 webpack 的加载器，可以将 markdown 文件转换为 html 并插入到页面中。它可以用于编写博客、文档等前端类网站的内容。
安装
在项目根目录下，执行以下命令进行安装：
npm install pm-loader --save-dev
配置 webpack
在 webpack.config.js 中添加以下代码：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- --------
---- ------------
--
--
--
-- ---
--使用
在需要添加 markdown 内容的地方，直接引入即可：
import mdContent from './content.md';
其中，content.md 是存放 markdown 内容的文件。
pm-loader 会将 markdown 文件转换为一个 html 字符串，并将其导出为 mdContent 变量，可以在 Vue/React 组件中使用。
注：如果需要在 html 中使用图片，需要将图片文件也放在 webpack 的处理范围内。
配置
pm-loader 还提供了一些配置项，如下：
escapeHtml
- 类型：Boolean
- 默认值：false
设为 true 后，将在转换 markdown 内容时，对 html 实体进行转义。
use: {
loader: 'pm-loader',
options: {
escapeHtml: true,
},
},anchor
- 类型：Boolean
- 默认值：true
设为 true 后，会为标题自动添加锚点链接。
use: {
loader: 'pm-loader',
options: {
anchor: true,
},
},toc
- 类型：Boolean|Object
- 默认值：false
设为 true 后，会为内容生成目录。也可以配置 toc 来自定义目录的样式和分级。
-- -------------------- ---- -------
---- -
------- ------------
-------- -
---- -
--------------- ---------
----------- --
--
--
--highlight
- 类型：Function
- 默认值：hljs.highlightAuto
用于代码高亮，可以自定义一个 highlight 函数将代码块高亮。
-- -------------------- ---- -------
---- -
------- ------------
-------- -
---------- ------ ----- -- -
-- ---
------ ----------------
--
--
--示例代码
下面是一个示例，将一个 markdown 文件转换为 html 并使用 Vue 展示：
-- -------------------- ---- -------
----------
-----
------ ----- -------
---- -------------------------
------
-----------
--------
------ --------- ---- ---------------
------ ------- -
----- -----------------
------ -
------ -
------ ---
---------- ---
--
--
--------- -
----- - ------ ---- - - -------------------------------
---------- - ------
-------------- - -----
--
-------- -
----------------------- -
----- ----- - ----------------
----- ------- - ---------------------
----- ----- - ------------ -- ---
----- ---- - ---------------------- ----
------ - ------ ---- --
--
--
--
---------总结
通过 pm-loader，我们可以直接使用 markdown 编写前端网站内容。除了基础功能，它还提供了丰富的配置项，可以灵活地定制转换的结果。在编写博客、文档等内容时，可以大大提升生产效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005607881e8991b448dea4a