介绍
gap-zjs-zmde 是一款用于在前端 web 应用中渲染 Markdown 文本的 npm 包。它提供了丰富的特性，如代码高亮、可嵌入图像、链接、表格等等。
在本文中，我们将介绍如何使用 gap-zjs-zmde 来渲染 Markdown 文本，并展示如何自定义样式和特性。
安装
gap-zjs-zmde 可以通过 npm 安装，只需输入以下命令：
npm install gap-zjs-zmde
使用
渲染 Markdown 文本非常简单，只需在 HTML 中加入一个 div 容器，然后使用 zMDE(blob) 方法来渲染：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
----------- ------------
----- ---------------- --------------------------------------------------------------
-------
------
---- --------------------------
------- ---------------------------------------------------------------------
--------
----- --------- - -----------------------------------------
----- --------- - -
- ------ ---------
---- -- - ------ ---- -- --- ------------ --------
-- --- ----------- ----------- -- ----- --------- -- ------------
--- -- --- -------- ------------- -- ----- ------ --------- -- ------ ------------
-- ---- ------------
----------------
-------- ----------- -
-------------------- ------------
-
--------------
------------
----------------
------
-
---------------------------------
---------
-------
-------渲染结果如下所示：
自定义主题
gap-zjs-zmde 支持自定义主题，你可以通过覆盖原有的 CSS 样式来改变渲染出来的 Markdown 文本外观。
以下是一个自定义主题的示例代码：
-- -------------------- ---- ------- ---------------- - ------ ----- ----------------- ----- - ---------------- -- - ------ -------- ------------ --- --- --- ----- - ---------------- -- - ------ -------- -
我们将这段 CSS 样式加入到我们的 HTML 页面中：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
----------- ------------
----- ---------------- --------------------------
----- ---------------- --------------------------------------------------------------
-------
------
---- --------------------------
------- ---------------------------------------------------------------------
--------
----- --------- - -----------------------------------------
----- --------- - -
- ------ ---------
---- -- - ------ ---- -- --- ------------ --------
-- --- ----------- ----------- -- ----- --------- -- ------------
--- -- --- -------- ------------- -- ----- ------ --------- -- ------ ------------
-- ---- ------------
----------------
-------- ----------- -
-------------------- ------------
-
--------------
------------
----------------
------
-
----- ---- - --------------- - ------ ------ --
----------------------
---------
-------
-------渲染结果如下所示：
自定义扩展
gap-zjs-zmde 还支持自定义扩展，你可以通过 zMDE.plugins 方法添加自己的渲染器。
以下是一个自定义扩展的示例代码：
-- -------------------- ---- -------
------------------ - ------------ -
----------------------- - --------------- ---- -
------ ----- ------------- -----------------------------------------------------------------------------
-
---------------------------------- -------- ------- ------- -- -
----- ----- - -------------------------------------------
-- ------- -
-- --------- -
------------
----- --------
------- ---------
-------- ---------
--
-
--------- -- ---------------
------ ----
-
------ -----
--
-我们将这段代码加入到我们的 HTML 页面中：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
----------- ------------
----- ---------------- --------------------------
----- ---------------- --------------------------------------------------------------
-------
------
---- --------------------------
------- ---------------------------------------------------------------------
--------
----- --------- - -----------------------------------------
----- --------- - -
- ------ ---------
---- -- - ------ ---- -- --- ------------ --------
-- --- ----------- ----------- -- ----- --------- -- ------------
--- -- --- -------- ------------- -- ----- ------ --------- -- ------ ------------
-- --- ---- --- ------ ---- ------- ------- ---------
-- ---- ------------
----------------
-------- ----------- -
-------------------- ------------
-
--------------
------------
----------------
------
-
--------------- - ------ ------ ---------------------------------
---------
-------
-------渲染结果如下所示：
总结
gap-zjs-zmde 是一款非常好用的 Markdown 渲染器，它易于使用并且支持自定义主题和扩展。我们在本文中介绍了如何使用它来渲染 Markdown 文本，如何自定义样式和特性。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005629e81e8991b448dfca1