简介
在前端开发中，我们经常需要使用 markdown 格式来编写文档、文献等内容。而在编写 markdown 文件时，如果需要插入图片，我们也需要通过某种方式实现。markdown-it-contained-image是一个优秀的 npm 包，用于在 markdown 中引入图像。本篇文章将为大家详细介绍这个包的使用。
安装
使用 npm 进行安装，通过以下命令来安装：
npm install markdown-it-contained-image --save
使用
- 引入
markdown-it-contained-image包
针对应用程序，我们需要在代码中引入 markdown-it-contained-image 包：
var markdown = require('markdown-it')();
var miContainer = require('markdown-it-container');
var miImage = require('markdown-it-contained-image');
markdown.use(miImage);
markdown.use(miContainer);- 插入图片
使用 markdown-it-contained-image 后，在 markdown 中插入图片的语法如下：
:::image [name] [class] [align] [width] [height] path :::
- 参数说明
在上述示例中，:::image 和 ::: 之间的部分被称为容器，因此，我们需要通过容器来指定图片的属性。以下是针对容器不同属性的详细说明：
name：（可选） 该参数用于指定图片的名称，名称用于识别图像以及为其创建 ID 和类。如果不提供名称，则包名称（如 image-0）将用作名称。class：（可选） 该参数用于指定应用于图像的 CSS 类名称。如果需要更改图像或指定自定义样式，请使用此选项。align：（可选） 该参数用于指定图像应水平对齐的位置。有效值为左、居中和右。width：（可选） 该参数用于指定图像的宽度（以像素为单位）。height：（可选） 该参数用于指定图像的高度（以像素为单位）。path：（必填） 该参数用于指定图像的路径。请注意，此路径必须指向图像的有效 URL。
示例
下面是一个完整的示例，用于说明如何使用 markdown-it-contained-image 包来使用 markdown 插入图片：
:::image example-class center 400 400 path/to/image.jpg :::
在上述示例中：
example-class被用作图片的类名，以便在 CSS 中定义样式。center被用作对齐方式。400表示图片宽度。400表示图片高度。path/to/image.jpg被用作图片的路径。
总结
markdown-it-contained-image 包是一个很好的 npm 包，可以简化插入 markdown 图片的过程。有了这个包，我们可以更轻松地创建图像容器，并指定图像的属性。希望本文能够帮助大家更轻松地使用 markdown 插入图片。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ec081e8991b448dc7df