前言
在前端开发中，我们通常需要将 markdown 文本渲染成页面上的特定样式。常见的做法是使用一些开源的库来处理 markdown，如果需要将渲染结果展示在 React 组件中，就需要使用一些能够在 React 中使用的库。
本文将介绍一个名为 commonmark-react-renderer 的 npm 包，它能够将 markdown 渲染成 React 组件，支持自定义样式以及代码高亮等功能。
安装
在使用 commonmark-react-renderer 前，我们需要先安装这个 npm 包。使用以下命令即可：
npm install commonmark-react-renderer --save
使用
安装完成后，我们可以先看一下官方提供的例子：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ------------ ------ - ------- ------------ - ---- ---------------------------- ----- ------ - --------- ------------ ----- --- - --- ----------------------- ----- ---- - --- --------------------------- ---------------- ---- -------------------------- ------- ---- -- --- ------------------------------- --
这是一个简单的例子，演示了如何将 markdown 转化为 html 并展示在页面上。这个例子使用了 commonmark-react-renderer 中提供的 Parser 和 HtmlRenderer 类。由于这个例子仅返回了 html 字符串，我们使用了 React 的 dangerouslySetInnerHTML 属性来将渲染后的 html 插入到页面中。但是这种方式并不安全，如果你在处理一些敏感信息，不应该使用它。
注意：Parser 和 HtmlRenderer 等 Renderer 类都是基于 commonmark-spec 实现的，这意味着你应该阅读并理解 commonmark 规范。
生成自定义组件
commonmark-react-renderer 支持自定义生成组件的方式。如下面的示例代码：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- ------------- - ---- ---------------------------- ----- ------ - -- -- ----- ------------------- --------------- ----- ------ - ------ --- ------ --------------- ----- --------- - - ----- ------------------------ ---- -- ----- --------- -------------- ---------------------------------- -------------- ------ -- ----- --- - --- ----------------------- ----- ------------- - --- ------------------------------------- ------ ------- -------- ----- - ------ -------------------------- -
创建自定义组件的方法很简单，只需要将组件写在 renderers 对象中，并指定它的 tag 名称即可。上述代码中定义了一个名为 custom_inline 的自定义组件，我们将会在 markdown 中使用。
渲染选项
commonmark-react-renderer 提供了一些渲染选项，可以帮助我们自定义渲染过程中的一些行为。下面是一些常用的选项：
softBreak- 用于指定软换行渲染为什么，可以是 'br' 或 'li'。默认是 'br'。escapeHtml- 指定是否需要对 HTML 进行转义。默认为 true。allowedTypes- 指定允许渲染哪些节点类型。默认情况下，所有节点类型都会被渲染。
结束语
commonmark-react-renderer 是一个功能强大的 npm 包，可以帮助我们将 markdown 渲染成 React 组件，支持自定义样式，自定义渲染行为等功能。在使用它之前，我们需要仔细阅读并理解 commonmark 规范，并根据需要使用渲染选项和自定义组件来控制渲染结果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/commonmark-react-renderer