在前端开发中，我们经常需要编辑和渲染 Markdown 格式的文本。wmd 是一个非常好用的 npm 包，提供了一系列方便的 API 和组件，帮助我们在前端中轻松地实现 Markdown 文本的编辑和渲染。本文将介绍 wmd 的使用教程，并提供详细的示例代码，帮助大家快速上手。
安装 wmd
首先，我们需要在项目中安装 wmd。可以使用 npm 命令直接安装：
npm install wmd
编辑 Markdown 文本
使用 wmd 编辑 Markdown 文本非常方便。我们只需要在 HTML 页面中引入 wmd.js，然后创建一个 textarea 元素即可。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ------------
-------
------
--------- --------------------------------
------- ---------------------------------------
--------
----- ------ - --- -----------
-------- -------------------------------------------
--------------- -----
--------- ------------
---
---------
-------
-------在上述示例代码中，我们创建了一个 textarea 元素，并使用 wmd.js 的 WMDEditor 类对其进行绑定。这样，我们就可以在 textarea 中输入和编辑 Markdown 文本了。
渲染 Markdown 文本
除了编辑 Markdown 文本，我们还需要将其渲染成 HTML。wmd 提供了一个 WMDEditor.getHTML() 方法，可以将编辑框中的 Markdown 文本转换为 HTML。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ------------
-------
-- ------ --
---------------- -
------ ------
------- ------
-
----------------- -
------ ------
------- ------
------- --- ----- -----
-------- -----
--------- -----
-
--------
-------
------
--------- --------------------------------
---- ----------------------------
------- ---------------------------------------
--------
----- ------ - --- -----------
-------- -------------------------------------------
--------------- -----
--------- ------------
------- --------------------------------------------
---
---------
-------
-------在上述示例代码中，我们新增了一个 <div> 元素，并将其作为 output 参数传递给 WMDEditor 构造函数。这样，当用户在 textarea 中输入 Markdown 文本后，就会自动将其转换为 HTML 并渲染到 <div> 元素中。
自定义渲染器
如果我们希望自定义渲染器，可以使用 wmd 提供的 Marked 类。Marked 类是一个流行的 Markdown 渲染工具，支持扩展和定制渲染器。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ------------
-------
-- ------ --
---------------- -
------ ------
------- ------
-
----------------- -
------ ------
------- ------
------- --- ----- -----
-------- -----
--------- -----
-
--------
-------
------
--------- --------------------------------
---- ----------------------------
------- ---------------------------------------
------- -------------------------------------------------
--------
----- -------- - --- ------------------
---------------- - -------- ------ ------ -
-- --------
------ ---------------------------------
--
----- ------ - --- -----------
-------- -------------------------------------------
--------------- -----
--------- ----------------------------------
------- --------------------------------------------
-------- -----
------- ------------------- -------- ---
---
---------
-------
-------在上述示例代码中，我们创建了一个 marked.Renderer 对象，并自定义了 heading 渲染器。然后，我们将 marked.Renderer 对象传递给 WMDEditor 构造函数中的 marked 参数。
总结
以上就是使用 wmd 包在前端中编辑和渲染 Markdown 文本的完整教程。通过本文的介绍，读者可以掌握 wmd 的基本用法，并能够自定义渲染器和 Markdown 样式。如果你的项目中需要使用 Markdown，不妨试一试 wmd。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb857b5cbfe1ea0611814