npm 包 markdown-it-plus-image 使用教程

介绍

markdown-it-plus-image 是一个基于 markdown-it 的插件，用于在 markdown 中支持本地图片和网络图片的插入，并提供了一些可选的配置项，可以实现一些额外的功能。

本文将介绍如何安装和使用 markdown-it-plus-image。

安装

markdown-it-plus-image 是一个 npm 包，可以通过以下命令安装：

npm install markdown-it-plus-image --save-dev

使用方法

使用 markdown-it-plus-image 的方法非常简单。只需在 markdown-it 的基础上，添加构造函数即可。

const MarkdownIt = require('markdown-it')
const markdownItPlusImage = require('markdown-it-plus-image')

const md = new MarkdownIt()
md.use(markdownItPlusImage, options)

其中，options 是一个可选的配置对象，可以用来定制图片的路径等。

配置项

markdown-it-plus-image 支持以下配置：

rootPath

默认情况下，markdown-it-plus-image 会将图片路径解析为相对于当前文件所在路径的相对路径。如果需要指定一个根目录，可以设置 rootPath。

md.use(markdownItPlusImage, {
  rootPath: '/path/to/root'
})

这样，所有图片路径都会相对于 /path/to/root 解析。

imagePrefix

如果有一些图片的路径不是以 ./ 或 / 开头，那么就可以使用 imagePrefix 来指定一个前缀。

md.use(markdownItPlusImage, {
  imagePrefix: 'http://example.com/images'
})

这样，在 markdown 中指定图片路径时，可以像这样：

![my image](example.jpg)              // 路径为 http://example.com/images/example.jpg
![my image](subdir/example.jpg)       // 路径为 http://example.com/images/subdir/example.jpg
![my image](http://example.com/example.jpg)   // 路径为 http://example.com/example.jpg

imageSizeLimit

可以使用 imageSizeLimit 限制上传的图片大小。默认值为 5MB。

md.use(markdownItPlusImage, {
  imageSizeLimit: 10,    // 限制为 10MB
})

processImage

可以通过 processImage 自定义图片处理函数。该函数接受一个 Buffer 类型的图片数据，返回一个 Promise 对象，解析为图片的 url。例如：

md.use(markdownItPlusImage, {
  processImage: async (image) => {
    const data = await uploadToServer(image)  // 上传到服务器
    return `/upload/${data.id}`   // 返回图片 url
  },
})

示例

下面是一个示例，假设路径为 /path/to/image.png：

![my image](./image.png)

使用 markdown-it-plus-image 将会解析为：

<img alt="my image" src="/path/to/image.png">

如果 rootPath 为 /root，则会解析为：

<img alt="my image" src="/root/path/to/image.png">

如果 imagePrefix 为 http://example.com/，则会解析为：

<img alt="my image" src="http://example.com/path/to/image.png">

总结

通过上述介绍，相信大家已经了解了如何安装和使用 markdown-it-plus-image 并配置其中的参数，众所周知，图片处理是前端开发中一个比较普遍的需求，希望本文对你有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005607881e8991b448dea2f