介绍
在 Web 开发过程中，Markdown 是一种常用的文本格式，通常用于编写文档、博客、新闻等，而 markdown-it 是一个高效的 Markdown 解析器。但在实际应用中，往往需要针对不同的需求添加外部内容，例如引入其他 Markdown 文件、HTML 片段、图片等。这时候，markdown-it-include 就派上用场了。
markdown-it-include 是一个 markdown-it 插件，可实现在 Markdown 文本中引入内容，从而实现文本复用和拆分。该插件可以非常方便地让 Markdown 文件和 HTML 模板之间互动，将 Markdown 文件和 HTML 模板进行混合，同时支持变量替换和其他插件的扩展。
本文将详细介绍如何安装和使用 markdown-it-include。
安装
npm 是 Node.js 的包管理器，常用于安装依赖包。首先需要在你的项目中安装 markdown-it 和 markdown-it-include，打开终端，切换到你的项目文件夹下并输入以下命令：
npm install markdown-it markdown-it-include
这条命令会在项目中安装 markdown-it 和 markdown-it-include，安装成功后，我们就可以在项目中使用它们了。
使用
markdown-it-include 的使用非常简单，只需要在 Markdown 文本中加上以下语句即可：
<!-- markdown include <relative/path/to/file.md> -->
其中 <relative/path/to/file.md> 是需要引入的文件相对路径，可以是绝对路径或相对路径。注意，只能在 Markdown 文件中这么用。
现在，我们可以用一个简单的示例来说明如何使用 markdown-it-include：
<!-- markdown include ./demo.md --> 这是一个普通的段落。
我们在 Markdown 文本中插入了一个 demo.md 文件。打开 demo.md 文件，添加以下内容：
这是一个被包含的段落。
可以看到，我们在 Markdown 文件中插入了另一个 Markdown 文件。编译后的结果类似于：
<p>这是一个被包含的段落。</p> <p>这是一个普通的段落。</p>
这里我们可以看到，markdown-it-include 将 demo.md 文件中的内容插入到了原始 Markdown 文件中。
变量替换
除了简单的文件包含外，markdown-it-include 可以帮助我们实现变量替换。使用类似：<!-- markdown include ./demo.md?title=My Title&text=My Text -->的语法，我们可以将 Markdown 文本引入，同时替换指定变量值。
举个实例，我们尝试设置两个变量：title 和 text：
<!-- markdown include ./demo.md?title=This is a title&text=This is a paragraph. --> 这是一个普通的段落。
接着在 demo.md 文件中：
# {{ title }}
{{ text }}在 Markdown 中，我们使用 {{ .. }} 语法定义了变量。现在，编译后的结果变成了：
<h1>This is a title</h1> <p>This is a paragraph.</p> <p>这是一个普通的段落。</p>
扩展
markdown-it-include 支持更多的扩展，例如，可以通过使用 include:html 语法来引入 HTML 片段，也可以使用 include:image 语法来引入图片。使用这种方式，你可以将 Markdown 文件和 HTML 模板进行更好的混合，减少重复代码，提高代码复用率。
总结
本文介绍了如何使用 npm 包 markdown-it-include，实现 Markdown 文件复用。我们详细讲解了如何安装和使用 markdown-it-include，以及如何实现变量替换和其他插件的扩展。这些技术点非常实用，能够大大提高代码的复用率，进一步优化项目开发过程。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67441