Npm包的使用为我们提供了全球最大的代码库，其中包括了很多优质的前端相关的工具。其中 markdown-it-jsx 是一个强大的markdown转换工具，可以转化为JSX语法，用于在React等框架中直接渲染markdown文本。下面我们将详细介绍这个npm包的安装和使用，以及示例代码和对应的作用。
安装
使用npm包的第一步，当然是安装。在命令行中输入以下命令即可完成markdown-it-jsx的安装。
npm install markdown-it-jsx --save
基本使用
安装好markdown-it-jsx之后，我们来看看如何使用它。
首先，需引入模块并初始化markdown-it。这个库是一个Markdown解析器，可以对传入的内容做解析，将其转换为HTML或者其他指定格式的内容。
const MarkdownIt = require('markdown-it'); const md = new MarkdownIt();
其次，用markdown-it解析markdown，然后将生成的内容转化为JSX语法。下面是一段示例代码，输出了一个链接：
-- -------------------- ---- ------- ----- ------- - --------------------------- ----- ----------- - ---------------- ----- ------ - ------------------------------------------------------------------------------- - ---------- - -- -- --------- ----- -------- -- -- - ----- -------------- - ----------------------- ------ -- ----------- ---------------------- - -------- - -------- ------------------- - --------- ----------- - --- ------------------------- - -- --- --------------------展开代码
最后的输出结果如下：
<a href="https://github.com/markdown-it/markdown-it" target="_blank" rel="noopener noreferrer">markdown-it</a>
参数详解
上面的示例代码涉及到了一些概念性的东西，下面我们来具体的介绍一下，该如何使用markdown-it-jsx。
在初始化markdown-it时，可以传入一个对象，该对象为markdown-it-jsx特有的选项。这个对象中的参数如下：
overrides
类型：Object
默认值：{}
markdown-it-jsx 的核心功能是将 markdown 解析为 JSX。为此，用户可以通过 overrides 选项传递一个组件名和一个函数，用于在解析过程中替换标记的默认行为。
以下是一个示例：
-- -------------------- ---- ------- ------ ---------- ---- -------------- ------ ------- ---- ------------------ ----- -- - --- ------------------------------- ----- --------- - -- -------- -- -- ------------------------ ----- ------ - ------------------------ -- ---- ------------- - ---------- - --- --------- -- --- -------------------- -- ------- -------------- -- ---- ---------------------展开代码
在上面的代码中，我们使用了一个简单的自定义组件来覆盖标签。我们将 em 标签转换成了一个渲染了自定样式的 React 组件。
createElement
类型：Function
默认值：require('react').createElement
自定义 React 环境时需要传递一个 createElement 函数的映射。这个函数将用于在解析 Markdown 时替换默认的 createElement 函数。例如：
-- -------------------- ---- ------- ------ - -------------- - ---- ------------------- ------ ---------- ---- -------------- ------ ------- ---- ------------------ ------ ----------- ---- ---------------- ----- -- - --- ------------------------------- ----- ------------- - ----------- ------ ------------ -- - ------ ---------- ---------------------------------- -- ----- ------ - ------------------------ ------- ---- -------- - ------------- --- ----------------------------------------------------------------- -- ------- -------------- ------- ---- ----------------展开代码
在上面的代码中，我们通过传递一个 createElement 的实现，使用自定义模式将解析结果转换成了基于 React 的生成模式。
forceBlock
类型：Boolean
默认值：false
这个选项用于强制块级元素，而不管标记是否前后有其他文本。例如：
-- -------------------- ---- ------- ------ ---------- ---- -------------- ------ ------- ---- ------------------ ----- -- - --- ------------------------------- ----- ------- - ----------------------------- ------ ---- --------------- - ----------- ---- --- ----- ------- - -------------------------- ------------ ---------- - ----------- ---- --- --------------------- -- ------- ---------------------- ------ ---- --------------------------- --------------------- -- ------- -------------------------------------------------------------------展开代码
注意到结果中，block 标记已经覆盖了 Markdown 渲染的默认行为，同时还能根据期望的组件插入更有意义的。
forceInline
类型：Boolean
默认值：false
这个选项用于强制内联元素，而不管标记是否前后有其他文本。例如：
-- -------------------- ---- ------- ------ ---------- ---- -------------- ------ ------- ---- ------------------ ----- -- - --- ------------------------------- ----- ------- - ----------------------------- ------ ---- --------------- - ------------ ---- --- ----- ------- - -------------------------- ------------ ---------- - ------------ ---- --- --------------------- -- ------- ------------------- ------ ---- ----------------------- --------------------- -- ------- ------- -------------------------------- -------展开代码
allowedAttributes
类型：Object
默认值：{}
针对每个标签，可以提供一个包含允许出现的 HTML 属性的列表的对象。这个选项默认为空。
-- -------------------- ---- ------- ------ ---------- ---- -------------- ------ ------- ---- ------------------ ----- -- - --- ------------------------------- ----- ------ - ------------------------- - -------------------------------------------- - ------------------ - -- -------- -------- ------ - --- -------------------- -- ------- --------- - -- ------------------------- ----------------------------展开代码
disallowedTypes
类型：Array
默认值：[]
此选项忽略了此列表中给出的类型的渲染。生成的结果中将不会有被忽略类型的任何结果。
-- -------------------- ---- ------- ------ ---------- ---- -------------- ------ ------- ---- ------------------ ----- -- - --- ------------------------------- ----- ------ - ----------------------- -- ---- ------------ ------- ----------- -------- - ---------------- -------- -------- --- -------------------- -- ------- ------- -- ---- ------------------- ------------------------ ---------展开代码
wrapper
类型：String
默认值：undefined
该选项用于为生成结果提供自定义包装器。例如，将结果包装在一个 div 中：
-- -------------------- ---- ------- ------ ---------- ---- -------------- ------ ------- ---- ------------------ ----- -- - --- ------------------------------- ----- ------ - ------------------------ -------- -------- - -------- ----- --- -------------------- -- ------- ------------- -------- ---------------展开代码
wrapParagraphs
类型：Boolean
默认值：false
该选项用于自动将未包装的段落（p）标记包裹在合适标记（如 div）中。注意，option.wrapper 的应用优先于它。
-- -------------------- ---- ------- ------ ---------- ---- -------------- ------ ------- ---- ------------------ ----- -- - --- ------------------------------- ----- ------ - ----------------------- ------------ ---- - ----- ------- - --------------- ---- --- -------------------- -- ------- ------------ ------------------------- ---- ----------- --------------展开代码
处理标签
当我们定义组件时，可以向其传递变量，并使用这些变量来定制渲染结果。
以下代码使用 jsx 和 React 创建一个自定义链接组件，该组件还使用了第三个参数和一个 props 对象：
-- -------------------- ---- ------- ------ - --------- - ---- -------- ----- ---- - ------- ------ ---------- -- -- ----------- ----------------------------- ----- -- - --- ------------- --------------------------- - -------- ---- -------- ---- ----- -- - ----- ----- - ------------ ----- ------ - ------------------------ ----- --------- - --------------------- -- --------- --- -------- ----- ---- - ---------------------- ----- ---------- - --------------------- -- --------- --- --------- ----- ----- - ----------- --- --- - --------- - ----------------------- ----- -------- - --------------------------------------- -------- ------------ ------ ----- ----------- -------------------------------- -- ----- ------ - ---------------- ------------------------ ------------ --------------------展开代码
上面代码中，使用 md.renderer.rules.link_open 重写渲染链接的默认方法。我们对 token 中的一些孩子和属性进行解析，并用这些解析结果修饰自定义组件。在本例中，我们使用了 <link /> 组件，该组件嵌套了链接文本、链接地址和链接标题。
总结
markdown-it-jsx 是一个非常方便的npm包，通过它我们可以轻松地将markdown文件转化为JSX语法。上面的教程讲解了如何引入、使用markdown-it-jsx，以及了解了该包提供的一些常用功能和效果。
希望今天的文章能够帮助你更好的使用 markdown-it-jsx，如果你有任何关于该npm包的疑问或者想法，欢迎在留言区跟我们分享。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/77046
