在 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。
npm install markdown-it --save
如何使用 markdown-it-github-headings？
安装完成 markdown-it 后，我们可以安装 markdown-it-github-headings：
npm install markdown-it-github-headings --save
接着，在代码中引入并使用 markdown-it-github-headings：
const md = require('markdown-it')();
const mdgh = require('markdown-it-github-headings');
md.use(mdgh);上面的代码中，我们首先通过 require 引入了 markdown-it 和 markdown-it-github-headings，然后使用 md.use(mdgh) 将 markdown-it-github-headings 插件应用到了 markdown-it 中。
实例演示
下面是一个使用 markdown-it-github-headings 的例子：
# 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 ###### 六级标题
上面的 Markdown 代码会被解释成以下 HTML 代码：
<h1 class="gh-header">一级标题</h1> <h2 class="gh-header">二级标题</h2> <h3 class="gh-header">三级标题</h3> <h4 class="gh-header">四级标题</h4> <h5 class="gh-header">五级标题</h5> <h6 class="gh-header">六级标题</h6>
在渲染出来的页面上，这些标题就会呈现出 GitHub 的样式。
总结
markdown-it-github-headings 可以帮助我们实现各级别标题有不同样式的效果。通过本文的介绍，您已经了解了如何使用该插件。在未来的前端开发中，您可以使用这个插件让您的网站更加美观。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/47310