介绍
在前端项目中，我们通常需要将 markdown 格式的文本转换成 HTML 格式的文本。而 @atlaskit/editor-markdown-transformer 是一个非常好用的 npm 包，它可以方便地实现将 markdown 转换成 HTML。本文将介绍 @atlaskit/editor-markdown-transformer 的使用方法，以及如何将其应用到你的项目中。
安装
我们可以使用 npm 命令来安装 @atlaskit/editor-markdown-transformer：
npm install @atlaskit/editor-markdown-transformer
使用方法
安装完成后，我们可以在代码中引入 @atlaskit/editor-markdown-transformer：
import MarkdownTransformer from '@atlaskit/editor-markdown-transformer';
处理 markdown 的代码：
const markdownTransformer = new MarkdownTransformer(); const markdownText = `# Title This is a paragraph.`; const htmlOutput = markdownTransformer.convert(markdownText); console.log(htmlOutput);
在上面的代码中，我们首先创建了一个 MarkdownTransformer 对象，并将 markdown 转换成 HTML 输出。
高级用法
在实际项目中，我们通常需要更加复杂的 markdown 转换，比如需要引入一些自定义规则。下面，我们将展示如何完成一些常用高级用法。
设置支持的 markdown 语法
在默认情况下，@atlaskit/editor-markdown-transformer 支持常见的 markdown 语法。如果你需要支持更多的语法，你可以创建一个新的 MarkdownTransformer 对象，并设置支持的语法。
import MarkdownTransformer from '@atlaskit/editor-markdown-transformer';
const markdownTransformer = new MarkdownTransformer({ supportHtml: true });定义自定义 HTML 标签处理规则
很多时候，我们需要使用自定义 HTML 标签，比如 '<iframe>' 标签。但默认情况下，@atlaskit/editor-markdown-transformer 并不支持这种标签。我们可以定义自己的 HTML 标签处理规则，使得 @atlaskit/editor-markdown-transformer 能够支持这种标签。
-- -------------------- ---- -------
------ ------------------- ---- ----------------------------------------
----- ------------------- - --- ---------------------
-------------- -
------------ -
------ -
-------
--------------------
------------------------
--------------------------
---------------
--------------
--
--
--
-
---在上面的代码中，我们定义了一个 iframe 渲染器，用于渲染 <iframe> 标签。然后通过 nodeRenderers 参数传递进去。
使用自定义 markdown 规则
@atlaskit/editor-markdown-transformer 默认支持常见的 markdown 语法，但我们可以使用自定义规则来扩展其支持的语法。
-- -------------------- ---- -------
------ ------------------- ---- ----------------------------------------
------ - --------- - ---- --------------
----- ------------------- --------- - ---- -- -
------------------------------ --------- ------- ------- -- -
-- ----- ------ ------ ---- -----------
----- ----- - ---------------------
----- ----- - ------------------------------------- -------------------
-- -- -- ------ ------ -----
-- -------- ------ ------
-- -- ------- ---- -- ------- ------- -------- --------- --------
-- -------- ------ -----
-- ---- ----- -- ------- --- -------- --------
--------- -- ----------------
------------- -- --
-- ------ ---- ----- -----
----- ----- - ---------------------
------------ - --------- -- --- ------- ------ -- ------
------------- - --------- -- ------- -------
------ -----
---
------------------------ - -------- ---- -- -
-- ------ ---- ------ --- -----------
------ ------ -----------------------------------------------
--
--
----- ------------------- - --- ---------------------
----------- --------------------
---在上面的代码中，我们定义了一个 custom markdown 规则，用于匹配带有 @ 前缀的用户名，比如 @john. 然后将该规则传递到 extensions 中。
结论
在本文中，我们介绍了 npm 包 @atlaskit/editor-markdown-transformer 的使用方法，以及如何将其应用到实际项目中。我们详细说明了如何设置支持的 markdown 语法、定义自定义的 HTML 标签规则和自定义 markdown 规则。使用这些高级用法，我们可以更加灵活地使用 @atlaskit/editor-markdown-transformer，并自定义规则以适应不同的项目需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaa8cb5cbfe1ea0610501