介绍
@weh/markdown 是一个用于在前端项目中渲染 Markdown 的 npm 包。它基于 React 和 marked 实现，提供了一个灵活、易用的 API，使得在前端项目中渲染 Markdown 成为了一件简单的事情。
安装与引用
在使用 @weh/markdown 前，你需要先安装它：
--- ------- ------------- ------
在项目中引用该包需要使用 ES6 的方式：
------ -------- ---- ----------------
使用
在使用 @weh/markdown 时，你可以直接使用其提供的组件 Markdown 来渲染你的 Markdown 内容：
------ ----- ---- -------- ------ -------- ---- ---------------- ----- ------- - -- ------ ------ ---- -- -------------------- ------ ------- -------- ----- - ------ ------------------------------- -
当 Markdown 组件被渲染时，它会将 content 中的 Markdown 内容渲染成 HTML，并通过 React 将其显示在页面上。在上面的代码中，我们将 content 中的 Markdown 渲染成了一段 H1 标题和一句普通文本。
你还可以通过 props 对渲染的选项进行更改。下面是一些常见的 props：
allowDangerousHtml：仅在你确信你的 Markdown 代码是安全的时才使用，允许渲染不安全的标签。默认为false。className：组件根元素（div）的 CSS 类名。默认为Markdown。decorateToken：用于自定义渲染节点的函数，能够让你替换或修改标记渲染的结果。详见 API 文档。source：渲染的 Markdown 源码。和{props.children}是等价的，同时存在时，{props.children}优先。theme：指定渲染器使用的主题。默认为default，可选的主题有light和dark。
示例
下面是一个完整具体的使用示例。在这个例子中，我们使用了 @weh/markdown、styled-components 和 Prism.js 包来实现一个简单的 Markdown 编辑器。
在页面上，我们使用 contentEditable 属性实现了一个可编辑的区域，用户在这个区域输入 Markdown 文本，程序会将其渲染成 HTML 并在下方的显示区显示。
------ ------ - -------- - ---- --------
------ ------ ---- --------------------
------ -------- ---- ----------------
------ ----- ---- ----------
------ ---------------------------
------ --------------------------------------
------ ----------------------------------
----- --------- - -----------
-------- -----
------ -----
------- -----
--
----- ------ - -----------
----- --
------- -----
-------- -----
----------------- --------
------- --- ----- -----
----------- ----- --- --- --- ------- -- -- ------
---------- -----
------------ ------
-------- -----
-------------- -
------ -----
-------- ------------------
-
------------------------------------------ -
--------------- -----
-------- ------------------
------ -----
-
--
----- ------- - -----------
----- --
------- -----
-------- -----
----------------- -----
------- --- ----- -----
----------- --- --- --- ------- -- -- ------
---------- -----
------------ ------
--------- -----
----------------------- -
----------------- --------
------- -----
------- --
-------- --
--------- -----
---------- -----
-------------- -----
---- -
-------- -------
-------- -
------------------ -----
-------- --------------
-------- -------------
------ ----
-------------- ----
------ -----
-------------------- -----
----------------- -----
---------------- -----
------------ -----
-
-
-
--
----- ------------ - -
----------------------- -
----------------- --------
------- -----
------- --
-------- --
--------- -----
---------- -----
-------------- -----
---- -
-------- -------
-------- -
------------------ -----
-------- --------------
-------- -------------
------ ----
-------------- ----
------ -----
-------------------- -----
----------------- -----
---------------- -----
------------ -----
-
-
-
--
------ ------- -------- ----- -
----- -------- ---------- - -------------
----- ------------------ - ------- -- -
----------------------------------
--
------ -
-----------
-------
---------------
----------------- ---- -------- --------
----------------------------
-
--------
---------
---------
---------
---------------
-------- ------ ------------- ------ ------------ --
---------------------- --------- ------ -- -
-- ------ -- ------------ -
------ -
----- -------- ------ ----------- ---
-------------------------- ------------------------
-------
--
- ---- -
------ ---------
-
--
--
----------
------------
--
-结语
本文介绍了如何使用 @weh/markdown 包，在前端项目中渲染 Markdown。通过本文的学习，你可以快速上手这个 npm 包，并利用它在你的项目中轻松完成 Markdown 的渲染任务。
如果你想要进一步了解该包的使用，还请查看 它的文档。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005622a81e8991b448df7fc