介绍
React-milkdown 是一个使用 React 实现的 Markdown 渲染器，它支持使用插件来扩展 Markdown，使得用户可以定制自己的 Markdown 渲染规则。React-milkdown 提供了一个通用的 Markdown 渲染器组件 Milkdown，它可以接受 Markdown 文本作为输入，生成渲染好的 HTML。
React-milkdown 也提供了一些插件，这些插件既可以用来扩展原有的渲染规则，也可以用来引入一些新的元素或风格。
安装
使用 npm 安装 react-milkdown：
npm install react-milkdown
使用
在组件中使用 Milkdown 组件进行渲染：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - -------- - ---- ----------------- ----- -------- - - - ------ --------------- ------ ------------------ --- -------- --- -- ------ ----- --- - -- -- - ------ -------------------------------- --展开代码
在 Milkdown 组件外侧的元素可以自定义一些样式，比如全宽度布局、限制最大宽度等：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - -------- - ---- ----------------- ----- -------- - - - ------ --------------- ------ ------------------ --- -------- --- -- ------ ----- --- - -- -- - ------ - ---- ----------------- ------------------------------- ------ -- --展开代码
在 CSS 中可以对 .page 元素定义一些样式：
.page { width: 100%; max-width: 960px; margin: 0 auto; }
插件
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
