前言
在前端的开发中，我们经常会用到 markdown 来编写文档和博客。markdown-it-github-preamble 是一款 npm 包，它可以给 markdown 文件添加类似 GitHub README 的前置内容（preamble），包含了项目的介绍、安装、使用、示例等等。
在这篇文章中，我们将讨论如何安装和使用 markdown-it-github-preamble 以及如何定制前置内容和样式。
安装和使用
在开始之前，请确保您已经安装了 Node.js 和 npm。
安装
npm install markdown-it-github-preamble
使用
在您的项目中引入markdown-it-github-preamble，并使用以下的代码创建一个 markdown 渲染器示例：
-- -------------------- ---- -------
----- ---------- - -----------------------
----- ---------------- - ---------------------------------------
----- -- - --- ------------
---------------------- -
-- ------- --
---
----- ------ - -----------
--- ------ ------
---
--------------------然后运行代码。输出应该会是以下内容：
<div class="markdown-body">
<div class="preamble">
<!-- Your GitHub-like content -->
</div>
<h3>Hello, World!</h3>
</div>可选参数
可以使用以下的参数来自定义前置内容：
-- -------------------- ---- -------
----- ------- - -
----- -
---- ---- ---- ------ ---
--
--------- ----------------------- -- ------ ---- --
--------------- ----- ------ ---------- -- - ------ ------- ------
------------- ----- ------ -------- -- - ------ ------- ------
------------------ ----- --------- ---------- -- - --------- ------- ------
--------------- -
------------- -
---- ---- ------- ------- ---
-
-
--定制样式
markdown-it-github-preamble 添加了以下 CSS 类名：
.preamble：前置内容的容器.preamble-title：前置内容的标题.preamble-content：前置内容的内容
您可以使用这些类名来自定义样式。例如，如果您希望将前置内容的标题设置为粗体并突出显示，可以添加以下代码：
.preamble-title {
font-weight: bold;
color: orange;
}示例
下面是一个完整的示例：
-- -------------------- ---- -------
----- ---------- - -----------------------
----- ---------------- - ---------------------------------------
----- -- - --- ------------
---------------------- -
----- -
---------- -- -- ------ ---------
--
--------------- -
------ ---- -
---- -- - -------- --------- ----- -- --- ---- ---------
-
-
---
----- ------ - -----------
- ------ ------
-- -- ------- -------
---
--------------------输出将会是以下内容：
-- -------------------- ---- -------
---- ----------------------
---- -----------------
---------- -- -- ------ ---------
---- -------------------------
--- ---------------------------- -------
---- -------------------------
---- -- - -------- --------- ----- -- --- ---- ---------
------
------
------
---------- -----------
------ ------- ------------
------总结
markdown-it-github-preamble 是一款非常实用的 npm 包，它可以为您的 markdown 文件添加前置内容。在这篇文章中，我们详细讨论了如何安装和使用 markdown-it-github-preamble，以及如何定制前置内容和样式。希望这篇文章可以帮助您更好地利用 markdown-it-github-preamble。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ec181e8991b448dc837