feat(md-enhance): extract plugins and use @mdit/plugin-xxx

BREAKING CHANGE: `imageLazyload` is renamed to `imgLazyload` `imageSize` is renamed to `imgSize` `imageMark` is renamed to `imgMark`
vuepress-theme-hope · Dec 28, 2022 · 6e91afe · 6e91afe
1 parent 94cf916
commit 6e91afe
Show file tree

Hide file tree

Showing 98 changed files with 400 additions and 7,523 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -62,6 +62,7 @@
     "livescript",
     "mailchimp",
     "mathjax",
+    "mdit",
     "npmmirror",
     "nprogress",
     "pandoc",

diff --git a/demo/md-enhance/src/.vuepress/config.ts b/demo/md-enhance/src/.vuepress/config.ts
@@ -71,9 +71,9 @@ export default defineUserConfig({
       figure: true,
       flowchart: true,
       gfm: true,
-      imageLazyload: true,
-      imageMark: true,
-      imageSize: true,
+      imgLazyload: true,
+      imgMark: true,
+      imgSize: true,
       include: true,
       mark: true,
       mermaid: true,

diff --git a/demo/theme-blog/src/.vuepress/theme.ts b/demo/theme-blog/src/.vuepress/theme.ts
@@ -180,8 +180,8 @@ export default hopeTheme({
       figure: true,
       flowchart: true,
       gfm: true,
-      imageLazyload: true,
-      imageSize: true,
+      imgLazyload: true,
+      imgSize: true,
       include: true,
       katex: true,
       mark: true,

diff --git a/demo/theme-docs/src/.vuepress/theme.ts b/demo/theme-docs/src/.vuepress/theme.ts
@@ -107,8 +107,8 @@ export default hopeTheme({
       figure: true,
       flowchart: true,
       gfm: true,
-      imageLazyload: true,
-      imageSize: true,
+      imgLazyload: true,
+      imgSize: true,
       include: true,
       katex: true,
       mark: true,

diff --git a/docs/md-enhance/src/.vuepress/theme.ts b/docs/md-enhance/src/.vuepress/theme.ts
@@ -27,9 +27,9 @@ export default theme("md-enhance", {
       figure: true,
       flowchart: true,
       gfm: true,
-      imageLazyload: true,
-      imageMark: true,
-      imageSize: true,
+      imgLazyload: true,
+      imgMark: true,
+      imgSize: true,
       include: true,
       katex: true,
       mark: true,

diff --git a/docs/md-enhance/src/README.md b/docs/md-enhance/src/README.md
@@ -177,26 +177,3 @@ export default {
 ## Migrating from V1
 
 For details, see [Migration Guide](./migration.md).
-
-## Advanced
-
-This plugin exports the following Markdown-it plugin, and you can use them in other projects.
-
-- align
-- attrs
-- container
-- figure
-- footnote
-- imageLazyload
-- imageMark
-- imageSize
-- include
-- mathjax
-- katex
-- mark
-- stylize
-- sub
-- sup
-- tasklist
-- tex
-- uml
diff --git a/docs/md-enhance/src/config.md b/docs/md-enhance/src/config.md
@@ -166,14 +166,14 @@ Whether to enable mark support.
 
 Whether enable figure support.
 
-## imageLazyload
+## imgLazyload
 
 - Type: `boolean`
 - Default: `false`
 
 Whether to lazy load every images in page in native way.
 
-## imageMark
+## imgMark
 
 - Type: `ImageMarkOptions | boolean`
 - Default: `false`
@@ -189,7 +189,7 @@ interface ImageMarkOptions {
 }
 ```
 
-## imageSize
+## imgSize
 
 - Type: `boolean`
 - Default: `false`

diff --git a/docs/md-enhance/src/guide/image.md b/docs/md-enhance/src/guide/image.md
@@ -23,11 +23,11 @@ export default {
       // Enable figure
       figure: true,
       // Enable image lazyload
-      imageLazyload: true,
+      imgLazyload: true,
       // Enable image mark
-      imageMark: true,
+      imgMark: true,
       // Enable image size
-      imageSize: true,
+      imgSize: true,
     }),
   ],
 };
@@ -45,11 +45,11 @@ export default {
       // Enable figure
       figure: true,
       // Enable image lazyload
-      imageLazyload: true,
+      imgLazyload: true,
       // Enable image mark
-      imageMark: true,
+      imgMark: true,
       // Enable image size
-      imageSize: true,
+      imgSize: true,
     }),
   ],
 };
@@ -59,7 +59,7 @@ export default {
 
 ## Image Lazyload
 
-If you want to lazyload images in your pages, you can set `imageLazyload: true` in plugin options.
+If you want to lazyload images in your pages, you can set `imgLazyload: true` in plugin options.
 
 ::: note
 
@@ -71,7 +71,7 @@ We are enabling lazyload using native HTML5 features, so your browser must suppo
 
 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.
+You can enable it using `imgMark` option.
 
 ```md
 ![GitHub Light](/assets/icon/github-light.png#gh-dark-mode-only)
@@ -97,7 +97,7 @@ The above demo will render the following result
 
 ### Advanced
 
-You can pass an object to `imageMark` to config ID marks, available options are:
+You can pass an object to `imgMark` to config ID marks, available options are:
 
 ```ts
 interface ImageMarkOptions {
@@ -110,7 +110,7 @@ interface ImageMarkOptions {
 
 ## Image Size
 
-You can use `=widthxheight` to specify the image size when setting `imageSize: true` in plugin options.
+You can use `=widthxheight` to specify the image size when setting `imgSize: true` in plugin options.
 
 ```md
 ![Alt](/example.png =200x300)

diff --git a/docs/md-enhance/src/guide/stylize.md b/docs/md-enhance/src/guide/stylize.md
@@ -181,7 +181,7 @@ export default {
 
 :::
 
-If you want to skip some words in some pages, you can set `noStylize` in page frontmatter with an array containing content you don’t want to stylize.
+Also, you can use `stylize` in frontmatter to provide extra stylize rules for content of the page.
 
 ::: info Performance
 

diff --git a/docs/md-enhance/src/migration.md b/docs/md-enhance/src/migration.md
@@ -17,7 +17,7 @@ You can pass the second argument `true` to enable legacy mode when calling `mdEn
 
 - image mark support
 
-  Use `#light` and `#dark` suffix to mark images to display them in light mode or dark mode via `imageMark` option.
+  Use `#light` and `#dark` suffix to mark images to display them in light mode or dark mode via `imgMark` option.
 
 - `v-pre` support
 

diff --git a/docs/md-enhance/src/zh/README.md b/docs/md-enhance/src/zh/README.md
@@ -179,26 +179,3 @@ export default {
 ## 从 V1 迁移
 
 详见 [迁移指南](./migration.md)。
-
-## 高级用法
-
-这个插件导出了以下 markdown-it 插件，你可以在其他项目中使用它们。
-
-- align
-- attrs
-- container
-- figure
-- footnote
-- imageLazyload
-- imageMark
-- imageSize
-- include
-- mathjax
-- katex
-- mark
-- stylize
-- sub
-- sup
-- tasklist
-- tex
-- uml
diff --git a/docs/md-enhance/src/zh/config.md b/docs/md-enhance/src/zh/config.md
@@ -166,14 +166,14 @@ icon: config
 
 是否启用图片 Figure 支持。
 
-## imageLazyload
+## imgLazyload
 
 - 类型: `boolean`
 - 默认值: `false`
 
 是否使用原生方式懒加载页面图片。
 
-## imageMark
+## imgMark
 
 - 类型: `ImageMarkOptions | boolean`
 - 默认值: `false`
@@ -189,7 +189,7 @@ interface ImageMarkOptions {
 }
 ```
 
-## imageSize
+## imgSize
 
 - 类型: `boolean`
 - 默认值: `false`

diff --git a/docs/md-enhance/src/zh/guide/image.md b/docs/md-enhance/src/zh/guide/image.md
@@ -23,11 +23,11 @@ export default {
       // 启用 figure
       figure: true,
       // 启用图片懒加载
-      imageLazyload: true,
+      imgLazyload: true,
       // 启用图片标记
-      imageMark: true,
+      imgMark: true,
       // 启用图片大小
-      imageSize: true,
+      imgSize: true,
     }),
   ],
 };
@@ -45,11 +45,11 @@ export default {
       // 启用 figure
       figure: true,
       // 启用图片懒加载
-      imageLazyload: true,
+      imgLazyload: true,
       // 启用图片标记
-      imageMark: true,
+      imgMark: true,
       // 启用图片大小
-      imageSize: true,
+      imgSize: true,
     }),
   ],
 };
@@ -59,7 +59,7 @@ export default {
 
 ## 图片懒加载
 
-如果你想在你的页面中延迟加载图片，你可以在插件选项中设置 `imageLazyload: true`。
+如果你想在你的页面中延迟加载图片，你可以在插件选项中设置 `imgLazyload: true`。
 
 ::: note
 
@@ -71,7 +71,7 @@ export default {
 
 GFM 支持通过 ID 标记图片，使得图片只在特定的模式显示。我们同时支持 GitHub 的标记与简易标记 `#light` 和 `#dark`。
 
-你可以通过 `imageMark` 选项控制它。
+你可以通过 `imgMark` 选项控制它。
 
 ```md
 ![GitHub Light](/assets/icon/github-light.png#gh-dark-mode-only)
@@ -97,7 +97,7 @@ GFM 支持通过 ID 标记图片，使得图片只在特定的模式显示。我
 
 ### 高级用法
 
-你可以将对象传递给 `imageMark` 以配置 ID 标记，可用选项有:
+你可以将对象传递给 `imgMark` 以配置 ID 标记，可用选项有:
 
 ```ts
 interface ImageMarkOptions {
@@ -110,7 +110,7 @@ interface ImageMarkOptions {
 
 ## 图片尺寸
 
-当你在插件选项中设置 `imageSize: true` 时，可以使用 `=widthxheight` 指定图像大小。
+当你在插件选项中设置 `imgSize: true` 时，可以使用 `=widthxheight` 指定图像大小。
 
 ```md
 ![Alt](/example.png =200x300)

diff --git a/docs/md-enhance/src/zh/guide/stylize.md b/docs/md-enhance/src/zh/guide/stylize.md
@@ -181,7 +181,7 @@ export default {
 
 :::
 
-如果你想跳过某些页面中的某些单词，你可以在页面 frontmatter 中设置 `noStylize` 数组，并放置你不想风格化的内容。
+同时，你也可以在 frontmatter 总通过 `stylize` 选项来自定义此页面额外的匹配标记的函数。
 
 ::: info 性能
 

diff --git a/docs/md-enhance/src/zh/migration.md b/docs/md-enhance/src/zh/migration.md
@@ -17,7 +17,7 @@ icon: change
 
 - 图像标记支持
 
-  通过 `imageMark` 选项使用 `#light` 和 `#dark` 后缀标记图像以在日间模式或夜间模式下显示它们。
+  通过 `imgMark` 选项使用 `#light` 和 `#dark` 后缀标记图像以在日间模式或夜间模式下显示它们。
 
 - `v-pre` 支持
 

diff --git a/docs/theme/src/.vuepress/theme.ts b/docs/theme/src/.vuepress/theme.ts
@@ -105,9 +105,9 @@ export default hopeTheme({
       figure: true,
       flowchart: true,
       gfm: true,
-      imageLazyload: true,
-      imageMark: true,
-      imageSize: true,
+      imgLazyload: true,
+      imgMark: true,
+      imgSize: true,
       include: true,
       katex: true,
       mark: true,

diff --git a/docs/theme/src/config/plugins/md-enhance.md b/docs/theme/src/config/plugins/md-enhance.md
@@ -147,7 +147,7 @@ Whether to enable mark support.
 
 Whether enable figure support.
 
-### imageMark
+### imgMark
 
 - Type: `ImageMarkOptions | boolean`
 - Default: `false`
@@ -163,7 +163,7 @@ interface ImageMarkOptions {
 }
 ```
 
-### imageSize
+### imgSize
 
 - Type: `boolean`
 - Default: `false`