Markdown 是一种轻量级的标记语言，它被广泛地用于编写软件文档、日记、笔记以及博客文章等文本内容。在前端开发中，Markdown 可以用来书写技术文档和项目文档，为了更加方便的生成美观的 Markdown 文档，我们可以使用 npm 包 Super-Markdown。
什么是 super-markdown
Super-Markdown 是一个可以将 Markdown 文本转换为 HTML 的 npm 包，它提供了非常多的基于 CSS 样式的定制化配置选项，使得我们可以轻松地定制化生成的 HTML。
安装 super-markdown
在安装 super-markdown 之前，我们需要先安装 Node.js 和 npm。安装好之后，打开终端并输入以下命令：
npm install super-markdown --save
使用 super-markdown
使用 super-markdown 主要有以下两个步骤：
- 在 HTML 文件中添加必要的元素和引入 CSS 文件。
- 在 JavaScript 中引入 super-markdown 并调用相关 API。
HTML 文件
打开 HTML 文件，并添加以下元素：
<div id="markdown-container"></div>
这个 div 元素就是用来承载最后生成的 HTML 的，我们可以根据自己的需求来更改 id 和样式。
接着，我们需要在 HTML 中引入 super-markdown 生成的 CSS 文件：
<link rel="stylesheet" href="node_modules/super-markdown/dist/css/super-md.css">
JavaScript 文件
接下来，在 JavaScript 文件中引入 super-markdown 并调用 API：
-- -------------------- ---- ------- ------ ------------- ---- ---------------- ----- -------- - - - ----- ----- ---- -- -------- --- -------- ----- - ----- ------------- - --- --------------- ------------ ------ ----------------- ---------------- ------ --------- -- ------------------------------------------------------- - -------------------------------
首先，我们引入了 SuperMarkdown 类，然后创建了一个名为 markdown 的变量，这个变量保存了待转换的 Markdown 文本。
接着，我们创建了一个 SuperMarkdown 实例，并传递了必要的配置项：
htmlWrapper：指定最后生成的 HTML 标签，默认值为div。htmlWrapperClass：指定最后生成的 HTML 标签的类名，默认值为super-md-wrap。theme：指定渲染样式，默认值为default。
最后，我们通过调用 superMarkdown.convert(markdown) 方法获取生成的 HTML，并将其插入到之前创建的 div 元素中。
配置项
htmlWrapper（string）：指定最后生成的 HTML 标签，默认值为div。htmlWrapperClass（string）：指定最后生成的 HTML 标签的类名，默认值为super-md-wrap。theme（string）：指定渲染样式，默认值为default。customCSS（string）：指定一些自定义的 CSS 样式。showTableOfContents（boolean）：是否显示目录，默认值为false。removeH1Style（boolean）：是否移除一级标题的样式，默认值为true。hljs（boolean）：是否开启代码高亮，默认值为true。highlight（function）：自定义代码高亮函数，需要使用 highlight.js，默认值为null。
示例代码
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- --------------------- --------------- ----- ---------------- --------------------------------------------------------- ------- ------ ---- ------------------------------ ------- ----------------------- ------- -------
-- -------------------- ---- ------- ------ ------------- ---- ---------------- ----- -------- - - - ----- ----- ---- -- -------- --- -------- ----- -- ----- -- -------- - ----------------------------- - --------------- -- ------------ -- ------- --------------- --- --- --- ---- ---------- --- ------- -------------- ------ ------ -- ----- -------------- --- -- ---- ------ -- ---- ---------- ----- ---------------- ----- ------------- - --- --------------- ------------ ------ ----------------- ---------------- ------ --------- -- ------ - ----- ------------- - --- --------------- ------------ ------ ----------------- ---------------- ------ --------- -- ------------------------------------------------------- - -------------------------------
通过以上代码，我们可以看到在 HTML 中创建了一个 div 元素用来承载最后生成的 HTML，在 JavaScript 中创建了一个 SuperMarkdown 实例，并将待转换的 Markdown 文本传递到了 convert() 方法中。在最终的结果中，我们成功地将 Markdown 文本转换成了 HTML，并且通过 CSS 样式进行了渲染。
总结
Super-Markdown 是一个非常方便的 npm 包，通过它我们可以轻松地将 Markdown 文本转换为 HTML，并且通过 CSS 样式进行渲染，生成的 Markdown 文档非常美观。在实际开发中，我们应该结合自己的实际需求来使用 Super-Markdown，并且可以进行样式的定制化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005574c81e8991b448d4443