如果你是一名前端开发者或者博主，你肯定需要使用 markdown 语言来编写文章或者文档。markdown 语言简洁、易读、易写，但是在使用的过程中，它需要被编译成 HTML 才能在网页上显示。今天，我们要介绍一个非常有用的 npm 包——marked-pre-loader，它可以方便地将 markdown 编译成 HTML，让你的网页更加美观和易读。
安装 marked-pre-loader
我们可以通过 npm 来安装 marked-pre-loader：
npm install marked-pre-loader --save-dev
安装完成后，我们需要在 webpack 的配置文件中添加 marked-pre-loader：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- --------
---- -
-
------- --------------------
--
--
--
--
--
--使用 marked-pre-loader
当我们使用 markdown 编写的文件时，需要给文件添加 .md 后缀名。比如我们有一个 test.md 文件，里面的内容如下：
-- -------------------- ---- ------- - -- ---- ------ --- ---- ---- --- ------ ---------------------------- ------- -------- -------- ------- - ------------------ -------- - -------- ------
现在，我们可以在我们的代码中导入这个 test.md 文件，并且使用 dangerouslySetInnerHTML 方法将编译好的 HTML 插入到页面中：
import testMd from './test.md';
const App = () => (
<div dangerouslySetInnerHTML={{ __html: testMd }}></div>
);这样，我们就可以在页面上看到编译好的 HTML 了。
marked-pre-loader 的特性
marked-pre-loader 提供了丰富的配置选项，让我们可以方便地定制编译的结果。下面是一些常用的配置选项：
gfm
gfm 选项表示是否启用 GitHub Flavored Markdown 的功能。它默认为 true。
pedantic
pedantic 选项表示是否启用 Pedantic 模式。它默认为 false。
sanitize
sanitize 选项表示是否启用 HTML 标签的过滤。它默认为 false。
breaks
breaks 选项表示是否将 markdown 中的换行符转换成 <br> 标签。它默认为 false。
smartLists
smartLists 选项表示是否启用智能列表。智能列表可以识别多级列表结构。它默认为 true。
smartypants
smartypants 选项表示是否启用 SmartyPants 显示风格。SmartyPants 会将特定的字符转换成 HTML 实体，比如单引号会被转换成 '。它默认为 false。
highlight
highlight 选项表示语法高亮器应该使用的第三方库。它默认为 highlight.js。
示例代码
我们可以通过以下示例代码，更好地了解 marked-pre-loader 的使用方法和特性：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ ------ ---- ---------
------ ------ ---- ------------
-------------------
---- -----
--------- ------
--------- ------
------- ------
----------- -----
------------ ------
---------- -------- ------ ----- -
----- ---- - ------------------------
----- -------- - ---------------------- - ---- - ------------
------ -------------------- - -------- ---------
--
---
----- --- ------- --------------- -
------------------ -
-------------
---------- - -
------- ---
--
-
------------------- -
----- ------ - ---------------
--------------- ------ ---
-
-------- -
------ -
---- ----------------------
---- -------------------------- ------- ----------------- ---------
------
--
-
-
-------------------- --- ---------------------------------结语
以上就是本文关于 npm 包 marked-pre-loader 的使用教程，以及一些常用的配置选项的介绍。通过使用 marked-pre-loader，我们可以将 markdown 快捷地编译成 HTML，并且享受到 markdown 的简洁和易读的优势。祝愿大家在使用 marked-pre-loader 的过程中，更加快捷方便地编写网页和博客。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c5b81e8991b448e5e01