@mdit/plugin-img-size
支持设置图片尺寸的插件。
使用
import MarkdownIt from "markdown-it";
import { legacyImgSize, imgSize, obsidianImgSize } from "@mdit/plugin-img-size";
// 新格式
const mdNew = new MarkdownIt().use(imgSize);
mdNew.render("");
// Obsidian 格式
const mdObsidian = new MarkdownIt().use(obsidianImgSize);
mdObsidian.render("");
// 旧格式
const mdLegacy = new MarkdownIt().use(legacyImgSize);
mdLegacy.render("");语法
新语法
在图片替代文字后面添加 =widthxheight，并用空格分隔。
width 和 height 都应该是数字，单位为像素，并且都是可选的。也支持单个尾随 % 以使用百分比，设置为 0 的维度将被视为未指定，宽度和高度都为 0 的尺寸将被忽略。
渲染为 ↓
<img src="/example.png" alt="替代文字" width="200" height="300" />
<img src="/example.jpg" alt="替代文字" title="标题" width="200" />
<img src="/example.bmp" alt="替代文字" height="300" />
<img src="/example.webp" alt="替代文字" width="50%" height="300" />Obsidian 语法
在图片替代文字后面添加 widthxheight，并用 | 分隔。
width 和 height 都应该是数字，单位为像素，并且都是必需的。设置其中一个为 0 以按比例缩放另一个。
渲染为 ↓
<img src="/example.png" alt="替代文字" width="200" height="200" />
<img src="/example.jpg" alt="替代文字" width="200" />
<img src="/example.bmp" alt="替代文字" height="300" />旧语法 (已废弃)
在图片链接部分的末尾添加 =widthxheight，并用空格分隔。
width 和 height 都应该是数字，单位为像素，并且都是可选的。也支持单个尾随 % 以使用百分比，设置为 0 的维度将被视为未指定，宽度和高度都为 0 的尺寸将被忽略。
![替代文字](/example.jpg "标题" =200x)
渲染为 ↓
<img src="/example.png" alt="替代文字" width="200" height="300" />
<img src="/example.jpg" alt="替代文字" title="标题" width="200" />
<img src="/example.bmp" alt="替代文字" height="300" />
<img src="/example.webp" alt="替代文字" width="50%" height="300" />- 旧语法在不支持的环境中会导致图片渲染问题（例如：GitHub）
- 新语法和 Obsidian 语法都与 Markdown 标准兼容，但新语法更自然。
示例
示例
<!-- 新语法 -->
<!-- 旧语法 -->
![Logo](/logo.svg "Markdown" =200x200)
![Logo](/logo.svg "Markdown" =150x)
![Logo](/logo.svg "Markdown" =x100)
![Logo](/logo.svg "Markdown" =50%x300)
<!-- Obsidian 语法 -->
