# @gby/markdown-it-import

> markdown-it-import 是一个可让 markdown-it 支持导入 import 功能的插件，兼容 VitePress、VuePress，可扩展、可自定导入语法，超级可配置，默认使用 Markdown Preview Enhanced 的导入语法

Latest version **1.0.0** (published 2023-09-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install @gby/markdown-it-import
pnpm add @gby/markdown-it-import
yarn add @gby/markdown-it-import
bun add @gby/markdown-it-import
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2023-09-20 |
| First published | 2023-09-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 23.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | 郭斌勇 |
| Maintainers | guobinyong |
| Keywords | markdown, markdown-it, markdown-it-plugin, vitepress, vitepress-plugin, VuePress, VitePress Plugin, import, Markdown Preview Enhanced, MPE, 自定义导入语法, 导入插件 |

## Links

- npm: https://www.npmjs.com/package/@gby/markdown-it-import
- Repository: https://github.com/GuoBinyong/markdown-it-import
- Homepage: https://github.com/GuoBinyong/markdown-it-import#readme
- Issues: https://github.com/GuoBinyong/markdown-it-import/issues
- npm.io page: https://npm.io/package/@gby/markdown-it-import

## Dependencies (1)

- [@types/node](https://npm.io/package/@types/node.md) ^20.6.0

## Alternatives

- [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads
- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads

## Recent versions

- 1.0.0 (latest) — 2023-09-20

## README

[教程]: ./doc/教程.md
[API接口文档]: ./doc/api/index.md

[GitHub仓库]: https://github.com/GuoBinyong/markdown-it-import
[发行地址]: https://github.com/GuoBinyong/markdown-it-import/releases
[issues]: https://github.com/GuoBinyong/markdown-it-import/issues

[码云仓库]: https://gitee.com/guobinyong/markdown-it-import

[markdown-it]: https://markdown-it.github.io/markdown-it

[Markdown Preview Enhanced]: https://shd101wyy.github.io/markdown-preview-enhanced/#/zh-cn/file-imports

[VitePress]: https://vitepress.dev/

[VuePress]: https://vuepress.vuejs.org/

**目录**  

<!-- @import "[TOC]" {cmd="toc" depthFrom=1 depthTo=6 orderedList=false} -->

<!-- code_chunk_output -->

- [1. 背景](#1-背景)
- [2. 简介](#2-简介)
- [3. 安装方式](#3-安装方式)
  - [3.1. 方式1：通过 npm 安装](#31-方式1通过-npm-安装)
  - [3.2. 方式3：通过`<script>`标签引入](#32-方式3通过script标签引入)
- [4. 教程](#4-教程)
- [5. API接口文档](#5-api接口文档)

<!-- /code_chunk_output -->


---------------------


# 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

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

```shell
pnpm add -D @gby/markdown-it-import
```
:::


# 4. 教程
详情跳转至[教程][]

## markdown-it

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

const md = new MarkdownIt();

md.use(importPlugin);

```
也可以传递一个选项
```ts
// 也可以给插件传递一些选项
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的配置中添加以下配置
```js
import {importPlugin} from "@gby/markdown-it-import"

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

# 5. API接口文档
详情跳转至[API接口文档][]



--------------------

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

![赞赏码](https://i.loli.net/2020/04/08/PGsAEqdJCin1oQL.jpg)

---
_Source: https://npm.io/package/@gby/markdown-it-import · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._