feat(plugin-markdown-image)!: rebuild img size (close #445)

docs/.vuepress/configs/plugins.ts

@@ -51,6 +51,7 @@ export const plugins = [
     figure: true,
     mark: true,
     size: true,
+    legacySize: true,
   }),
   markdownIncludePlugin({
     deep: true,

docs/plugins/markdown/markdown-image.md

@@ -68,6 +68,48 @@ interface ImageMarkOptions {
 
 ### Image Size
 
+You can use `|widthxheight` to specify the image size at the end of image alt.
+
+Both `width` and `height` should be number which means size in pixels, and both of them are optional (set `0` to indicate ignore).
+
+If you want the same behavior as Obsidian, you can pass `{ strict: true }` in plugin options. Now both `width` and `height` are both required to be set (one of them can be `0` to scale with radio according to the other).
+
+```md
+![Logo|200x200](/example.png)
+
+![Logo|200x0](/example.jpg)
+![Logo|0x300](/example.bmp)
+
+<!-- These won't work when `strict: true` as obsidian does not support them -->
+
+![Logo|200](/example.jpg)
+![Logo|200x](/example.jpg)
+![Logo|x300](/example.bmp)
+```
+
+will be parsed as:
+
+```html
+<img src="/example.png" width="200" height="300" />
+
+<img src="/example.jpg" width="200" />
+<img src="/example.bmp" height="300" />
+
+<img src="/example.jpg" width="200" />
+<img src="/example.jpg" width="200" />
+<img src="/example.bmp" height="300" />
+```
+
+### Image Size (legacy)
+
+::: tip
+
+You shall prefer the new grammar, as it's not breaking backward compatibility.
+
+The legacy grammar will break image rendering in environment that doesn't support it, such as GitHub.
+
+:::
+
 You can use `=widthxheight` to specify the image size when setting `size: true` in plugin options.
 
 ```md
@@ -146,10 +188,10 @@ If the image is standalone in a line, wrapped or not wrapped by link, it will be
 - Details:
   Whether enable image size support.
 
-### obsidianSize
+### legacySize
 
 - Type: `boolean`
-- Details: Whether enable Obsidian image size support.
+- Details: Whether enable legacy image size support.
 
 <script setup>
 import VPToggleColorModeButton from '@theme/VPToggleColorModeButton.vue'

docs/zh/plugins/markdown/markdown-image.md

@@ -68,6 +68,48 @@ interface ImageMarkOptions {
 
 ### 图片尺寸
 
+你可以在图片链接末尾使用 `|widthxheight` 来指定图片尺寸。
+
+`width` 和 `height` 都应该为数字并意味着像素单位的尺寸，并且它们两者都是可选的（设置 `0` 来表示忽略）。
+
+如果你想要与 Obsidian 相同的行为，你可以在插件选项中传递 `{ strict: true }`。现在 `width` 和 `height` 都必须被设置（其中一个可以是 `0` 来根据另一个按比例缩放）。
+
+```md
+![Logo|200x200](/example.png)
+
+![Logo|200x0](/example.jpg)
+![Logo|0x300](/example.bmp)
+
+<!-- These won't work when `strict: true` as obsidian does not support them -->
+
+![Logo|200](/example.jpg)
+![Logo|200x](/example.jpg)
+![Logo|x300](/example.bmp)
+```
+
+会被解析为:
+
+```html
+<img src="/example.png" width="200" height="300" />
+
+<img src="/example.jpg" width="200" />
+<img src="/example.bmp" height="300" />
+
+<img src="/example.jpg" width="200" />
+<img src="/example.jpg" width="200" />
+<img src="/example.bmp" height="300" />
+```
+
+### 图片尺寸 (旧版)
+
+::: tip
+
+你应该选择新语法，因为它不会破坏向后兼容性。
+
+旧语法会在不支持的环境中破坏图片渲染，例如 GitHub。
+
+:::
+
 当你在插件选项中设置 `size: true` 时，可以使用 `=widthxheight` 指定图像大小。
 
 ```md
@@ -145,10 +187,10 @@ interface ImageMarkOptions {
 - 类型：`boolean`
 - 详情：是否启用图片尺寸支持。
 
-### obsidianImgSize
+### legacySize
 
 - 类型：`boolean`
-- 详情：是否启用 Obsidian 图片尺寸支持。
+- 详情：是否启用旧版图片尺寸支持。
 
 <script setup>
 import VPToggleColorModeButton from '@theme/VPToggleColorModeButton.vue'

plugins/markdown/plugin-markdown-image/package.json

@@ -47,10 +47,10 @@
     "style": "sass src:lib --embed-sources --style=compressed --pkg-importer=node"
   },
   "dependencies": {
-    "@mdit/plugin-figure": "^0.16.0",
-    "@mdit/plugin-img-lazyload": "^0.16.0",
-    "@mdit/plugin-img-mark": "^0.16.0",
-    "@mdit/plugin-img-size": "^0.16.0",
+    "@mdit/plugin-figure": "^0.17.0",
+    "@mdit/plugin-img-lazyload": "^0.17.0",
+    "@mdit/plugin-img-mark": "^0.17.0",
+    "@mdit/plugin-img-size": "^0.17.0",
     "@types/markdown-it": "^14.1.2",
     "@vuepress/helper": "workspace:*"
   },

plugins/markdown/plugin-markdown-image/src/node/markdownImagePlugin.ts

@@ -2,7 +2,7 @@ import { figure } from '@mdit/plugin-figure'
 import { imgLazyload } from '@mdit/plugin-img-lazyload'
 import type { MarkdownItImgMarkOptions } from '@mdit/plugin-img-mark'
 import { imgMark } from '@mdit/plugin-img-mark'
-import { imgSize, obsidianImageSize } from '@mdit/plugin-img-size'
+import { imgSize, legacyImgSize } from '@mdit/plugin-img-size'
 import type { Plugin } from 'vuepress/core'
 import { isPlainObject } from 'vuepress/shared'
 import type { MarkdownImagePluginOptions } from './options.js'
@@ -19,8 +19,8 @@ export const markdownImagePlugin = (
 
     if (options.figure) md.use(figure)
     if (options.lazyload) md.use(imgLazyload)
-    if (options.obsidianSize) md.use(obsidianImageSize)
     if (options.size) md.use(imgSize)
+    if (options.legacySize) md.use(legacyImgSize)
     if (mark)
       md.use<MarkdownItImgMarkOptions>(imgMark, isPlainObject(mark) ? mark : {})
   },

plugins/markdown/plugin-markdown-image/src/node/options.ts

@@ -39,11 +39,11 @@ export interface MarkdownImagePluginOptions {
   size?: boolean
 
   /**
-   * Whether to enable obsidian image size mark support
+   * Whether to enable legacy image size mark support
    *
-   * 是否启用 obsidian 图片大小标记支持。
+   * 是否启用旧版图片大小标记支持。
    *
    * @default false
    */
-  obsidianSize?: boolean
+  legacySize?: boolean
 }