在 Markdown 中，我们经常使用 # 来表示标题，但是默认情况下，所有级别的标题都只有一种样式。如果我们想要实现不同级别的标题有不同的样式，就需要借助 markdown-it-github-headings 这个 npm 包。
什么是 markdown-it-github-headings？
markdown-it-github-headings 是一个 Markdown 解析器插件，它可以将 Markdown 中的各级标题转化为 GitHub 风格的样式。这个包基于 markdown-it 和 github-style。
在使用 markdown-it-github-headings 之前，我们需要先安装 markdown-it。
--- ------- ----------- ------
如何使用 markdown-it-github-headings？
安装完成 markdown-it 后，我们可以安装 markdown-it-github-headings：
--- ------- --------------------------- ------
接着，在代码中引入并使用 markdown-it-github-headings：
----- -- - ------------------------- ----- ---- - --------------------------------------- -------------
上面的代码中，我们首先通过 require 引入了 markdown-it 和 markdown-it-github-headings，然后使用 md.use(mdgh) 将 markdown-it-github-headings 插件应用到了 markdown-it 中。
实例演示
下面是一个使用 markdown-it-github-headings 的例子：
- ---- -- ---- --- ---- ---- ---- ----- ---- ------ ----
上面的 Markdown 代码会被解释成以下 HTML 代码：
--- --------------------------- --- --------------------------- --- --------------------------- --- --------------------------- --- --------------------------- --- ---------------------------
在渲染出来的页面上，这些标题就会呈现出 GitHub 的样式。
总结
markdown-it-github-headings 可以帮助我们实现各级别标题有不同样式的效果。通过本文的介绍，您已经了解了如何使用该插件。在未来的前端开发中，您可以使用这个插件让您的网站更加美观。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/47310