feat(md-enhance): add imageSize option, close #1929

vuepress-theme-hope · Jun 1, 2022 · d48cc56 · d48cc56
1 parent 68bd24b
commit d48cc56
Show file tree

Hide file tree

Showing 14 changed files with 662 additions and 94 deletions.
diff --git a/docs/md-enhance/src/.vuepress/sidebar.ts b/docs/md-enhance/src/.vuepress/sidebar.ts
@@ -17,6 +17,7 @@ export const enSidebarConfig = sidebar({
         "footnote",
         "mark",
         "tasklist",
+        "image",
         "include",
         "chart",
         "echarts",
@@ -56,6 +57,7 @@ export const enSidebarConfig = sidebar({
     "footnote",
     "mark",
     "tasklist",
+    "image",
     "include",
     "chart",
     "echarts",
@@ -98,6 +100,7 @@ export const zhSidebarConfig = sidebar({
         "footnote",
         "mark",
         "tasklist",
+        "image",
         "include",
         "chart",
         "echarts",
@@ -137,6 +140,7 @@ export const zhSidebarConfig = sidebar({
     "footnote",
     "mark",
     "tasklist",
+    "image",
     "include",
     "chart",
     "echarts",

diff --git a/docs/md-enhance/src/README.md b/docs/md-enhance/src/README.md
@@ -54,6 +54,11 @@ features:
     details: Use tasklist in Markdown
     link: /guide/tasklist.html
 
+  - title: image syntax
+    icon: pic
+    details: improve syntax to specify size and color scheme
+    link: /guide/image.html
+
   - title: Chart Support
     icon: rank
     details: Display charts in Markdown

diff --git a/docs/md-enhance/src/guide/README.md b/docs/md-enhance/src/guide/README.md
@@ -122,6 +122,12 @@ You can mark ==important words== .
 
 - [View Detail](tasklist.md)
 
+### Image Enhancement
+
+Support setting color scheme and size
+
+- [View Detail](image.md)
+
 ### Chart
 
 ::: chart A Scatter Chart
@@ -158,6 +164,32 @@ You can mark ==important words== .
 
 - [View Detail](chart.md)
 
+## Echarts
+
+::: echarts A line chart
+
+```json
+{
+  "xAxis": {
+    "type": "category",
+    "data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
+  },
+  "yAxis": {
+    "type": "value"
+  },
+  "series": [
+    {
+      "data": [150, 230, 224, 218, 135, 147, 260],
+      "type": "line"
+    }
+  ]
+}
+```
+
+:::
+
+- [View Detail](echarts.md)
+
 ### Flowchart
 
 ```flow

diff --git a/docs/md-enhance/src/guide/image.md b/docs/md-enhance/src/guide/image.md
@@ -0,0 +1,108 @@
+---
+title: Image
+icon: pic
+---
+
+Improve image syntax in Markdown to support color scheme and size.
+
+<!-- more -->
+
+## Config
+
+::: code-tabs#language
+
+@tab TS
+
+```ts {7-10}
+// .vuepress/config.ts
+import { mdEnhancePlugin } from "vuepress-plugin-md-enhance";
+
+export default {
+  plugins: [
+    mdEnhancePlugin({
+      // Enable image mark
+      imageMark: true,
+      // Enable image size
+      imageSize: true,
+    }),
+  ],
+};
+```
+
+@tab JS
+
+```js {7-10}
+// .vuepress/config.js
+const { mdEnhancePlugin } = require("vuepress-plugin-md-enhance");
+
+module.exports = {
+  plugins: [
+    mdEnhancePlugin({
+      // Enable image mark
+      imageMark: true,
+      // Enable image size
+      imageSize: true,
+    }),
+  ],
+};
+```
+
+:::
+
+## Image Mark
+
+GFM supports marking pictures by ID suffix so that pictures are only displayed in a specific mode. We support both GitHub’s markup and the easy markup `#light` and `#dark`.
+
+You can enable it using `imageMark` option.
+
+```md
+![GitHub Light](/assets/icon/github-light.png#gh-dark-mode-only)
+![GitHub Dark](/assets/icon/github-dark.png#gh-light-mode-only)
+
+![GitHub Light](/assets/icon/github-light.png#dark)
+![GitHub Dark](/assets/icon/github-dark.png#light)
+```
+
+::: details Case
+
+The above demo will render the following result
+
+![GitHub Light](/assets/icon/github-light.png#gh-dark-mode-only)
+![GitHub Dark](/assets/icon/github-dark.png#gh-light-mode-only)
+
+![GitHub Light](/assets/icon/github-light.png#dark)
+![GitHub Dark](/assets/icon/github-dark.png#light)
+
+:::
+
+### Advanced
+
+You can pass an object to `imageMark` to config ID marks, available options are:
+
+```ts
+interface ImageMarkOptions {
+  /** lightmode only IDs */
+  light?: string[];
+  /** darkmode only IDs */
+  dark?: string[];
+}
+```
+
+## Image Size
+
+You can use `=widthxheight` to specify the image size when setting `imageSize: true` in plugin options.
+
+```md
+![Alt](/example.png =200x300)
+
+![Alt](/example.jpg "Image title" =200x)
+![Alt](/example.bmp =x300)
+```
+
+The above markdown will be parsed as:
+
+```html
+<img src="/example.png" width="200" height="300" />
+<img src="/example.jpg" title="Image title" width="200" />
+<img src="/example.bmp" height="300" />
+```
diff --git a/docs/md-enhance/src/guide/others.md b/docs/md-enhance/src/guide/others.md
@@ -9,63 +9,24 @@ icon: more
 
 You can customize this feature through `linkCheck` in plugin options, and you can choose from `'always'`, `'never'`, `'dev'` and `'build'`.
 
-## v-pre
+## GFM
 
-Since VuePress2 has removed V1’s v-pre container in core, the plugin provides an option to support it. That is, you can use any Mustache syntax in the container below.
+If your docs both serve on documentation site and directly on GitHub, we provide a `gfm` option to align your Markdown behavior with GitHub.
 
-```md
-::: v-pre
+::: note
 
-{{ abc }}
+Custom container is enabled by default in `@vuepress/theme-default` and `vuepress-theme-hope`, but not available in GitHub Markdown preview.
 
 :::
-```
-
-## Image Mark
 
-GFM supports marking pictures by ID suffix so that pictures are only displayed in a specific mode. We support both GitHub’s markup and the easy markup `#light` and `#dark`.
+## v-pre
 
-You can enable it using `imageMark` option.
+Since VuePress2 has removed V1’s v-pre container in core, the plugin provides an option to support it. That is, you can use any Mustache syntax in the container below.
 
 ```md
-![GitHub Light](/assets/icon/github-light.png#gh-dark-mode-only)
-![GitHub Dark](/assets/icon/github-dark.png#gh-light-mode-only)
-
-![GitHub Light](/assets/icon/github-light.png#dark)
-![GitHub Dark](/assets/icon/github-dark.png#light)
-```
-
-::: details case
-
-The above demo will render the following result
-
-![GitHub Light](/assets/icon/github-light.png#gh-dark-mode-only)
-![GitHub Dark](/assets/icon/github-dark.png#gh-light-mode-only)
+::: v-pre
 
-![GitHub Light](/assets/icon/github-light.png#dark)
-![GitHub Dark](/assets/icon/github-dark.png#light)
+{{ abc }}
 
 :::
-
-### Advanced
-
-You can pass an object to `imageMark` to config ID marks, available options are:
-
-```ts
-interface ImageMarkOptions {
-  /** lightmode only IDs */
-  light?: string[];
-  /** darkmode only IDs */
-  dark?: string[];
-}
 ```
-
-## GFM
-
-If your docs both serve on documentation site and directly on GitHub, we provide a `gfm` option to align your Markdown behavior with GitHub.
-
-::: note
-
-Custom container is enabled by default in `@vuepress/theme-default` and `vuepress-theme-hope`, but not available in GitHub Markdown preview.
-
-:::
diff --git a/docs/md-enhance/src/zh/README.md b/docs/md-enhance/src/zh/README.md
@@ -54,6 +54,11 @@ features:
     details: 在 Markdown 中使用任务列表
     link: /zh/guide/tasklist.html
 
+  - title: 图片语法
+    icon: pic
+    details: 使用改进的语法指定图片大小与颜色模式
+    link: /zh/guide/image.html
+
   - title: 图表支持
     icon: rank
     details: 在 Markdown 中展示图表

diff --git a/docs/md-enhance/src/zh/guide/README.md b/docs/md-enhance/src/zh/guide/README.md
@@ -120,6 +120,12 @@ npm i -D vuepress-plugin-md-enhance@next
 
 - [查看详情](tasklist.md)
 
+### 图片增强
+
+支持设置颜色模式和大小
+
+- [查看详情](image.md)
+
 ### 图表
 
 ::: chart 一个散点图案例
@@ -156,6 +162,32 @@ npm i -D vuepress-plugin-md-enhance@next
 
 - [查看详情](chart.md)
 
+## Echarts
+
+::: echarts 一个折线图案例
+
+```json
+{
+  "xAxis": {
+    "type": "category",
+    "data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
+  },
+  "yAxis": {
+    "type": "value"
+  },
+  "series": [
+    {
+      "data": [150, 230, 224, 218, 135, 147, 260],
+      "type": "line"
+    }
+  ]
+}
+```
+
+:::
+
+- [查看详情](echarts.md)
+
 ### 流程图
 
 ```flow