@gby/markdown-it-import v1.0.0

目录

• 1. 背景
• 2. 简介
• 3. 安装方式
  • 3.1. 方式1：通过 npm 安装
  • 3.2. 方式3：通过<script>标签引入
• 4. 教程
• 5. API接口文档

1. 背景

假如你想在自己的所有文章下面都加上一段个人简介，而个人简介的内容都是相同的，一种方案是复制粘贴！但如果后来你更新的个人简介，你就需要在去更新每个文档！

更好的方案是：个人简介单独写在一个文档中，假设文档的路径是 片段/个人简介.md，每篇文章只需要导入该文档，如： @import "片段/个人简介.md" Markdown 渲染引擎就会自动内联该文档的内容；当我们需要更新 个人简介 时，只需在 片段/个人简介.md 这个文档中更新一次即可，其它导入该文档的文档都会自动更新！

若要实现这个方案，就需要对 Markdown 的语法进行扩展！所以，本插件诞生了！

2. 简介

本库是 markdown-it 的一个插件，专门用于扩展 markdown-it 导入语法，它有以下特性：

具有以下特性：

• 导入文件时支持定义选项
• 可以完全自定义导入语法，实现自己的导入规则
• 对于 .md 格式的文件可以选择是导入为代码块，还是内联
• 默认实现了 Markdown Preview Enhanced 的导入语法
• 兼容 VitePress 和 VuePress
• TypeScript 编写

详情请看：

• 主页：https://github.com/GuoBinyong/markdown-it-import
• GitHub仓库
• 码云仓库
• 教程
• API接口文档

如果您在使用的过程中遇到了问题，或者有好的建议和想法，您都可以通过以下方式联系我，期待与您的交流：

• 给该仓库提交 issues
• 给我 Pull requests
• 邮箱：guobinyong@qq.com
• 微信：keyanzhe

3. 安装方式

::: code-group

npm install --save-dev @gby/markdown-it-import

pnpm add -D @gby/markdown-it-import

:::

4. 教程

详情跳转至教程

markdown-it

import MarkdownIt from "markdown-it"
import importPlugin from "../dist/markdown-it-import.mjs";

const md = new MarkdownIt();

md.use(importPlugin);

也可以传递一个选项

// 也可以给插件传递一些选项
md.use(importPlugin,{
    /**
     * 导入信息的获取函数
     * @defaultValue 支持vitePress 路径的 getInfo_MPE ，Markdown Preview Enhanced 导入信息获取函数选项的函数
     */
    getInfo?:function(lineText:string,state:State, startLine: number, endLine: number, silent: boolean){
      // 自定义导入语法的解析
      return {
         // 配置相应的参数
      }
    };
    /**
     * 当导入的文件是 md 文件时，是否总是包含 md 文件，而不是渲染为代码块
     * 
     * @defaultValue true
     */
    includeMD:true;
});

VitePress

在VitePress的配置中添加以下配置

import {importPlugin} from "@gby/markdown-it-import"

export default {
  markdown:{
    config:(md)=>{
      md.use(importPlugin)
    }
  }
}

5. API接口文档

详情跳转至API接口文档

有您的支持，我会在开源的道路上，越走越远