什么是@menubar/markup-it
@menubar/markup-it 是一个 Node.js 库，是一个用于解析和转换 Markdown 语言的 npm 包。它允许您将文本转换为 HTML 或 React 组件，并且还可以将 HTML 或 React 组件转换为文本。这个库的优点是它具有针对 Markdown 的高度可配置性以及兼容性。
安装
在终端中运行以下命令：
npm install @menubar/markup-it
用法
解析 Markdown
-- -------------------- ---- ------- ----- - ------ - - ------------------------------ ----- -------- - - - ------ ----- ---- -- -------- ----- - ---- - - ---- - -- ----- ----- - ------------------------------- ----- ------- - -------------------- ----------------------------
将输出以下内容：
-- -------------------- ---- -------
-
------ -
-
----- --------
----- -------------
------ --
----- -------
------- --
----- ------- -------
------ --
--
--
--
-
----- --------
----- ------------
------ --
----- -------
------- -
-
----- ----- -- --
------ --
--
-
----- -------
------ -
-
----- ------
-
-
--
-
----- - -------
------ --
-
-
--
--
-
----- --------
----- ------------
------ --
----- -------
------- --
----- ----- ---
------ --
--
--
--
-
----- --------
----- ------------
------ --
----- -------
------- --
----- ----- ---
------ --
--
--
-
-
-将 Markdown 转换为 HTML
-- -------------------- ---- ------- ----- - ------ - - ------------------------------ ----- - ---- - - ------------------------------------------------ ----- -------- - - - ------ ----- ---- -- -------- ----- - ---- - - ---- - -- ----- ----- - ------------------------------- ----- ------- - -------------------- -------------------------------------
将输出以下 HTML：
<h1>Hello, World</h1> <p>This is <strong>bold</strong> text.</p> <ul> <li>Item 1</li> <li>Item 2</li> </ul>
将 Markdown 转换为 React 组件
-- -------------------- ---- ------- ----- - ------ - - ------------------------------ ----- - ----- - - ------------------------------------------------- ----- -------- - - - ------ ----- ---- -- -------- ----- - ---- - - ---- - -- ----- ----- - ------------------------------- ----- ------- - -------------------- -----------------------------------
将输出以下 React：
<div>
<h1>Hello, World</h1>
<p>This is <strong>bold</strong> text.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>将 HTML 转换为 Markdown
-- -------------------- ---- ------- ----- - ------ - - ------------------------------ ----- - ---- - - ------------------------------------------------ ----- ----------- - - ---------- ---------- ------- -- --------------------- --------- ---- -------- ------ -------- ------ ----- -- ----- ----- - ---------------------------------- ----- ------- - -------------------- -------------------------------------
将输出以下 Markdown：
# Hello, World This is **bold** text. - Item 1 - Item 2
将 React 组件转换为 Markdown
-- -------------------- ---- -------
----- - ------ - - ------------------------------
----- - ----- - - -------------------------------------------------
----- ------------ - -
-----
---------- ----------
------- -- --------------------- ---------
----
-------- ------
-------- ------
-----
------
--
----- ----- - ------------------------------------
----- ------- - --------------------
-------------------------------------将输出以下 Markdown：
# Hello, World This is **bold** text. - Item 1 - Item 2
配置
@menubar/markup-it 具有高度可配置性，您可以选择各种选项来为其提供自定义行为。以下是选项列表：
commonmark(default:true)：是否启用 CommonMark 缩写语法。footnote(default:true)：是否启用脚注语法。gfm(default:true)：是否启用 Github Flavored Markdown 扩展。heading1(default:false)：是否将#解析为header-one类型的块级元素。hardlinebreak(default:false)：是否将单个换行符解析为硬换行符。softbreak(default:false)：是否将行末空格和制表符解析为软换行符。strikethrough(default:true)：是否启用删除线语法。table(default:true)：是否启用表格语法。
要将选项传递给解析器，您需要在调用 parser.stateFromText() 或 parser.stateFromHTML() 时将其作为第二个参数传递，如下所示：
-- -------------------- ---- ------- ----- - ------ - - ------------------------------ ----- -------- - - - ------ ----- ---- -- -------- ----- - ---- - - ---- - -- ----- ----- - ------------------------------ - ---- ----- --- ----- ------- - --------------------
结论
@menubar/markup-it 提供了一种高度可配置的 Markdown 解析器，可以很好地适用于您的项目。它使您能够轻松地将 Markdown 转换为 HTML 或 React 组件，并反之亦然。使用它全面认真地阅读其官方文档即可进行操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600573a481e8991b448e99e4