介绍
React-milkdown 是一个使用 React 实现的 Markdown 渲染器，它支持使用插件来扩展 Markdown，使得用户可以定制自己的 Markdown 渲染规则。React-milkdown 提供了一个通用的 Markdown 渲染器组件 Milkdown，它可以接受 Markdown 文本作为输入，生成渲染好的 HTML。
React-milkdown 也提供了一些插件，这些插件既可以用来扩展原有的渲染规则，也可以用来引入一些新的元素或风格。
安装
使用 npm 安装 react-milkdown：
--- ------- --------------
使用
在组件中使用 Milkdown 组件进行渲染：
------ ----- ---- -------- ------ - -------- - ---- ----------------- ----- -------- - - - ------ --------------- ------ ------------------ --- -------- --- -- ------ ----- --- - -- -- - ------ -------------------------------- --
在 Milkdown 组件外侧的元素可以自定义一些样式，比如全宽度布局、限制最大宽度等：
------ ----- ---- --------
------ - -------- - ---- -----------------
----- -------- - -
- ------ ---------------
------ ------------------ --- -------- ---
--
------ ----- --- - -- -- -
------ -
---- -----------------
-------------------------------
------
--
--在 CSS 中可以对 .page 元素定义一些样式：
----- - ------ ----- ---------- ------ ------- - ----- -
插件
React-milkdown 支持使用插件来扩展 Markdown，插件是一个对象，包含了一个或多个 renderer（渲染器）和一个或多个 parser（解析器）。
renderer 用来将 Markdown 解析后的 AST（抽象语法树）渲染成 HTML；parser 用来将 Markdown 文本解析成 AST。
以下是一个自定义插件的例子：
------ ----- ---- --------
------ - ----- - ---- -----------------
------ - ------- --------- - ---- --------------------
------ - ---- - ---- ----------
------ ----- --------- - ------------ ------- -- -
------ -------- ---- -- -- -
----- ----------- - ---- ------------ -- -
----- --------- - ----------------------------- ----------------------
----- -------- ------- ----- ----- ------ --------------- -- - ---
--- -----
----- ------ - ---------------------- -
----- ---- - -----------------
-- ------- ---------
----- ----- - --- ------------------ ------
--- ------
----- ------- - ------------------ -
-------------- ----- ----- ------ ----- ---
-
-
------ --------
--
------ -
--- --------
---- --- -----------------------
----- -- -- --
------- ---- -- -
----- ------- - ----------------------
------------------ ----- ----- -- -- -
----- ----------- - -------------------------------
----------------------- - ---------
-------------------------------------- --------
----- ----- - -----------------------
-------------------- -------------
------------------ ----------- - -----------------
----- ---- - --------------------------------------
------------------------------------------ -------
--- ---------------------------------
---
--
---
---
--
---
--
------ ----- -------- - -------------------
------ ------- ---------这个插件会在 Markdown 中匹配所有的 react 关键字，将它们包装在 <mark> 标签内。该插件基于 @milkdown/mark，它提供了 mark 渲染器和 mark 解析器，在渲染时将 Markdown AST 中的 mark 转化为 <mark> 标签。
使用插件
将插件作为 <Milkdown> 的 plugins 属性传入即可。注意使用 plugins() 包装插件，确保插件可以被正确绑定：
------ ----- ---- --------
------ - --------- ------- - ---- -----------------
------ -------- ---- --------------
----- -------- - -
- ------ ---------------
------ ------------------ --- -------- ---
---------
------ ----- ---- --------
------ -------- ---- ------------
-------------------- --- ---------------------------------
------
--
------ ----- --- - -- -- -
------ -
---- -----------------
--------- -------------------------------------------------
------
--
--总结
React-milkdown 具有很好的扩展性和反应性，可以为用户提供无限的定制和扩展功能。在使用 React-milkdown 时，需要熟悉插件的基本概念和使用方法，以便快速创建自己的插件并绑定到 Milkdown 组件上。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005683681e8991b448e44c5