在前端开发中，Markdown 是一种非常流行的文本格式，它可以用来快速的写出格式清晰、易于阅读的文档。而使用 Markdown.js 这个 npm 包，可以方便地将 Markdown 文本转换成 HTML 格式，以便于在网页上展示。
安装 markdown.js
要使用 markdown.js，首先需要在项目中安装这个 npm 包。在终端中进入项目目录，并输入以下命令进行安装：
npm install markdown
安装完成后，在需要使用的文件中引入 markdown 包：
const markdown = require('markdown').markdown;将 Markdown 转换成 HTML
使用 markdown.js 将 Markdown 转换成 HTML，只需要调用 markdown.toHTML() 函数即可。例如，下面的代码将一个 Markdown 文本字符串转换成 HTML，并将结果输出到控制台：
const mdText = '# Hello, world!\n\nThis is a **bold** text.' const htmlText = markdown.toHTML(mdText); console.log(htmlText);
输出结果为：
<h1>Hello, world!</h1> <p>This is <strong>bold</strong> text.</p>
自定义选项
除了默认的 Markdown 转换规则外，markdown.js 还提供了许多自定义选项，可以用来满足各种不同的需求。例如，可以设置是否启用 GFM（GitHub 风格的 Markdown）、是否转换为 XHTML、是否自动链接 URL 等等。
下面是一些常用的选项，以及它们的默认值：
-- -------------------- ---- ------- ----- ------- - - ---- ----- -- -- --- ------- ----- -- ----------- ---- ------- ------ -- ------- --------- ------ -- --- ---- -- ----------- ----- -- ----------- ------ ------ -- --- ----- ----------- ------------ -- ---- --- --- -------- ----- -- ----- --- --
可以将这些选项传递给 markdown.toHTML() 函数，以覆盖默认值。例如，下面的代码将一个 Markdown 文本字符串转换成 HTML，启用了 GFM，并设置代码块的 CSS 类前缀为 code-：
const mdText = '| Tables | Are | Cool |\n| --- | --- | --- |\n| col 1 is | left-aligned | $1600 |\n| col 2 is | centered | $12 |\n| col 3 is | right-aligned | $1 |\n';
const options = {
gfm: true,
langPrefix: 'code-'
};
const htmlText = markdown.toHTML(mdText, options);
console.log(htmlText);输出结果为：
-- -------------------- ---- ------- ------- ------- ---- --------------- ------------ ------------- ----- -------- ------- ---- ------- - ------- --- ----------------------------------------- -------------- ----- ---- ------- - ------- --- --------------------------------------- ------------ ----- ---- ------- - ------- --- ------------------------------------------- ----------- ----- -------- --------
总结
使用 markdown.js，可以方便地将 Markdown 转换成 HTML 格式，并且还提供了许多自定义选项。无论是在个人博客、团队 Wiki，或者是在线文档系统中，Markdown 都是一种非常实用的格式。希望这篇教程能够对初学者有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/32722