diff --git a/.vscode/settings.json b/.vscode/settings.json
index 2c567d76..21279bd6 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -54,6 +54,7 @@
     "vue"
   ],
   "cSpell.words": [
+    "bilibili",
     "bumpp",
     "caniuse",
     "colours",
diff --git a/docs/.vuepress/notes.ts b/docs/.vuepress/notes.ts
index 911d7245..9ff61d0c 100644
--- a/docs/.vuepress/notes.ts
+++ b/docs/.vuepress/notes.ts
@@ -33,6 +33,12 @@ export const zhNotes = definePlumeNotesConfig({
               dir: '图表',
               items: ['chart', 'echarts', 'mermaid', 'flowchart'],
             },
+            {
+              text: '资源嵌入',
+              icon: 'dashicons:embed-video',
+              dir: '嵌入',
+              items: ['pdf', 'bilibili', 'youtube'],
+            },
           ],
         },
         {
diff --git a/docs/.vuepress/public/files/sample.pdf b/docs/.vuepress/public/files/sample.pdf
new file mode 100644
index 00000000..a46deca2
Binary files /dev/null and b/docs/.vuepress/public/files/sample.pdf differ
diff --git a/docs/.vuepress/theme.ts b/docs/.vuepress/theme.ts
index 21d757c2..7ce369de 100644
--- a/docs/.vuepress/theme.ts
+++ b/docs/.vuepress/theme.ts
@@ -66,6 +66,15 @@ export const theme: Theme = themePlume({
       mermaid: true,
       flowchart: true,
     },
+    markdownPower: {
+      pdf: true,
+      caniuse: true,
+      bilibili: true,
+      youtube: true,
+      icons: true,
+      codepen: true,
+      replit: true,
+    },
     comment: {
       provider: 'Giscus',
       comment: true,
diff --git a/docs/README.md b/docs/README.md
index 47a20544..60737bc4 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -77,8 +77,11 @@ config:
         title: 加密
         description: 支持全站加密、部分加密（加密目录、加密文章）。
       -
-        title: 代码复制
-        description: 一键复制代码块中的内容
+        title: 代码
+        description: 代码复制，CodePen演示，Replit演示
+      -
+        title: 资源嵌入
+        description: 图表，视频，PDF
   -
     type: text-image
     title: 博客
diff --git a/docs/notes/theme/guide/markdown/进阶.md b/docs/notes/theme/guide/markdown/进阶.md
index b49fac56..29c2f016 100644
--- a/docs/notes/theme/guide/markdown/进阶.md
+++ b/docs/notes/theme/guide/markdown/进阶.md
@@ -6,6 +6,108 @@ createTime: 2024/03/05 16:27:59
 permalink: /guide/markdown/advance/
 ---
 
+## iconify 图标
+
+在 Markdown 文件中使用 [iconify](https://iconify.design/) 的图标。 主题虽然提供了
+[`<Iconify />`](/guide/features/component/#iconify) 组件来支持在 markdown 中使用图标，
+但是它需要从远程加载图标，可能速度比较慢。
+
+为此，主题提供了另一种可选的方式，以更简单的方式，在 Markdown 中使用图标，并且将 图标资源编译到
+本地静态资源中。
+
+### 配置
+
+该功能默认不启用，你需要在 `theme` 配置中启用。
+
+::: code-tabs
+@tab .vuepress/config.ts
+
+```ts
+export default defineUserConfig({
+  theme: plumeTheme({
+    plugins: {
+      markdownPower: {
+        icons: true,
+      },
+    }
+  })
+})
+```
+
+:::
+
+同时，该功能还需要你额外安装 `@iconify/json` 依赖。
+
+::: code-tabs
+@tab pnpm
+
+```sh
+pnpm add @iconify/json
+```
+
+@tab yarn
+
+```sh
+yarn add @iconify/json
+```
+
+@tab npm
+
+```sh
+npm install @iconify/json
+```
+
+:::
+
+### 语法
+
+```md
+:[collect:name]:
+```
+
+设置图标大小和颜色
+
+```md
+:[collect:name size]:
+:[collect:name /color]:
+:[collect:name size/color]:
+```
+
+`iconify` 拥有非常多的图标，这些图标被分组为不同的 `collect`，每个 `collect` 都有自己的
+图标。
+
+你可以从 <https://icon-sets.iconify.design/> 中获取 collect 和 name。
+
+### 示例
+
+输入：
+
+```md
+:[ion:logo-markdown]:
+```
+
+输出：
+
+:[ion:logo-markdown]:
+
+该语法为行内语法，因此，你可以在同一行中跟其他 markdown 语法 一起使用。
+
+输入：
+
+```md
+github: :[tdesign:logo-github-filled]:
+修改颜色：:[tdesign:logo-github-filled /#f00]:
+修改大小：:[tdesign:logo-github-filled 36px]:
+修改大小颜色：:[tdesign:logo-github-filled 36px/#f00]:
+```
+
+输出：
+
+github: :[tdesign:logo-github-filled]:
+修改颜色：:[tdesign:logo-github-filled /#f00]:
+修改大小：:[tdesign:logo-github-filled 36px]:
+修改大小颜色：:[tdesign:logo-github-filled 36px/#f00]:
+
 ## 选项组
 
 让你的 Markdown 文件支持选项卡。
@@ -196,6 +298,25 @@ corepack use pnpm@8
 
 ## can I use
 
+此功能默认不启用，你可以在配置文件中启用它。
+
+::: code-tabs
+@tab .vuepress/config.ts
+
+```ts
+export default defineUserConfig({
+  theme: plumeTheme({
+    plugins: {
+      markdownPower: {
+        caniuse: true, // [!code highlight]
+      },
+    }
+  })
+})
+```
+
+:::
+
 在编写文章时， 提供嵌入 [can-i-use](https://caniuse.com/) WEB feature 各平台支持说明 的功能。
 
 方便在描述某个 WEB feature 时，能更直观的表述 该特性的支持程度。
@@ -203,30 +324,19 @@ corepack use pnpm@8
 在你的 文章 markdown文件中，使用以下格式：
 
 ``` md
-::: caniuse <feature> {browser_versions}
-:::
+@[caniuse](feature)
 ```
 
-**示例： 获取 css 伪类选择器 `:dir()` 在各个浏览器的支持情况图标：**
-
-``` md
-::: caniuse css-matches-pseudo
-:::
-```
-
-效果：
-
-::: caniuse css-matches-pseudo
-:::
-
 ### 语法
 
 ``` md
-::: caniuse <feature> {browser_versions}
-:::
+@[caniuse](feature)
+@[caniuse{browser_versions}](feature)
+@[caniuse embed_type](feature)
+@[caniuse embed_type{browser_versions}](feature)
 ```
 
-- `<feature>`
+- `feature`
 
    必填。 正确取值请参考 [https://caniuse.bitsofco.de/](https://caniuse.bitsofco.de/)
 
@@ -242,6 +352,187 @@ corepack use pnpm@8
   - `0` 表示当前浏览器版本的支持情况
   - 大于`0` 表示高于当前浏览器版本的支持情况
 
+- `embed_type`
+
+  可选。 资源嵌入的类型。
+
+  类型： `'embed' | 'image'`
+
+  默认值为：`'embed'`
+
+### 示例
+
+**获取 css 伪类选择器 `:dir()` 在各个浏览器的支持情况：**
+
+```md
+@[caniuse](css-matches-pseudo)
+```
+
+效果：
+
+@[caniuse](css-matches-pseudo)
+
+**以图片的形式，获取 css 伪类选择器 `:dir()` 在各个浏览器的支持情况：**
+
+```md
+@[caniuse image](css-matches-pseudo)
+```
+
+效果：
+
+@[caniuse image](css-matches-pseudo)
+
+**获取 css 伪类选择器 `:dir()` 特定范围浏览器的支持情况：**
+
+```md
+@[caniuse{-2,-1,1,2,3}](css-matches-pseudo)
+```
+
+效果：
+
+@[caniuse{-2,-1,1,2,3}](css-matches-pseudo)
+
+## CodePen
+
+主题支持在 Markdown 文件中嵌入 [CodePen](https://codepen.io/)。
+
+### 配置
+
+此功能默认不启用，你可以在配置文件中启用它。
+
+::: code-tabs
+@tab .vuepress/config.ts
+
+```ts
+export default defineUserConfig({
+  theme: plumeTheme({
+    plugins: {
+      markdownPower: {
+        codepen: true, // [!code highlight]
+      },
+    }
+  })
+})
+```
+
+:::
+
+### 语法
+
+简单语法：
+
+```md
+@[codepen](user/slash)
+```
+
+更多选项支持：
+
+```md
+@[codepen preview editable tab="css,result" theme="dark" height="500px" width="100%"](user/slash)
+```
+
+- `preview`: 是否渲染为预览模式
+- `editable`: 是否可编辑
+- `tab`: 默认显示的标签， 默认为 `result`，多个使用 `,` 分隔
+- `theme`: 主题， 可选值 `dark` 和 `light`
+- `height`: 容器高度， 默认为 `400px`
+- `width`: 容器宽度， 默认为 `100%`
+- `user`: CodePen 用户名
+- `slash`: CodePen 代码文件名
+
+### 示例
+
+输入：
+
+```md
+@[codepen](leimapapa/RwOZQOW)
+```
+
+输出：
+
+@[codepen](leimapapa/RwOZQOW)
+
+**预览模式：**
+
+输入：
+
+```md
+@[codepen preview](leimapapa/RwOZQOW)
+```
+
+输出：
+
+@[codepen preview](leimapapa/RwOZQOW)
+
+**编辑模式：**
+
+输入：
+
+```md
+@[codepen editable tab="html,result"](leimapapa/RwOZQOW)
+```
+
+输出：
+
+@[codepen editable tab="html,result"](leimapapa/RwOZQOW)
+
+## Replit
+
+主题支持在 Markdown 文件中嵌入 [Replit](https://replit.com/)。
+
+### 配置
+
+此功能默认不启用，你可以在配置文件中启用它。
+
+::: code-tabs
+@tab .vuepress/config.ts
+
+```ts
+export default defineUserConfig({
+  theme: plumeTheme({
+    plugins: {
+      markdownPower: {
+        replit: true, // [!code highlight]
+      },
+    }
+  })
+})
+```
+
+:::
+
+### 语法
+
+简单的语法
+
+```md
+@[replit](user/repl-name)
+```
+
+更多选项
+
+```md
+@[replit title="" width="100%" height="450px" theme="dark"](user/repl-name#filepath)
+```
+
+- `title`: 标题
+- `width`: 容器宽度
+- `height`: 容器高度
+- `theme`: 主题， 可选值 `dark` 和 `light`
+- `user`: Replit 用户名
+- `repl-name`: Replit repl 名称
+- `filepath`: Replit 默认打开的文件路径
+
+输入：
+
+```md
+@[replit](@TechPandaPro/Cursor-Hangout#package.json)
+````
+
+输出：
+
+@[replit](@TechPandaPro/Cursor-Hangout#package.json)
+
 ## 导入文件
 
 主题支持在 Markdown 文件中导入文件切片。
diff --git a/docs/notes/theme/guide/介绍.md b/docs/notes/theme/guide/介绍.md
index b9d3f751..d1b89e2f 100644
--- a/docs/notes/theme/guide/介绍.md
+++ b/docs/notes/theme/guide/介绍.md
@@ -42,3 +42,6 @@ VuePress 是一个 [静态站点生成器](https://en.wikipedia.org/wiki/Static_
 - 👀 支持 搜索、文章评论
 - 👨‍💻‍ 支持 浅色/深色 主题 （包括代码高亮）
 - 📠 markdown 增强，支持 代码块分组、提示容器、任务列表、数学公式、代码演示 等
+- 📚 代码演示，支持 CodePen, Replit
+- 📊 嵌入图标，支持 chart.js，Echarts，Mermaid，flowchart
+- 🎛 资源嵌入，支持 PDF, bilibili视频，youtube视频等
diff --git a/docs/notes/theme/guide/嵌入/bilibili.md b/docs/notes/theme/guide/嵌入/bilibili.md
new file mode 100644
index 00000000..aa5dd7d8
--- /dev/null
+++ b/docs/notes/theme/guide/嵌入/bilibili.md
@@ -0,0 +1,95 @@
+---
+title: Bilibili 视频
+author: pengzhanbo
+icon: ri:bilibili-fill
+createTime: 2024/03/28 12:26:47
+permalink: /guide/embed/video/bilibili/
+---
+
+## 概述
+
+有时候，你想在你的文档中嵌入视频，以提高内容的表达能力。
+
+主题提供了 嵌入 Bilibili 视频 的功能。
+
+该功能由 [vuepress-plugin-md-power](/) 提供支持。
+
+## 配置
+
+该功能默认不启用。你需要在主题配置中开启。
+
+::: code-tabs
+@tab .vuepress/config.ts
+
+```ts
+export default defineUserConfig({
+  theme: plumeTheme({
+    plugins: {
+      markdownPower: {
+        bilibili: true,
+      },
+    }
+  })
+})
+```
+
+:::
+
+## 语法
+
+简单的语法：
+
+```md
+@[bilibili](bvid)
+```
+
+带 分P 的视频，在 `bilibili` 后跟随 `p1`、`p2`、`p3` 等选项
+
+```md
+@[bilibili p1](aid cid)
+```
+
+更多选项：
+
+```md
+@[bilibili p1 autoplay time="0" width="100%" height="400px" ratio="16:9"](bvid aid cid)
+```
+
+**选项说明：**
+
+- bvid: 视频 BV ID
+- aid: 视频 AID
+- cid: 视频 CID
+- autoplay: 是否自动播放
+- time: 视频开始播放时间点，单位为秒， 也可以使用 `mm:ss` 或 `hh:mm:ss` 格式
+- width: 视频宽度
+- height: 视频高度
+- ratio: 视频比例，默认 `16:9`
+
+对于分P的视频，可以省略传入 `bvid`，但需要传入 `aid` 和 `cid`
+
+## 示例
+
+### 宽频视频
+
+输入：
+
+```md
+@[bilibili](BV1EZ42187Hg)
+```
+
+输出：
+
+@[bilibili](BV1EZ42187Hg)
+
+### 竖屏视频
+
+输入：
+
+```md
+@[bilibili width="320px" ratio="9:16"](BV1zr42187eg)
+```
+
+输出：
+
+@[bilibili width="320px" ratio="9:16"](BV1zr42187eg)
diff --git a/docs/notes/theme/guide/嵌入/pdf.md b/docs/notes/theme/guide/嵌入/pdf.md
new file mode 100644
index 00000000..11d9881c
--- /dev/null
+++ b/docs/notes/theme/guide/嵌入/pdf.md
@@ -0,0 +1,122 @@
+---
+title: PDF 阅读
+author: pengzhanbo
+icon: teenyicons:pdf-outline
+createTime: 2024/03/28 13:30:53
+permalink: /guide/embed/pdf/
+---
+
+## 概述
+
+主题支持在 markdown 中嵌入 PDF 文件，它能够在页面中直接阅读 PDF 。
+
+该功能由 [vuepress-plugin-md-power](/) 提供支持。
+
+## 配置
+
+该功能默认不启用。你需要在主题配置中开启。
+
+::: code-tabs
+@tab .vuepress/config.ts
+
+```ts
+export default defineUserConfig({
+  theme: plumeTheme({
+    plugins: {
+      markdownPower: {
+        pdf: true,
+      },
+    }
+  })
+})
+```
+
+:::
+
+## 语法
+
+最简单的语法如下：
+
+```md
+@[pdf](url)
+```
+
+当需要打开特定页面时，在 `pdf` 后面跟随一个 页数。
+
+```md
+@[pdf 2](url)
+```
+
+还可以添加更多的 选项到 `@[pdf ]` 中，更灵活的控制行为。
+
+```md
+@[pdf 2 no-toolbar width="100%" height="400px" ratio="16:9" zoom="100"](url)
+```
+
+- `no-toolbar` - 不显示工具栏
+- `width` - 宽度，默认为 100%
+- `height` - 高度，默认为 `auto`
+- `ratio` - 宽高比, 默认为 `16:9`, 仅当未指定高度时生效
+- `zoom` - 缩放比例, 百分比。
+
+## 示例
+
+### 默认
+
+输入：
+
+```md
+@[pdf](https://plume.pengzhanbo.cn/files/sample.pdf)
+```
+
+输出：
+
+@[pdf](/files/sample.pdf)
+
+### 设置页码为 2
+
+输入：
+
+```md
+@[pdf 2](https://plume.pengzhanbo.cn/files/sample.pdf)
+```
+
+输出：
+
+@[pdf 2 zoom="95"](/files/sample.pdf)
+
+### 不显示工具栏
+
+输入：
+
+```md
+@[pdf no-toolbar](https://plume.pengzhanbo.cn/files/sample.pdf)
+```
+
+输出：
+
+@[pdf no-toolbar](/files/sample.pdf)
+
+### 缩放比 90%
+
+输入：
+
+```md
+@[pdf zoom="90"](https://plume.pengzhanbo.cn/files/sample.pdf)
+```
+
+输出：
+
+@[pdf zoom="90"](/files/sample.pdf)
+
+### 宽高比 21:29
+
+输入：
+
+```md
+@[pdf zoom="95" ratio="21:29"](https://plume.pengzhanbo.cn/files/sample.pdf)
+```
+
+输出：
+
+@[pdf zoom="95" ratio="21:29"](/files/sample.pdf)
diff --git a/docs/notes/theme/guide/嵌入/youtube.md b/docs/notes/theme/guide/嵌入/youtube.md
new file mode 100644
index 00000000..e7c41205
--- /dev/null
+++ b/docs/notes/theme/guide/嵌入/youtube.md
@@ -0,0 +1,75 @@
+---
+title: Youtube 视频
+author: pengzhanbo
+icon: mdi:youtube
+createTime: 2024/03/28 14:30:33
+permalink: /guide/embed/video/youtube/
+---
+
+## 概述
+
+有时候，你想在你的文档中嵌入视频，以提高内容的表达能力。
+
+主题提供了 嵌入 Youtube 视频 的功能。
+
+该功能由 [vuepress-plugin-md-power](/) 提供支持。
+
+## 配置
+
+该功能默认不启用。你需要在主题配置中开启。
+
+::: code-tabs
+@tab .vuepress/config.ts
+
+```ts
+export default defineUserConfig({
+  theme: plumeTheme({
+    plugins: {
+      markdownPower: {
+        youtube: true,
+      },
+    }
+  })
+})
+```
+
+:::
+
+## 语法
+
+简单的语法：
+
+```md
+@[youtube](id)
+```
+
+更多选项：
+
+```md
+@[youtube autoplay loop start="0" end="0" width="100%" height="400px" ratio="16:9"](id)
+```
+
+**选项说明：**
+
+- id: 视频 ID
+- autoplay: 是否自动播放
+- loop: 是否循环播放
+- start: 视频开始播放时间点，单位为秒， 也可以使用 `mm:ss` 或 `hh:mm:ss` 格式
+- end: 视频结束播放时间点，单位为秒， 也可以使用 `mm:ss` 或 `hh:mm:ss` 格式
+- width: 视频宽度
+- height: 视频高度
+- ratio: 视频比例，默认 `16:9`
+
+## 示例
+
+### 宽频视频
+
+输入：
+
+```md
+@[youtube](0JJPfz5dg20)
+```
+
+输出：
+
+@[youtube](0JJPfz5dg20)
diff --git a/docs/package.json b/docs/package.json
index 5fa7292b..f87d48b6 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -12,6 +12,7 @@
     "vuepress": "2.0.0-rc.9"
   },
   "dependencies": {
+    "@iconify/json": "^2.2.196",
     "@vuepress/bundler-vite": "2.0.0-rc.9",
     "anywhere": "^1.6.0",
     "chart.js": "^4.4.2",
diff --git a/package.json b/package.json
index 11edb972..4d9a711b 100644
--- a/package.json
+++ b/package.json
@@ -56,10 +56,10 @@
     "husky": "^9.0.11",
     "lint-staged": "^15.2.2",
     "rimraf": "^5.0.5",
-    "stylelint": "^16.2.1",
+    "stylelint": "^16.3.1",
     "tsconfig-vuepress": "^4.5.0",
     "typescript": "^5.4.3",
-    "vite": "^5.2.4"
+    "vite": "^5.2.7"
   },
   "pnpm": {
     "patchedDependencies": {
diff --git a/plugins/plugin-md-power/LICENSE b/plugins/plugin-md-power/LICENSE
new file mode 100644
index 00000000..9f677c90
--- /dev/null
+++ b/plugins/plugin-md-power/LICENSE
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (C) 2021 - PRESENT by pengzhanbo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
diff --git a/plugins/plugin-md-power/README.md b/plugins/plugin-md-power/README.md
new file mode 100644
index 00000000..4f562164
--- /dev/null
+++ b/plugins/plugin-md-power/README.md
@@ -0,0 +1,163 @@
+# vuepress-plugin-md-power
+
+为 vuepress 提供 丰富的 markdown 语法支持。
+
+## 功能
+
+- caniuse 支持，提供前端各种特性在各个浏览器版本中的支持情况查看器
+- 嵌入 PDF 支持
+- 嵌入 视频支持，当前支持嵌入 bilibili 和 youtube 的视频
+- 内联 iconify 图标支持
+
+## 安装
+
+```sh
+pnpm add vuepress-plugin-md-power
+```
+
+## 使用
+
+```ts
+import { defineUserConfig } from 'vuepress'
+import { md } from 'vuepress-plugin-md-power'
+
+export default defineUserConfig({
+  plugins: [
+    markdownPowerPlugin({
+      caniuse: true,
+      pdf: true,
+      bilibili: true,
+      youtube: true,
+      icons: true,
+    })
+  ]
+})
+```
+
+### caniuse
+
+插件默认不启用该功能，你需要手动设置 `caniuse` 为 `true`
+
+#### 语法
+
+```md
+@[caniuse](feature)
+@[caniuse image](feature)
+@[caniuse embed{versions}](feature)
+```
+
+你可以从 [caniuse](https://caniuse.bitsofco.de/) 获取 feature 的值。
+
+默认情况下，插件通过 `iframe` 嵌入 `caniuse` 的支持情况查看器。
+你也可以使用 `@[caniuse image](feature)` 直接嵌入图片。
+
+caniuse 默认查看最近的5个浏览器版本。你可以通过 `{versions}` 手动设置查看的浏览器版本。
+格式为 `{number,number,...}`。取值范围为 `-5 ~ 3` 。
+
+- 小于0 表示低于当前浏览器版本的支持情况
+- 0 表示当前浏览器版本的支持情况
+- 大于0 表示高于当前浏览器版本的支持情况
+
+如 `{-2,-1,1,2}` 表示查看低于当前 2 个版本 到 高于当前 2 个版本的支持情况。
+
+### pdf
+
+插件默认不启用该功能，你需要手动设置 `pdf` 为 `true`
+
+#### 语法
+
+```md
+@[pdf](url)
+@[pdf 1](url)
+@[pdf 1 no-toolbar width="100%" height="600px" zoom="1" ratio="16:9"](url)
+```
+
+`url` 只支持绝对路径以及完整的资源链接地址，请勿传入相对路径。
+
+你可以在 `pdf` 后紧跟空格，设置一个数字表示默认显示的  pdf 页码
+
+- `no-toolbar` 表示不显示工具栏
+- `width` 设置宽度
+- `height` 设置高度
+- `zoom` 设置缩放
+- `ratio` 设置宽高比， 仅当 `width` 有值， `height` 未设置时有效
+
+### icons
+
+插件默认不启用该功能，你需要手动设置 `icons` 为 `true`。
+
+你还需要手动安装 `@iconify/json` 依赖。
+
+```sh
+pnpm add @iconify/json
+```
+
+#### 语法
+
+```md
+:[collect:icon]:
+:[collect:icon size]:
+:[collect:icon /color]:
+:[collect:icon size/color]:
+```
+
+你可以从 [icon-sets.iconify](https://icon-sets.iconify.design/) 获取 图标集。
+
+显示 `logos` 图标集合下的 `vue` 图标
+
+```md
+:[logos:vue]:
+```
+
+图标默认大小为 `1em` ，你可以通过 `size` 设置图标大小
+
+```md
+:[logos:vue 1.2em]:
+```
+
+图标默认颜色为 `currentColor` 你可以通过 `/color` 设置图标颜色
+
+```md
+:[logos:vue /blue]:
+```
+
+也可以通过 `size/color` 设置图标大小和颜色
+
+```md
+:[logos:vue 1.2em/blue]:
+```
+
+### bilibili
+
+插件默认不启用该功能，你需要手动设置 `bilibili` 为 `true`
+
+#### 语法
+
+```md
+@[bilibili](bvid)
+@[bilibili autoplay time="0"](bvid)
+@[bilibili p1 autoplay time="0" ratio="16:9"](aid cid)
+```
+
+- 设置 `autoplay` 以自动播放视频。
+- 设置 `time` 以指定开始播放的时间点，单位为秒。还可以传入 `mm:ss` 或者 `hh:mm:ss`。
+- 如果为 分p（非合集），还可以设置 `p\d` （第\d 个分p），此时可以只传入 `aid` 和 `cid`。
+- 设置 `ratio` 以指定视频的宽高比。
+
+### youtube
+
+插件默认不启用该功能，你需要手动设置 `youtube` 为 `true`
+
+#### 语法
+
+```md
+@[youtube](id)
+@[youtube autoplay loop ratio="16:9" star="0" end="0"](id)
+```
+
+- `id` 为 YouTube 视频 ID
+- `autoplay` 为是否自动播放
+- `loop` 为是否循环播放
+- `ratio` 为视频的宽高比
+- `star` 为开始时间，单位为秒，还可以传入 `mm:ss` 或者 `hh:mm:ss`。
+- `end` 为结束时间，单位为秒，还可以传入 `mm:ss` 或者 `hh:mm:ss`。
diff --git a/plugins/plugin-md-power/package.json b/plugins/plugin-md-power/package.json
new file mode 100644
index 00000000..0fd00219
--- /dev/null
+++ b/plugins/plugin-md-power/package.json
@@ -0,0 +1,69 @@
+{
+  "name": "vuepress-plugin-md-power",
+  "type": "module",
+  "version": "1.0.0-rc.47",
+  "description": "The Plugin for VuePres 2 - markdown power",
+  "author": "pengzhanbo <volodymyr@foxmail.com>",
+  "license": "MIT",
+  "homepage": "https://github.com/pengzhanbo/vuepress-theme-plume#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pengzhanbo/vuepress-theme-plume.git",
+    "directory": "plugins/plugin-md-power"
+  },
+  "bugs": {
+    "url": "https://github.com/pengzhanbo/vuepress-theme-plume/issues"
+  },
+  "exports": {
+    ".": {
+      "types": "./lib/node/index.d.ts",
+      "import": "./lib/node/index.js"
+    },
+    "./client": {
+      "types": "./lib/client/index.d.ts",
+      "import": "./lib/client/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "lib/node/index.js",
+  "types": "./lib/node/index.d.ts",
+  "files": [
+    "lib"
+  ],
+  "scripts": {
+    "build": "pnpm run copy && pnpm run ts",
+    "clean": "rimraf --glob ./lib ./*.tsbuildinfo",
+    "copy": "cpx \"src/**/*.{d.ts,vue,css,scss,jpg,png}\" lib",
+    "ts": "tsc -b tsconfig.build.json"
+  },
+  "peerDependencies": {
+    "@iconify/json": "^2",
+    "vuepress": "2.0.0-rc.9"
+  },
+  "peerDependenciesMeta": {
+    "@iconify/json": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@iconify/utils": "^2.1.22",
+    "@vueuse/core": "^10.9.0",
+    "local-pkg": "^0.5.0",
+    "markdown-it-container": "^4.0.0",
+    "nanoid": "^5.0.6",
+    "vue": "^3.4.21"
+  },
+  "devDependencies": {
+    "@iconify/json": "^2.2.196",
+    "@types/markdown-it": "^13.0.7"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keyword": [
+    "VuePress",
+    "vuepress plugin",
+    "markdown power",
+    "vuepress-plugin-md-power"
+  ]
+}
diff --git a/plugins/plugin-md-power/src/client/components/Bilibili.vue b/plugins/plugin-md-power/src/client/components/Bilibili.vue
new file mode 100644
index 00000000..f72512c1
--- /dev/null
+++ b/plugins/plugin-md-power/src/client/components/Bilibili.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { toRefs } from 'vue'
+import { useSize } from '../composables/size.js'
+
+const props = defineProps<{
+  src: string
+  title: string
+  width?: string
+  height?: string
+  ratio?: string
+}>()
+
+const IFRAME_ALLOW = 'accelerometer; autoplay; clipboard-write; encrypted-media; fullscreen; gyroscope; picture-in-picture'
+
+const options = toRefs(props)
+
+const { el, width, height, resize } = useSize(options)
+
+function onLoad() {
+  resize()
+}
+</script>
+
+<template>
+  <ClientOnly>
+    <iframe
+      ref="el"
+      class="video_bilibili_iframe"
+      :src="src"
+      :title="title || 'Bilibili'"
+      :style="{ width, height }"
+      :allow="IFRAME_ALLOW"
+      @load="onLoad"
+    />
+  </ClientOnly>
+</template>
+
+<style>
+.video_bilibili_iframe {
+  width: 100%;
+  margin: 16px auto;
+  border: none;
+  border-radius: 5px;
+}
+</style>
diff --git a/plugins/plugin-md-power/src/client/components/PDFViewer.vue b/plugins/plugin-md-power/src/client/components/PDFViewer.vue
new file mode 100644
index 00000000..edaecc8e
--- /dev/null
+++ b/plugins/plugin-md-power/src/client/components/PDFViewer.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { onMounted, toRefs } from 'vue'
+import type { PDFTokenMeta } from '../../shared/pdf.js'
+import { useSize } from '../composables/size.js'
+import { usePDF } from '../composables/pdf.js'
+
+const props = defineProps<PDFTokenMeta>()
+
+const options = toRefs(props)
+const { el, width, height, resize } = useSize(options)
+
+onMounted(() => {
+  if (!el.value)
+    return
+  usePDF(el.value, props.src!, {
+    page: props.page,
+    zoom: props.zoom,
+    noToolbar: props.noToolbar,
+  })
+  resize()
+})
+</script>
+
+<template>
+  <div ref="el" class="pdf-viewer-wrapper" :style="{ width, height }" />
+</template>
+
+<style>
+.pdf-viewer-wrapper {
+  position: relative;
+  overflow: hidden;
+  border-radius: 4px;
+}
+
+.pdf-viewer {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/plugins/plugin-md-power/src/client/components/Replit.vue b/plugins/plugin-md-power/src/client/components/Replit.vue
new file mode 100644
index 00000000..aff6c02e
--- /dev/null
+++ b/plugins/plugin-md-power/src/client/components/Replit.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { computed, getCurrentInstance, ref } from 'vue'
+import type { ReplitTokenMeta } from '../../shared/replit.js'
+
+const props = defineProps<ReplitTokenMeta>()
+
+const current = getCurrentInstance()
+// magic height
+const height = ref('47px')
+
+const REPLIT_LINK = 'https://replit.com/'
+
+const isDark = computed(() => current?.appContext.config.globalProperties.$isDark.value)
+
+const link = computed(() => {
+  const url = new URL(`/${props.source}`, REPLIT_LINK)
+  url.searchParams.set('embed', 'true')
+
+  const theme = props.theme || (isDark.value ? 'dark' : 'light')
+  url.searchParams.set('theme', theme)
+
+  return url.toString()
+})
+
+function onload() {
+  height.value = props.height || '450px'
+}
+</script>
+
+<template>
+  <ClientOnly>
+    <iframe
+      class="replit-iframe-wrapper"
+      :src="link"
+      :title="title || 'Replit'"
+      :style="{ width, height }"
+      allowtransparency="true"
+      allowfullscree="true"
+      @load="onload"
+    />
+  </ClientOnly>
+</template>
+
+<style>
+.replit-iframe-wrapper {
+  width: 100%;
+  margin: 16px auto;
+  border: none;
+  border-top: 1px solid var(--vp-c-divider);
+  border-bottom-right-radius: 8px;
+  border-bottom-left-radius: 8px;
+  transition: border 0.25s;
+}
+</style>
diff --git a/plugins/plugin-md-power/src/client/components/Youtube.vue b/plugins/plugin-md-power/src/client/components/Youtube.vue
new file mode 100644
index 00000000..04e2e8df
--- /dev/null
+++ b/plugins/plugin-md-power/src/client/components/Youtube.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { toRefs } from 'vue'
+import { useSize } from '../composables/size.js'
+
+const props = defineProps<{
+  src: string
+  title: string
+  width?: string
+  height?: string
+  ratio?: string
+}>()
+
+const IFRAME_ALLOW = 'accelerometer; autoplay; clipboard-write; encrypted-media; fullscreen; gyroscope; picture-in-picture'
+
+const options = toRefs(props)
+
+const { el, width, height, resize } = useSize(options)
+</script>
+
+<template>
+  <ClientOnly>
+    <iframe
+      ref="el"
+      class="video_youtube_iframe"
+      :src="src"
+      :title="title || 'Youtube'"
+      :style="{ width, height }"
+      :allow="IFRAME_ALLOW"
+      @load="resize"
+    />
+  </ClientOnly>
+</template>
+
+<style>
+.video_youtube_iframe {
+  width: 100%;
+  margin: 16px auto;
+  border: none;
+  border-radius: 5px;
+}
+</style>
diff --git a/plugins/plugin-md-power/src/client/composables/pdf.ts b/plugins/plugin-md-power/src/client/composables/pdf.ts
new file mode 100644
index 00000000..9a9a9669
--- /dev/null
+++ b/plugins/plugin-md-power/src/client/composables/pdf.ts
@@ -0,0 +1,107 @@
+import { ensureEndingSlash } from 'vuepress/shared'
+import { withBase } from 'vuepress/client'
+import type { PDFEmbedType, PDFTokenMeta } from '../../shared/pdf.js'
+import { normalizeLink } from '../utils/link.js'
+import { pluginOptions } from '../options.js'
+import { checkIsMobile, checkIsSafari, checkIsiPad } from '../utils/is.js'
+
+function queryStringify(options: PDFTokenMeta): string {
+  const { page, noToolbar, zoom } = options
+  const params = [
+    `page=${page}`,
+    `toolbar=${noToolbar ? 0 : 1}`,
+    `zoom=${zoom}`,
+  ]
+
+  let queryString = params.join('&')
+  if (queryString)
+    queryString = `#${queryString}`
+
+  return queryString
+}
+
+export function renderPDF(
+  el: HTMLElement,
+  url: string,
+  embedType: PDFEmbedType,
+  options: PDFTokenMeta,
+): void {
+  if (!pluginOptions.pdf)
+    return
+  url = normalizeLink(url)
+  const pdfOptions = pluginOptions.pdf === true ? {} : pluginOptions.pdf
+  const pdfjsUrl = pdfOptions.pdfjsUrl
+    ? `${ensureEndingSlash(withBase(pdfOptions.pdfjsUrl))}web/viewer.html`
+    : ''
+  const queryString = queryStringify(options)
+
+  const source = embedType === 'pdfjs'
+    ? `${pdfjsUrl}?file=${encodeURIComponent(url)}${queryString}`
+    : `${url}${queryString}`
+
+  const tagName = embedType === 'pdfjs' || embedType === 'iframe'
+    ? 'iframe'
+    : 'embed'
+
+  el.innerHTML = ''
+  const pdf = document.createElement(tagName)
+
+  pdf.className = 'pdf-viewer';
+  (pdf as any).type = 'application/pdf'
+  pdf.title = options.title || 'PDF Viewer'
+  pdf.src = source
+
+  if (pdf instanceof HTMLIFrameElement)
+    pdf.allow = 'fullscreen'
+
+  el.appendChild(pdf)
+}
+
+export function usePDF(
+  el: HTMLElement,
+  url: string,
+  options: PDFTokenMeta,
+): void {
+  if (typeof window === 'undefined' || !window?.navigator?.userAgent)
+    return
+
+  const { navigator } = window
+  const { userAgent } = navigator
+
+  const isModernBrowser = typeof window.Promise === 'function'
+
+  // Quick test for mobile devices.
+  const isMobileDevice = checkIsiPad(userAgent) || checkIsMobile(userAgent)
+
+  // Safari desktop requires special handling
+  const isSafariDesktop = !isMobileDevice && checkIsSafari(userAgent)
+
+  const isFirefoxWithPDFJS
+    = !isMobileDevice
+    && /firefox/iu.test(userAgent)
+    && userAgent.split('rv:').length > 1
+      ? Number.parseInt(userAgent.split('rv:')[1].split('.')[0], 10) > 18
+      : false
+
+  // Determines whether PDF support is available
+  const supportsPDFs
+    // As of Sept 2020 no mobile browsers properly support PDF embeds
+    = !isMobileDevice
+    // We're moving into the age of MIME-less browsers. They mostly all support PDF rendering without plugins.
+    && (isModernBrowser
+    // Modern versions of Firefox come bundled with PDFJS
+    || isFirefoxWithPDFJS)
+
+  if (!url)
+    return
+
+  if (supportsPDFs || !isMobileDevice) {
+    const embedType = isSafariDesktop ? 'iframe' : 'embed'
+    return renderPDF(el, url, embedType, options)
+  }
+
+  if (typeof pluginOptions.pdf === 'object' && pluginOptions.pdf.pdfjsUrl)
+    return renderPDF(el, url, 'pdfjs', options)
+
+  el.innerHTML = `<p>This browser does not support embedding PDFs. Please download the PDF to view it: <a href='${url}' target='_blank'>Download PDF</a></p>`
+}
diff --git a/plugins/plugin-md-power/src/client/composables/setupCanIUse.ts b/plugins/plugin-md-power/src/client/composables/setupCanIUse.ts
new file mode 100644
index 00000000..713dac08
--- /dev/null
+++ b/plugins/plugin-md-power/src/client/composables/setupCanIUse.ts
@@ -0,0 +1,20 @@
+let isBind = false
+export function setupCanIUse(): void {
+  if (isBind)
+    return
+  isBind = true
+
+  window.addEventListener('message', (message) => {
+    const data = message.data
+
+    if (typeof data === 'string' && data.includes('ciu_embed')) {
+      const [, feature, height] = data.split(':')
+      const el = document.querySelector(`.ciu_embed[data-feature="${feature}"]:not([data-skip])`)
+      if (el) {
+        const h = Number.parseInt(height) + 30
+          ; (el.childNodes[0] as any).height = `${h}px`
+        el.setAttribute('data-skip', 'true')
+      }
+    }
+  })
+}
diff --git a/plugins/plugin-md-power/src/client/composables/size.ts b/plugins/plugin-md-power/src/client/composables/size.ts
new file mode 100644
index 00000000..1cdd1cdd
--- /dev/null
+++ b/plugins/plugin-md-power/src/client/composables/size.ts
@@ -0,0 +1,55 @@
+import type { MaybeRef } from '@vueuse/core'
+import { useEventListener } from '@vueuse/core'
+import type { Ref, ShallowRef, ToRefs } from 'vue'
+import { computed, isRef, onMounted, ref, shallowRef, toValue, watch } from 'vue'
+import type { SizeOptions } from '../../shared/size.js'
+
+export interface SizeInfo<T extends HTMLElement> {
+  el: ShallowRef<T | undefined>
+  width: Ref<string>
+  height: Ref<string>
+  resize: () => void
+}
+export function useSize<T extends HTMLElement>(
+  options: ToRefs<SizeOptions>,
+  extraHeight: MaybeRef<number> = 0,
+): SizeInfo<T> {
+  const el = shallowRef<T>()
+  const width = computed(() => toValue(options.width) || '100%')
+  const height = ref('auto')
+
+  const getRadio = (ratio: number | string | undefined): number => {
+    if (typeof ratio === 'string') {
+      const [width, height] = ratio.split(':')
+      const parsedRadio = Number(width) / Number(height)
+
+      if (!Number.isNaN(parsedRadio))
+        return parsedRadio
+    }
+
+    return typeof ratio === 'number' ? ratio : 16 / 9
+  }
+
+  const getHeight = (width: number): string => {
+    const height = toValue(options.height)
+    const ratio = getRadio(toValue(options.ratio))
+
+    return height || `${Number(width) / ratio + toValue(extraHeight)}px`
+  }
+
+  const resize = (): void => {
+    if (el.value)
+      height.value = getHeight(el.value.offsetWidth)
+  }
+
+  onMounted(() => {
+    resize()
+    if (isRef(extraHeight))
+      watch(extraHeight, resize)
+
+    useEventListener('orientationchange', resize)
+    useEventListener('resize', resize)
+  })
+
+  return { el, width, height, resize }
+}
diff --git a/plugins/plugin-md-power/src/client/config.ts b/plugins/plugin-md-power/src/client/config.ts
new file mode 100644
index 00000000..7ab308c6
--- /dev/null
+++ b/plugins/plugin-md-power/src/client/config.ts
@@ -0,0 +1,37 @@
+import { defineClientConfig } from 'vuepress/client'
+import type { ClientConfig } from 'vuepress/client'
+import { pluginOptions } from './options.js'
+import { setupCanIUse } from './composables/setupCanIUse.js'
+import PDFViewer from './components/PDFViewer.vue'
+import Bilibili from './components/Bilibili.vue'
+import Youtube from './components/Youtube.vue'
+import Replit from './components/Replit.vue'
+
+import '@internal/md-power/icons.css'
+
+declare const __VUEPRESS_SSR__: boolean
+
+export default defineClientConfig({
+  enhance({ router, app }) {
+    if (pluginOptions.pdf)
+      app.component('PDFViewer', PDFViewer)
+
+    if (pluginOptions.bilibili)
+      app.component('VideoBilibili', Bilibili)
+
+    if (pluginOptions.youtube)
+      app.component('VideoYoutube', Youtube)
+
+    if (pluginOptions.replit)
+      app.component('ReplitViewer', Replit)
+
+    if (__VUEPRESS_SSR__)
+      return
+
+    if (pluginOptions.caniuse) {
+      router.afterEach(() => {
+        setupCanIUse()
+      })
+    }
+  },
+}) as ClientConfig
diff --git a/plugins/plugin-md-power/src/client/index.ts b/plugins/plugin-md-power/src/client/index.ts
new file mode 100644
index 00000000..72593733
--- /dev/null
+++ b/plugins/plugin-md-power/src/client/index.ts
@@ -0,0 +1 @@
+export * from '../shared/index.js'
diff --git a/plugins/plugin-md-power/src/client/options.ts b/plugins/plugin-md-power/src/client/options.ts
new file mode 100644
index 00000000..10c4b9a0
--- /dev/null
+++ b/plugins/plugin-md-power/src/client/options.ts
@@ -0,0 +1,5 @@
+import type { MarkdownPowerPluginOptions } from '../shared/index.js'
+
+declare const __MD_POWER_INJECT_OPTIONS__: MarkdownPowerPluginOptions
+
+export const pluginOptions = __MD_POWER_INJECT_OPTIONS__
diff --git a/plugins/plugin-md-power/src/client/shim.d.ts b/plugins/plugin-md-power/src/client/shim.d.ts
new file mode 100644
index 00000000..f07bbd33
--- /dev/null
+++ b/plugins/plugin-md-power/src/client/shim.d.ts
@@ -0,0 +1,6 @@
+declare module '*.vue' {
+  import type { ComponentOptions } from 'vue'
+
+  const comp: ComponentOptions
+  export default comp
+}
diff --git a/plugins/plugin-md-power/src/client/utils/is.ts b/plugins/plugin-md-power/src/client/utils/is.ts
new file mode 100644
index 00000000..fa23aada
--- /dev/null
+++ b/plugins/plugin-md-power/src/client/utils/is.ts
@@ -0,0 +1,15 @@
+export function checkIsMobile(ua: string): boolean {
+  return /\b(?:Android|iPhone)/i.test(ua)
+}
+
+export function checkIsSafari(ua: string): boolean {
+  return /version\/([\w.]+) .*(mobile ?safari|safari)/i.test(ua)
+}
+
+export function checkIsiPad(ua: string): boolean {
+  return [
+    /\((ipad);[-\w),; ]+apple/i,
+    /applecoremedia\/[\w.]+ \((ipad)/i,
+    /\b(ipad)\d\d?,\d\d?[;\]].+ios/i,
+  ].some(item => item.test(ua))
+}
diff --git a/plugins/plugin-md-power/src/client/utils/link.ts b/plugins/plugin-md-power/src/client/utils/link.ts
new file mode 100644
index 00000000..600912c3
--- /dev/null
+++ b/plugins/plugin-md-power/src/client/utils/link.ts
@@ -0,0 +1,6 @@
+import { isLinkHttp } from 'vuepress/shared'
+import { withBase } from 'vuepress/client'
+
+export function normalizeLink(url: string): string {
+  return isLinkHttp(url) ? url : withBase(url)
+}
diff --git a/plugins/plugin-md-power/src/node/features/caniuse.ts b/plugins/plugin-md-power/src/node/features/caniuse.ts
new file mode 100644
index 00000000..2f5c3b70
--- /dev/null
+++ b/plugins/plugin-md-power/src/node/features/caniuse.ts
@@ -0,0 +1,179 @@
+/**
+ * @[caniuse embed{1,2,3,4}](feature_name)
+ * @[caniuse image](feature_name)
+ */
+import type { PluginWithOptions, Token } from 'markdown-it'
+import type { RuleBlock } from 'markdown-it/lib/parser_block.js'
+import type { Markdown } from 'vuepress/markdown'
+import container from 'markdown-it-container'
+import type { CanIUseMode, CanIUseOptions, CanIUseTokenMeta } from '../../shared/index.js'
+
+// @[caniuse]()
+const minLength = 12
+
+// char codes of '@[caniuse'
+const START_CODES = [64, 91, 99, 97, 110, 105, 117, 115, 101]
+
+// regexp to match the import syntax
+const SYNTAX_RE = /^@\[caniuse(?:\s*?(embed|image)?(?:{([0-9,\-]*?)})?)\]\(([^)]*)\)/
+
+function createCanIUseRuleBlock(defaultMode: CanIUseMode): RuleBlock {
+  return (state, startLine, endLine, silent) => {
+    const pos = state.bMarks[startLine] + state.tShift[startLine]
+    const max = state.eMarks[startLine]
+
+    // return false if the length is shorter than min length
+    if (pos + minLength > max)
+      return false
+
+    // check if it's matched the start
+    for (let i = 0; i < START_CODES.length; i += 1) {
+      if (state.src.charCodeAt(pos + i) !== START_CODES[i])
+        return false
+    }
+
+    // check if it's matched the syntax
+    const match = state.src.slice(pos, max).match(SYNTAX_RE)
+    if (!match)
+      return false
+
+    // return true as we have matched the syntax
+    if (silent)
+      return true
+
+    const [, mode, versions = '', feature] = match
+
+    const meta: CanIUseTokenMeta = {
+      feature,
+      mode: (mode as CanIUseMode) || defaultMode,
+      versions,
+    }
+
+    const token = state.push('caniuse', '', 0)
+
+    token.meta = meta
+    token.map = [startLine, startLine + 1]
+    token.info = mode || defaultMode
+
+    state.line = startLine + 1
+
+    return true
+  }
+}
+
+function resolveCanIUse({ feature, mode, versions }: CanIUseTokenMeta): string {
+  if (!feature)
+    return ''
+
+  if (mode === 'image') {
+    const link = 'https://caniuse.bitsofco.de/image/'
+    const alt = `Data on support for the ${feature} feature across the major browsers from caniuse.com`
+    return `<ClientOnly><p><picture>
+      <source type="image/webp" srcset="${link}${feature}.webp">
+      <source type="image/png" srcset="${link}${feature}.png">
+      <img src="${link}${feature}.jpg" alt="${alt}" width="100%">
+    </picture></p></ClientOnly>`
+  }
+
+  const periods = resolveVersions(versions)
+  const accessible = 'false'
+  const image = 'none'
+  const url = 'https://caniuse.bitsofco.de/embed/index.html'
+  const src = `${url}?feat=${feature}&periods=${periods}&accessible-colours=${accessible}&image-base=${image}`
+
+  return `<ClientOnly><div class="ciu_embed" style="margin:16px 0" data-feature="${feature}"><iframe src="${src}" frameborder="0" width="100%" height="400px" title="Can I use${feature}"></iframe></div></ClientOnly>`
+}
+
+function resolveVersions(versions: string): string {
+  if (!versions)
+    return 'future_1,current,past_1,past_2'
+
+  const list = versions
+    .split(',')
+    .map(v => Number(v.trim()))
+    .filter(v => !Number.isNaN(v) && v >= -5 && v <= 3)
+
+  list.push(0)
+
+  const uniq = [...new Set(list)].sort((a, b) => b - a)
+  const result: string[] = []
+  uniq.forEach((v) => {
+    if (v < 0)
+      result.push(`past_${Math.abs(v)}`)
+    if (v === 0)
+      result.push('current')
+    if (v > 0)
+      result.push(`future_${v}`)
+  })
+  return result.join(',')
+}
+
+/**
+ * @example
+ * ```md
+ * @[caniuse](feature_name)
+ * ```
+ */
+export const caniusePlugin: PluginWithOptions<CanIUseOptions> = (
+  md,
+  { mode = 'embed' }: CanIUseOptions = {},
+): void => {
+  md.block.ruler.before(
+    'import_code',
+    'caniuse',
+    createCanIUseRuleBlock(mode),
+    {
+      alt: ['paragraph', 'reference', 'blockquote', 'list'],
+    },
+  )
+
+  md.renderer.rules.caniuse = (tokens, index) => {
+    const token = tokens[index]
+
+    const content = resolveCanIUse(token.meta)
+    token.content = content
+
+    return content
+  }
+}
+
+/**
+ * @deprecated use caniuse plugin
+ *
+ * 兼容旧语法
+ * @example
+ * ```md
+ * :::caniuse <feature_name>
+ * :::
+ * ```
+ */
+export function legacyCaniuse(
+  md: Markdown,
+  { mode = 'embed' }: CanIUseOptions = {},
+): void {
+  const modeMap: CanIUseMode[] = ['image', 'embed']
+  const isMode = (mode: CanIUseMode): boolean => modeMap.includes(mode)
+
+  mode = isMode(mode) ? mode : modeMap[0]
+  const type = 'caniuse'
+  const validateReg = new RegExp(`^${type}\\s+(.*)$`)
+
+  const validate = (info: string): boolean => {
+    return validateReg.test(info.trim())
+  }
+
+  const render = (tokens: Token[], index: number): string => {
+    const token = tokens[index]
+    if (token.nesting === 1) {
+      const info = token.info.trim().slice(type.length).trim() || ''
+      const feature = info.split(/\s+/)[0]
+      const versions = info.match(/\{(.*)\}/)?.[1] || ''
+      return feature ? resolveCanIUse({ feature, mode, versions }) : ''
+    }
+    else {
+      return ''
+    }
+  }
+
+  md.use(container, type, { validate, render })
+}
diff --git a/plugins/plugin-md-power/src/node/features/codepen.ts b/plugins/plugin-md-power/src/node/features/codepen.ts
new file mode 100644
index 00000000..85ab5cfe
--- /dev/null
+++ b/plugins/plugin-md-power/src/node/features/codepen.ts
@@ -0,0 +1,109 @@
+/**
+ * @[codepen](user/slash)
+ * @[codepen preview](user/slash)
+ * @[codepen preview editable title="" height="400px" tab="css,result" theme="dark"](user/slash)
+ */
+import type { PluginWithOptions } from 'markdown-it'
+import type { RuleBlock } from 'markdown-it/lib/parser_block.js'
+import { resolveAttrs } from '../utils/resolveAttrs.js'
+import { parseRect } from '../utils/parseRect.js'
+import type { CodepenTokenMeta } from '../../shared/codepen.js'
+
+const CODEPEN_LINK = 'https://codepen.io/'
+
+// @[codepen]()
+const MIN_LENGTH = 12
+
+// char codes of `@[codepen`
+const START_CODES = [64, 91, 99, 111, 100, 101, 112, 101, 110]
+
+// regexp to match the import syntax
+const SYNTAX_RE = /^@\[codepen(?:\s+([^]*?))?\]\(([^)]*?)\)/
+
+function createCodepenRuleBlock(): RuleBlock {
+  return (state, startLine, endLine, silent) => {
+    const pos = state.bMarks[startLine] + state.tShift[startLine]
+    const max = state.eMarks[startLine]
+
+    // return false if the length is shorter than min length
+    if (pos + MIN_LENGTH > max)
+      return false
+
+    // check if it's matched the start
+    for (let i = 0; i < START_CODES.length; i += 1) {
+      if (state.src.charCodeAt(pos + i) !== START_CODES[i])
+        return false
+    }
+
+    // check if it's matched the syntax
+    const match = state.src.slice(pos, max).match(SYNTAX_RE)
+    if (!match)
+      return false
+
+    // return true as we have matched the syntax
+    if (silent)
+      return true
+
+    const [, info = '', source] = match
+
+    const { attrs } = resolveAttrs(info)
+    const [user, slash] = source.split('/')
+
+    const meta: CodepenTokenMeta = {
+      width: attrs.width ? parseRect(attrs.width) : '100%',
+      height: attrs.height ? parseRect(attrs.height) : '400px',
+      user,
+      slash,
+      title: attrs.title,
+      preview: attrs.preview,
+      editable: attrs.editable,
+      tab: attrs.tab ?? 'result',
+      theme: attrs.theme,
+    }
+
+    const token = state.push('codepen', '', 0)
+
+    token.meta = meta
+    token.map = [startLine, startLine + 1]
+    token.info = info
+
+    state.line = startLine + 1
+
+    return true
+  }
+}
+
+function resolveCodepen(meta: CodepenTokenMeta): string {
+  const { title = 'Codepen', height, width } = meta
+  const params = new URLSearchParams()
+  meta.editable && params.set('editable', 'true')
+  meta.tab && params.set('default-tab', meta.tab)
+  meta.theme && params.set('theme-id', meta.theme)
+
+  const middle = meta.preview ? '/embed/preview/' : '/embed/'
+
+  const link = `${CODEPEN_LINK}${meta.user}${middle}${meta.slash}?${params.toString()}`
+  const style = `width:${width};height:${height};margin:16px auto;border-radius:5px;`
+
+  return `<iframe class="code-pen-iframe-wrapper" src="${link}" title="${title}" style="${style}" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">See the Pen <a href="${CODEPEN_LINK}${meta.user}/pen/${meta.slash}">${title}</a> by ${meta.user} (<a href="${CODEPEN_LINK}${meta.user}">@${meta.user}</a>) on <a href="${CODEPEN_LINK}">CodePen</a>.</iframe>`
+}
+
+export const codepenPlugin: PluginWithOptions<never> = (md) => {
+  md.block.ruler.before(
+    'import_code',
+    'codepen',
+    createCodepenRuleBlock(),
+    {
+      alt: ['paragraph', 'reference', 'blockquote', 'list'],
+    },
+  )
+
+  md.renderer.rules.codepen = (tokens, index) => {
+    const token = tokens[index]
+
+    const content = resolveCodepen(token.meta)
+    token.content = content
+
+    return content
+  }
+}
diff --git a/plugins/plugin-md-power/src/node/features/icons/index.ts b/plugins/plugin-md-power/src/node/features/icons/index.ts
new file mode 100644
index 00000000..714b313e
--- /dev/null
+++ b/plugins/plugin-md-power/src/node/features/icons/index.ts
@@ -0,0 +1,2 @@
+export * from './writer.js'
+export * from './plugin.js'
diff --git a/plugins/plugin-md-power/src/node/features/icons/plugin.ts b/plugins/plugin-md-power/src/node/features/icons/plugin.ts
new file mode 100644
index 00000000..64a0bb50
--- /dev/null
+++ b/plugins/plugin-md-power/src/node/features/icons/plugin.ts
@@ -0,0 +1,96 @@
+/**
+ * :[mdi:11]:
+ * :[mdi:11 24px]:
+ * :[mid:11 /#ccc]:
+ * :[fluent-mdl2:toggle-filled 128px/#fff]:
+ */
+import type { PluginWithOptions } from 'markdown-it'
+import type { RuleInline } from 'markdown-it/lib/parser_inline.js'
+import { parseRect } from '../../utils/parseRect.js'
+
+type AddIcon = (iconName: string) => string | undefined
+
+function createTokenizer(addIcon: AddIcon): RuleInline {
+  return (state, silent) => {
+    let found = false
+    const max = state.posMax
+    const start = state.pos
+
+    if (state.src.slice(start, start + 2) !== ':[')
+      return false
+
+    if (silent)
+      return false
+
+    // :[]:
+    if (max - start < 5)
+      return false
+
+    state.pos = start + 2
+
+    while (state.pos < max) {
+      if (state.src.slice(state.pos, state.pos + 2) === ']:') {
+        found = true
+        break
+      }
+
+      state.md.inline.skipToken(state)
+    }
+
+    if (!found || start + 2 === state.pos) {
+      state.pos = start
+
+      return false
+    }
+    const content = state.src.slice(start + 2, state.pos)
+
+    // 不允许前后带有空格
+    if (/^\s|\s$/.test(content)) {
+      state.pos = start
+      return false
+    }
+
+    // found!
+    state.posMax = state.pos
+    state.pos = start + 2
+
+    const [iconName, options = ''] = content.split(/\s+/)
+    const [size, color] = options.split('/')
+
+    const open = state.push('iconify_open', 'span', 1)
+    open.markup = ':['
+
+    const className = addIcon(iconName)
+
+    if (className)
+      open.attrSet('class', className)
+
+    let style = ''
+    if (size)
+      style += `width:${parseRect(size)};height:${parseRect(size)};`
+
+    if (color)
+      style += `color:${color};`
+
+    if (style)
+      open.attrSet('style', style)
+
+    const text = state.push('text', '', 0)
+    text.content = className ? '' : iconName
+
+    const close = state.push('iconify_close', 'span', -1)
+    close.markup = ']:'
+
+    state.pos = state.posMax + 2
+    state.posMax = max
+
+    return true
+  }
+}
+
+export const iconsPlugin: PluginWithOptions<AddIcon> = (
+  md,
+  addIcon = () => '',
+) => {
+  md.inline.ruler.before('emphasis', 'iconify', createTokenizer(addIcon))
+}
diff --git a/plugins/plugin-md-power/src/node/features/icons/writer.ts b/plugins/plugin-md-power/src/node/features/icons/writer.ts
new file mode 100644
index 00000000..de389421
--- /dev/null
+++ b/plugins/plugin-md-power/src/node/features/icons/writer.ts
@@ -0,0 +1,128 @@
+import type { App } from 'vuepress/core'
+import { getIconContentCSS, getIconData } from '@iconify/utils'
+import { fs, logger } from 'vuepress/utils'
+import { isPackageExists } from 'local-pkg'
+import { customAlphabet } from 'nanoid'
+import type { IconsOptions } from '../../../shared/icons.js'
+import { interopDefault } from '../../utils/package.js'
+import { parseRect } from '../../utils/parseRect.js'
+
+export interface IconCacheItem {
+  className: string
+  content: string
+}
+
+const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ', 8)
+const iconDataCache = new Map<string, any>()
+const URL_CONTENT_RE = /(url\([^]+?\))/
+
+function resolveOption(opt?: boolean | IconsOptions): Required<IconsOptions> {
+  const options = typeof opt === 'object' ? opt : {}
+  options.prefix ??= 'vp-mdi'
+  options.color = options.color === 'currentColor' || !options.color ? 'currentcolor' : options.color
+  options.size = options.size ? parseRect(`${options.size}`) : '1em'
+  return options as Required<IconsOptions>
+}
+
+export function createIconCSSWriter(app: App, opt?: boolean | IconsOptions) {
+  const cache = new Map<string, IconCacheItem>()
+  const isInstalled = isPackageExists('@iconify/json')
+
+  const write = (content: string) => app.writeTemp('internal/md-power/icons.css', content)
+
+  const options = resolveOption(opt)
+  const prefix = options.prefix
+  const defaultContent = getDefaultContent(options)
+
+  async function writeCss() {
+    let css = defaultContent
+
+    for (const [, { content, className }] of cache)
+      css += `.${className} {\n  --svg: ${content};\n}\n`
+
+    await write(css)
+  }
+
+  function addIcon(iconName: string) {
+    if (!isInstalled)
+      return
+
+    if (cache.has(iconName))
+      return cache.get(iconName)!.className
+
+    const item: IconCacheItem = {
+      className: `${prefix}-${nanoid()}`,
+      content: '',
+    }
+    cache.set(iconName, item)
+    genIconContent(iconName, (content) => {
+      item.content = content
+      writeCss()
+    })
+    return item.className
+  }
+
+  async function initIcon() {
+    if (!opt)
+      return await write('')
+
+    if (!isInstalled) {
+      logger.error('[plugin-md-power]: `@iconify/json` not found! Please install `@iconify/json` first.')
+      return
+    }
+
+    return await writeCss()
+  }
+
+  return { addIcon, writeCss, initIcon }
+}
+
+function getDefaultContent(options: Required<IconsOptions>) {
+  const { prefix, size, color } = options
+  return `[class^="${prefix}-"],
+[class*=" ${prefix}-"] {
+  display: inline-block;
+  width: ${size};
+  height: ${size};
+  vertical-align: middle;
+  color: inherit;
+  background-color: ${color};
+  -webkit-mask: var(--svg) no-repeat;
+  mask: var(--svg) no-repeat;
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+}
+`
+}
+
+let locate: ((name: string) => any) | undefined
+
+async function genIconContent(iconName: string, cb: (content: string) => void) {
+  if (!locate) {
+    const mod = await interopDefault(import('@iconify/json'))
+    locate = mod.locate
+  }
+
+  const [collect, name] = iconName.split(':')
+  let iconJson: any = iconDataCache.get(collect)
+  if (!iconJson) {
+    const filename = locate(collect)
+
+    try {
+      iconJson = JSON.parse(await fs.readFile(filename, 'utf-8'))
+      iconDataCache.set(collect, iconJson)
+    }
+    catch (e) {
+      logger.warn(`[plugin-md-power] Can not find icon, ${collect} is missing!`)
+    }
+  }
+  const data = getIconData(iconJson, name)
+  if (!data)
+    return logger.error(`[plugin-md-power] Can not read icon in ${collect}, ${name} is missing!`)
+
+  const content = getIconContentCSS(data, {
+    height: data.height || 24,
+  })
+  const match = content.match(URL_CONTENT_RE)
+  return cb(match ? match[1] : '')
+}
diff --git a/plugins/plugin-md-power/src/node/features/pdf.ts b/plugins/plugin-md-power/src/node/features/pdf.ts
new file mode 100644
index 00000000..6a18b5a3
--- /dev/null
+++ b/plugins/plugin-md-power/src/node/features/pdf.ts
@@ -0,0 +1,97 @@
+/**
+ * @[pdf](/xxx)
+ * @[pdf 1](/xxx)
+ * @[pdf 1 no-toolbar width="100%" height="600px" zoom="1" ratio="1:1"](/xxx)
+ */
+import { path } from 'vuepress/utils'
+import type { PluginWithOptions } from 'markdown-it'
+import type { RuleBlock } from 'markdown-it/lib/parser_block.js'
+import type { PDFTokenMeta } from '../../shared/pdf.js'
+import { resolveAttrs } from '../utils/resolveAttrs.js'
+import { parseRect } from '../utils/parseRect.js'
+
+// @[pdf]()
+const MIN_LENGTH = 8
+
+// char codes of `@[pdf`
+const START_CODES = [64, 91, 112, 100, 102]
+
+// regexp to match the import syntax
+const SYNTAX_RE = /^@\[pdf(?:\s+(\d+))?(?:\s+([^]*?))?\]\(([^)]*?)\)/
+
+function createPDFRuleBlock(): RuleBlock {
+  return (state, startLine, endLine, silent) => {
+    const pos = state.bMarks[startLine] + state.tShift[startLine]
+    const max = state.eMarks[startLine]
+
+    // return false if the length is shorter than min length
+    if (pos + MIN_LENGTH > max)
+      return false
+
+    // check if it's matched the start
+    for (let i = 0; i < START_CODES.length; i += 1) {
+      if (state.src.charCodeAt(pos + i) !== START_CODES[i])
+        return false
+    }
+
+    // check if it's matched the syntax
+    const match = state.src.slice(pos, max).match(SYNTAX_RE)
+    if (!match)
+      return false
+
+    // return true as we have matched the syntax
+    if (silent)
+      return true
+
+    const [, page, info = '', src] = match
+
+    const { attrs } = resolveAttrs(info)
+
+    const meta: PDFTokenMeta = {
+      src,
+      page: +page || 1,
+      noToolbar: Boolean(attrs.noToolbar ?? false),
+      zoom: +attrs.zoom || 1,
+      width: attrs.width ? parseRect(attrs.width) : '100%',
+      height: attrs.height ? parseRect(attrs.height) : '',
+      ratio: attrs.ratio ? parseRect(attrs.ratio) : '',
+      title: path.basename(src || ''),
+    }
+
+    const token = state.push('pdf', '', 0)
+
+    token.meta = meta
+    token.map = [startLine, startLine + 1]
+    token.info = info
+
+    state.line = startLine + 1
+
+    return true
+  }
+}
+
+function resolvePDF(meta: PDFTokenMeta): string {
+  const { title, src, page, noToolbar, width, height, ratio, zoom } = meta
+
+  return `<PDFViewer src="${src}" title="${title}" :page="${page}" :no-toolbar="${noToolbar}" width="${width}" height="${height}" ratio="${ratio}" :zoom="${zoom}" />`
+}
+
+export const pdfPlugin: PluginWithOptions<never> = (md) => {
+  md.block.ruler.before(
+    'import_code',
+    'pdf',
+    createPDFRuleBlock(),
+    {
+      alt: ['paragraph', 'reference', 'blockquote', 'list'],
+    },
+  )
+
+  md.renderer.rules.pdf = (tokens, index) => {
+    const token = tokens[index]
+
+    const content = resolvePDF(token.meta)
+    token.content = content
+
+    return content
+  }
+}
diff --git a/plugins/plugin-md-power/src/node/features/replit.ts b/plugins/plugin-md-power/src/node/features/replit.ts
new file mode 100644
index 00000000..7e49ceae
--- /dev/null
+++ b/plugins/plugin-md-power/src/node/features/replit.ts
@@ -0,0 +1,93 @@
+/**
+ * @[replit](user/repl-name)
+ * @[replit](user/repl-name#filepath)
+ * @[replit title="" height="400px" width="100%" theme="dark"](user/repl-name)
+ */
+import type { PluginWithOptions } from 'markdown-it'
+import type { RuleBlock } from 'markdown-it/lib/parser_block.js'
+import { resolveAttrs } from '../utils/resolveAttrs.js'
+import { parseRect } from '../utils/parseRect.js'
+import type { ReplitTokenMeta } from '../../shared/replit.js'
+
+// @[replit]()
+const MIN_LENGTH = 11
+
+// char codes of `@[replit`
+const START_CODES = [64, 91, 114, 101, 112, 108, 105, 116]
+
+// regexp to match the import syntax
+const SYNTAX_RE = /^@\[replit(?:\s+([^]*?))?\]\(([^)]*?)\)/
+
+function createReplitRuleBlock(): RuleBlock {
+  return (state, startLine, endLine, silent) => {
+    const pos = state.bMarks[startLine] + state.tShift[startLine]
+    const max = state.eMarks[startLine]
+
+    // return false if the length is shorter than min length
+    if (pos + MIN_LENGTH > max)
+      return false
+
+    // check if it's matched the start
+    for (let i = 0; i < START_CODES.length; i += 1) {
+      if (state.src.charCodeAt(pos + i) !== START_CODES[i])
+        return false
+    }
+
+    // check if it's matched the syntax
+    const match = state.src.slice(pos, max).match(SYNTAX_RE)
+    if (!match)
+      return false
+
+    // return true as we have matched the syntax
+    if (silent)
+      return true
+
+    const [, info = '', source] = match
+
+    const { attrs } = resolveAttrs(info)
+
+    const meta: ReplitTokenMeta = {
+      width: attrs.width ? parseRect(attrs.width) : '100%',
+      height: attrs.height ? parseRect(attrs.height) : '450px',
+      source: source.startsWith('@') ? source : `@${source}`,
+      title: attrs.title,
+      theme: attrs.theme || '',
+    }
+
+    const token = state.push('replit', '', 0)
+
+    token.meta = meta
+    token.map = [startLine, startLine + 1]
+    token.info = info
+
+    state.line = startLine + 1
+
+    return true
+  }
+}
+
+function resolveReplit(meta: ReplitTokenMeta): string {
+  const { title, height, width, source, theme } = meta
+
+  return `<ReplitViewer title="${title || ''}" height="${height}" width="${width}" source="${source}" theme="${theme}" />`
+}
+
+export const replitPlugin: PluginWithOptions<never> = (md) => {
+  md.block.ruler.before(
+    'import_code',
+    'replit',
+    createReplitRuleBlock(),
+    {
+      alt: ['paragraph', 'reference', 'blockquote', 'list'],
+    },
+  )
+
+  md.renderer.rules.replit = (tokens, index) => {
+    const token = tokens[index]
+
+    const content = resolveReplit(token.meta)
+    token.content = content
+
+    return content
+  }
+}
diff --git a/plugins/plugin-md-power/src/node/features/video/bilibili.ts b/plugins/plugin-md-power/src/node/features/video/bilibili.ts
new file mode 100644
index 00000000..f6454806
--- /dev/null
+++ b/plugins/plugin-md-power/src/node/features/video/bilibili.ts
@@ -0,0 +1,115 @@
+/**
+ * @[bilibili](bid)
+ * @[bilibili](aid cid)
+ * @[bilibili](bid aid cid)
+ * @[bilibili p1 autoplay time=1](aid cid)
+ */
+import { URLSearchParams } from 'node:url'
+import type { PluginWithOptions } from 'markdown-it'
+import type { RuleBlock } from 'markdown-it/lib/parser_block.js'
+import type { BilibiliTokenMeta } from '../../../shared/video.js'
+import { resolveAttrs } from '../../utils/resolveAttrs.js'
+import { parseRect } from '../../utils/parseRect.js'
+import { timeToSeconds } from '../../utils/timeToSeconds.js'
+
+const BILIBILI_LINK = 'https://player.bilibili.com/player.html'
+
+// @[bilibili]()
+const MIN_LENGTH = 13
+
+// char codes of '@[bilibili'
+const START_CODES = [64, 91, 98, 105, 108, 105, 98, 105, 108, 105]
+
+// regexp to match the import syntax
+const SYNTAX_RE = /^@\[bilibili(?:\s+p(\d+))?(?:\s+([^]*?))?\]\(([^)]*)\)/
+
+function createBilibiliRuleBlock(): RuleBlock {
+  return (state, startLine, endLine, silent) => {
+    const pos = state.bMarks[startLine] + state.tShift[startLine]
+    const max = state.eMarks[startLine]
+
+    // return false if the length is shorter than min length
+    if (pos + MIN_LENGTH > max)
+      return false
+
+    // check if it's matched the start
+    for (let i = 0; i < START_CODES.length; i += 1) {
+      if (state.src.charCodeAt(pos + i) !== START_CODES[i])
+        return false
+    }
+
+    // check if it's matched the syntax
+    const match = state.src.slice(pos, max).match(SYNTAX_RE)
+    if (!match)
+      return false
+
+    // return true as we have matched the syntax
+    if (silent)
+      return true
+
+    const [, page, info = '', source = ''] = match
+
+    const { attrs } = resolveAttrs(info)
+    const ids = source.trim().split(/\s+/)
+    const bvid = ids.find(id => id.startsWith('BV'))
+    const [aid, cid] = ids.filter(id => !id.startsWith('BV'))
+
+    const meta: BilibiliTokenMeta = {
+      page: +page || 1,
+      bvid,
+      aid,
+      cid,
+      autoplay: attrs.autoplay ?? false,
+      time: timeToSeconds(attrs.time),
+      title: attrs.title,
+      width: attrs.width ? parseRect(attrs.width) : '100%',
+      height: attrs.height ? parseRect(attrs.height) : '',
+      ratio: attrs.ratio ? parseRect(attrs.ratio) : '',
+    }
+
+    const token = state.push('video_bilibili', '', 0)
+
+    token.meta = meta
+    token.map = [startLine, startLine + 1]
+    token.info = info
+
+    state.line = startLine + 1
+
+    return true
+  }
+}
+
+function resolveBilibili(meta: BilibiliTokenMeta): string {
+  const params = new URLSearchParams()
+
+  meta.bvid && params.set('bvid', meta.bvid)
+  meta.aid && params.set('aid', meta.aid)
+  meta.cid && params.set('cid', meta.cid)
+  meta.page && params.set('p', meta.page.toString())
+  meta.time && params.set('t', meta.time.toString())
+  params.set('autoplay', meta.autoplay ? '1' : '0')
+
+  const source = `${BILIBILI_LINK}?${params.toString()}`
+
+  return `<VideoBilibili src="${source}" width="${meta.width}" height="${meta.height}" ratio="${meta.ratio}" title="${meta.title}" />`
+}
+
+export const bilibiliPlugin: PluginWithOptions<never> = (md) => {
+  md.block.ruler.before(
+    'import_code',
+    'video_bilibili',
+    createBilibiliRuleBlock(),
+    {
+      alt: ['paragraph', 'reference', 'blockquote', 'list'],
+    },
+  )
+
+  md.renderer.rules.video_bilibili = (tokens, index) => {
+    const token = tokens[index]
+
+    const content = resolveBilibili(token.meta)
+    token.content = content
+
+    return content
+  }
+}
diff --git a/plugins/plugin-md-power/src/node/features/video/youtube.ts b/plugins/plugin-md-power/src/node/features/video/youtube.ts
new file mode 100644
index 00000000..bd10c598
--- /dev/null
+++ b/plugins/plugin-md-power/src/node/features/video/youtube.ts
@@ -0,0 +1,106 @@
+/**
+ * @[youtube](id)
+ */
+import { URLSearchParams } from 'node:url'
+import type { PluginWithOptions } from 'markdown-it'
+import type { RuleBlock } from 'markdown-it/lib/parser_block.js'
+import type { YoutubeTokenMeta } from '../../../shared/video.js'
+import { resolveAttrs } from '../../utils/resolveAttrs.js'
+import { parseRect } from '../../utils/parseRect.js'
+import { timeToSeconds } from '../../utils/timeToSeconds.js'
+
+const YOUTUBE_LINK = 'https://www.youtube.com/embed/'
+
+// @[youtube]()
+const MIN_LENGTH = 13
+
+// char codes of '@[youtube'
+const START_CODES = [64, 91, 121, 111, 117, 116, 117, 98, 101]
+
+// regexp to match the import syntax
+const SYNTAX_RE = /^@\[youtube(?:\s+([^]*?))?\]\(([^)]*)\)/
+
+function createYoutubeRuleBlock(): RuleBlock {
+  return (state, startLine, endLine, silent) => {
+    const pos = state.bMarks[startLine] + state.tShift[startLine]
+    const max = state.eMarks[startLine]
+
+    // return false if the length is shorter than min length
+    if (pos + MIN_LENGTH > max)
+      return false
+
+    // check if it's matched the start
+    for (let i = 0; i < START_CODES.length; i += 1) {
+      if (state.src.charCodeAt(pos + i) !== START_CODES[i])
+        return false
+    }
+
+    // check if it's matched the syntax
+    const match = state.src.slice(pos, max).match(SYNTAX_RE)
+    if (!match)
+      return false
+
+    // return true as we have matched the syntax
+    if (silent)
+      return true
+
+    const [, info = '', id = ''] = match
+
+    const { attrs } = resolveAttrs(info)
+
+    const meta: YoutubeTokenMeta = {
+      id,
+      autoplay: attrs.autoplay ?? false,
+      loop: attrs.loop ?? false,
+      start: timeToSeconds(attrs.start),
+      end: timeToSeconds(attrs.end),
+      title: attrs.title,
+      width: attrs.width ? parseRect(attrs.width) : '100%',
+      height: attrs.height ? parseRect(attrs.height) : '',
+      ratio: attrs.ratio ? parseRect(attrs.ratio) : '',
+    }
+
+    const token = state.push('video_youtube', '', 0)
+
+    token.meta = meta
+    token.map = [startLine, startLine + 1]
+    token.info = info
+
+    state.line = startLine + 1
+
+    return true
+  }
+}
+
+function resolveYoutube(meta: YoutubeTokenMeta): string {
+  const params = new URLSearchParams()
+
+  meta.autoplay && params.set('autoplay', '1')
+  meta.loop && params.set('loop', '1')
+  meta.start && params.set('start', meta.start.toString())
+  meta.end && params.set('end', meta.end.toString())
+
+  const source = `${YOUTUBE_LINK}/${meta.id}?${params.toString()}`
+
+  return `<VideoYoutube src="${source}" width="${meta.width}" height="${meta.height}" ratio="${meta.ratio}" title="${meta.title}" />`
+}
+
+export const youtubePlugin: PluginWithOptions<never> = (md) => {
+  md.block.ruler.before(
+    'import_code',
+    'video_youtube',
+    createYoutubeRuleBlock(),
+    {
+      alt: ['paragraph', 'reference', 'blockquote', 'list'],
+    },
+  )
+
+  md.renderer.rules.video_youtube = (tokens, index) => {
+    const token = tokens[index]
+
+    const content = resolveYoutube(token.meta)
+    token.content = content
+
+    return content
+  }
+}
diff --git a/plugins/plugin-md-power/src/node/index.ts b/plugins/plugin-md-power/src/node/index.ts
new file mode 100644
index 00000000..9c2a9e8f
--- /dev/null
+++ b/plugins/plugin-md-power/src/node/index.ts
@@ -0,0 +1,2 @@
+export * from './plugin.js'
+export * from '../shared/index.js'
diff --git a/plugins/plugin-md-power/src/node/markdown-it-container.d.ts b/plugins/plugin-md-power/src/node/markdown-it-container.d.ts
new file mode 100644
index 00000000..44347be7
--- /dev/null
+++ b/plugins/plugin-md-power/src/node/markdown-it-container.d.ts
@@ -0,0 +1,6 @@
+declare module 'markdown-it-container' {
+  import type { PluginWithParams } from 'markdown-it'
+
+  const container: PluginWithParams
+  export = container
+}
diff --git a/plugins/plugin-md-power/src/node/plugin.ts b/plugins/plugin-md-power/src/node/plugin.ts
new file mode 100644
index 00000000..3604e7d5
--- /dev/null
+++ b/plugins/plugin-md-power/src/node/plugin.ts
@@ -0,0 +1,70 @@
+import type { Plugin } from 'vuepress/core'
+import { getDirname, path } from 'vuepress/utils'
+import type { CanIUseOptions, MarkdownPowerPluginOptions } from '../shared/index.js'
+import { caniusePlugin, legacyCaniuse } from './features/caniuse.js'
+import { pdfPlugin } from './features/pdf.js'
+import { createIconCSSWriter, iconsPlugin } from './features/icons/index.js'
+import { bilibiliPlugin } from './features/video/bilibili.js'
+import { youtubePlugin } from './features/video/youtube.js'
+import { codepenPlugin } from './features/codepen.js'
+import { replitPlugin } from './features/replit.js'
+
+const __dirname = getDirname(import.meta.url)
+
+export function markdownPowerPlugin(options: MarkdownPowerPluginOptions = {}): Plugin {
+  return (app) => {
+    const { initIcon, addIcon } = createIconCSSWriter(app, options.icons)
+
+    return {
+      name: '@vuepress-plume/plugin-md-power',
+
+      clientConfigFile: path.resolve(__dirname, '../client/config.js'),
+
+      define: {
+        __MD_POWER_INJECT_OPTIONS__: options,
+      },
+
+      onInitialized: async () => await initIcon(),
+
+      extendsMarkdown(md) {
+        if (options.caniuse) {
+          const caniuse = options.caniuse === true ? {} : options.caniuse
+          // @[caniuse](feature_name)
+          md.use<CanIUseOptions>(caniusePlugin, caniuse)
+          // 兼容旧语法
+          legacyCaniuse(md, caniuse)
+        }
+
+        if (options.pdf) {
+          // @[pdf](url)
+          md.use(pdfPlugin)
+        }
+
+        if (options.icons) {
+          // :[collect:name]:
+          md.use(iconsPlugin, addIcon)
+        }
+
+        if (options.bilibili) {
+          // @[bilibili](bvid aid cid)
+          md.use(bilibiliPlugin)
+        }
+
+        if (options.youtube) {
+          // @[youtube](id)
+          md.use(youtubePlugin)
+        }
+
+        if (options.codepen) {
+          // @[codepen](user/slash)
+          md.use(codepenPlugin)
+        }
+
+        if (options.replit) {
+          // @[replit](user/repl-name)
+          md.use(replitPlugin)
+        }
+      },
+    }
+  }
+}
diff --git a/plugins/plugin-md-power/src/node/utils/package.ts b/plugins/plugin-md-power/src/node/utils/package.ts
new file mode 100644
index 00000000..5be4386c
--- /dev/null
+++ b/plugins/plugin-md-power/src/node/utils/package.ts
@@ -0,0 +1,6 @@
+export type Awaitable<T> = T | Promise<T>
+
+export async function interopDefault<T>(m: Awaitable<T>): Promise<T extends { default: infer U } ? U : T> {
+  const resolved = await m
+  return (resolved as any).default || resolved
+}
diff --git a/plugins/plugin-md-power/src/node/utils/parseRect.ts b/plugins/plugin-md-power/src/node/utils/parseRect.ts
new file mode 100644
index 00000000..8e8c41a1
--- /dev/null
+++ b/plugins/plugin-md-power/src/node/utils/parseRect.ts
@@ -0,0 +1,6 @@
+export function parseRect(str: string, unit = 'px'): string {
+  if (Number.parseFloat(str) === Number(str))
+    return `${str}${unit}`
+
+  return str
+}
diff --git a/plugins/plugin-md-power/src/node/utils/resolveAttrs.ts b/plugins/plugin-md-power/src/node/utils/resolveAttrs.ts
new file mode 100644
index 00000000..4465d4fb
--- /dev/null
+++ b/plugins/plugin-md-power/src/node/utils/resolveAttrs.ts
@@ -0,0 +1,41 @@
+const RE_ATTR_VALUE = /(?:^|\s+)(?<attr>[\w\d-]+)(?:=\s*(?<quote>['"])(?<value>.+?)\k<quote>)?(?:\s+|$)/
+
+export function resolveAttrs(info: string): {
+  attrs: Record<string, any>
+  rawAttrs: string
+} {
+  info = info.trim()
+
+  if (!info)
+    return { rawAttrs: '', attrs: {} }
+
+  const attrs: Record<string, string | boolean> = {}
+  const rawAttrs = info
+
+  let matched: RegExpMatchArray | null
+
+  // eslint-disable-next-line no-cond-assign
+  while (matched = info.match(RE_ATTR_VALUE)) {
+    const { attr, value } = matched.groups || {}
+    attrs[attr] = value ?? true
+    info = info.slice(matched[0].length)
+  }
+
+  Object.keys(attrs).forEach((key) => {
+    let value = attrs[key]
+    value = typeof value === 'string' ? value.trim() : value
+    if (value === 'true')
+      value = true
+    else if (value === 'false')
+      value = false
+
+    attrs[key] = value
+
+    if (key.includes('-')) {
+      const _key = key.replace(/-(\w)/g, (_, c) => c.toUpperCase())
+      attrs[_key] = value
+    }
+  })
+
+  return { attrs, rawAttrs }
+}
diff --git a/plugins/plugin-md-power/src/node/utils/timeToSeconds.ts b/plugins/plugin-md-power/src/node/utils/timeToSeconds.ts
new file mode 100644
index 00000000..44538856
--- /dev/null
+++ b/plugins/plugin-md-power/src/node/utils/timeToSeconds.ts
@@ -0,0 +1,11 @@
+export function timeToSeconds(time: string): number {
+  if (!time)
+    return 0
+
+  if (Number.parseFloat(time) === Number(time))
+    return Number(time)
+
+  const [s, m, h] = time.split(':').reverse().map(n => Number(n) || 0)
+
+  return s + m * 60 + h * 3600
+}
diff --git a/plugins/plugin-md-power/src/shared/caniuse.ts b/plugins/plugin-md-power/src/shared/caniuse.ts
new file mode 100644
index 00000000..8c746dd6
--- /dev/null
+++ b/plugins/plugin-md-power/src/shared/caniuse.ts
@@ -0,0 +1,20 @@
+export type CanIUseMode = 'embed' | 'image'
+
+export interface CanIUseTokenMeta {
+  feature: string
+  mode: CanIUseMode
+  versions: string
+}
+
+export interface CanIUseOptions {
+  /**
+   * 嵌入模式
+   *
+   * embed 通过iframe嵌入，提供可交互视图
+   *
+   * image 通过图片嵌入，静态
+   *
+   * @default 'embed'
+   */
+  mode?: CanIUseMode
+}
diff --git a/plugins/plugin-md-power/src/shared/codepen.ts b/plugins/plugin-md-power/src/shared/codepen.ts
new file mode 100644
index 00000000..004fdbe1
--- /dev/null
+++ b/plugins/plugin-md-power/src/shared/codepen.ts
@@ -0,0 +1,11 @@
+import type { SizeOptions } from './size'
+
+export interface CodepenTokenMeta extends SizeOptions {
+  title?: string
+  user?: string
+  slash?: string
+  tab?: string
+  theme?: string
+  preview?: boolean
+  editable?: boolean
+}
diff --git a/plugins/plugin-md-power/src/shared/icons.ts b/plugins/plugin-md-power/src/shared/icons.ts
new file mode 100644
index 00000000..93ef6e56
--- /dev/null
+++ b/plugins/plugin-md-power/src/shared/icons.ts
@@ -0,0 +1,19 @@
+export interface IconsOptions {
+  /**
+   * The prefix of the icon className
+   * @default 'vp-mdi'
+   */
+  prefix?: string
+
+  /**
+   * The size of the icon
+   * @default '1em'
+   */
+  size?: string | number
+
+  /**
+   * The color of the icon
+   * @default 'currentColor'
+   */
+  color?: string
+}
diff --git a/plugins/plugin-md-power/src/shared/index.ts b/plugins/plugin-md-power/src/shared/index.ts
new file mode 100644
index 00000000..7b449022
--- /dev/null
+++ b/plugins/plugin-md-power/src/shared/index.ts
@@ -0,0 +1,6 @@
+export * from './caniuse.js'
+export * from './pdf.js'
+export * from './icons.js'
+export * from './video.js'
+export * from './codepen.js'
+export * from './plugin.js'
diff --git a/plugins/plugin-md-power/src/shared/pdf.ts b/plugins/plugin-md-power/src/shared/pdf.ts
new file mode 100644
index 00000000..001ca69d
--- /dev/null
+++ b/plugins/plugin-md-power/src/shared/pdf.ts
@@ -0,0 +1,18 @@
+import type { SizeOptions } from './size'
+
+export type PDFEmbedType = 'iframe' | 'embed' | 'pdfjs'
+
+export interface PDFTokenMeta extends SizeOptions {
+  page?: number
+  noToolbar?: boolean
+  zoom?: number
+  src?: string
+  title?: string
+}
+
+export interface PDFOptions {
+  /**
+   * pdfjs url
+   */
+  pdfjsUrl?: string
+}
diff --git a/plugins/plugin-md-power/src/shared/plugin.ts b/plugins/plugin-md-power/src/shared/plugin.ts
new file mode 100644
index 00000000..31575788
--- /dev/null
+++ b/plugins/plugin-md-power/src/shared/plugin.ts
@@ -0,0 +1,20 @@
+import type { CanIUseOptions } from './caniuse.js'
+import type { PDFOptions } from './pdf.js'
+import type { IconsOptions } from './icons.js'
+
+export interface MarkdownPowerPluginOptions {
+  pdf?: boolean | PDFOptions
+
+  // new syntax
+  icons?: boolean | IconsOptions
+
+  // video embed
+  bilibili?: boolean
+  youtube?: boolean
+
+  // code embed
+  codepen?: boolean
+  replit?: boolean
+
+  caniuse?: boolean | CanIUseOptions
+}
diff --git a/plugins/plugin-md-power/src/shared/replit.ts b/plugins/plugin-md-power/src/shared/replit.ts
new file mode 100644
index 00000000..7f8414a5
--- /dev/null
+++ b/plugins/plugin-md-power/src/shared/replit.ts
@@ -0,0 +1,7 @@
+import type { SizeOptions } from './size'
+
+export interface ReplitTokenMeta extends SizeOptions {
+  title?: string
+  source?: string
+  theme?: string
+}
diff --git a/plugins/plugin-md-power/src/shared/size.ts b/plugins/plugin-md-power/src/shared/size.ts
new file mode 100644
index 00000000..b679c8e4
--- /dev/null
+++ b/plugins/plugin-md-power/src/shared/size.ts
@@ -0,0 +1,5 @@
+export interface SizeOptions {
+  width?: string
+  height?: string
+  ratio?: number | string
+}
diff --git a/plugins/plugin-md-power/src/shared/video.ts b/plugins/plugin-md-power/src/shared/video.ts
new file mode 100644
index 00000000..f04fa371
--- /dev/null
+++ b/plugins/plugin-md-power/src/shared/video.ts
@@ -0,0 +1,25 @@
+import type { SizeOptions } from './size'
+
+export interface VideoOptions {
+  bilibili?: boolean
+  youtube?: boolean
+}
+
+export interface BilibiliTokenMeta extends SizeOptions {
+  title?: string
+  bvid?: string
+  aid?: string
+  cid?: string
+  autoplay?: boolean
+  time?: string | number
+  page?: number
+}
+
+export interface YoutubeTokenMeta extends SizeOptions {
+  title?: string
+  id: string
+  autoplay?: boolean
+  loop?: boolean
+  start?: string | number
+  end?: string | number
+}
diff --git a/plugins/plugin-md-power/tsconfig.build.json b/plugins/plugin-md-power/tsconfig.build.json
new file mode 100644
index 00000000..6bf67375
--- /dev/null
+++ b/plugins/plugin-md-power/tsconfig.build.json
@@ -0,0 +1,8 @@
+{
+  "extends": "../tsconfig.build.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./lib"
+  },
+  "include": ["./src"]
+}
diff --git a/plugins/plugin-netlify-functions/package.json b/plugins/plugin-netlify-functions/package.json
index 0624aa1c..c005292c 100644
--- a/plugins/plugin-netlify-functions/package.json
+++ b/plugins/plugin-netlify-functions/package.json
@@ -52,11 +52,11 @@
     "dotenv": "^16.4.5",
     "esbuild": "^0.20.2",
     "execa": "^8.0.1",
-    "netlify-cli": "^17.20.1",
+    "netlify-cli": "^17.21.1",
     "portfinder": "^1.0.32"
   },
   "devDependencies": {
-    "@types/node": "^20.11.30"
+    "@types/node": "^20.12.2"
   },
   "publishConfig": {
     "access": "public"
diff --git a/plugins/plugin-shikiji/package.json b/plugins/plugin-shikiji/package.json
index 7a4ef045..3a9e4cd1 100644
--- a/plugins/plugin-shikiji/package.json
+++ b/plugins/plugin-shikiji/package.json
@@ -36,15 +36,15 @@
     "vuepress": "2.0.0-rc.9"
   },
   "dependencies": {
-    "@shikijs/transformers": "^1.2.0",
-    "@shikijs/twoslash": "^1.2.0",
+    "@shikijs/transformers": "^1.2.2",
+    "@shikijs/twoslash": "^1.2.2",
     "@types/hast": "^3.0.4",
     "floating-vue": "^5.2.2",
     "mdast-util-from-markdown": "^2.0.0",
     "mdast-util-gfm": "^3.0.0",
     "mdast-util-to-hast": "^13.1.0",
     "nanoid": "^5.0.6",
-    "shiki": "^1.2.0",
+    "shiki": "^1.2.2",
     "twoslash": "^0.2.5",
     "twoslash-vue": "^0.2.5"
   },
diff --git a/plugins/tsconfig.build.json b/plugins/tsconfig.build.json
index a3ed6c22..d5791746 100644
--- a/plugins/tsconfig.build.json
+++ b/plugins/tsconfig.build.json
@@ -15,7 +15,8 @@
     { "path": "./plugin-page-collection/tsconfig.build.json" },
     { "path": "./plugin-shikiji/tsconfig.build.json" },
     { "path": "./plugin-content-update/tsconfig.build.json" },
-    { "path": "./plugin-search/tsconfig.build.json" }
+    { "path": "./plugin-search/tsconfig.build.json" },
+    { "path": "./plugin-md-power/tsconfig.build.json" }
   ],
   "files": []
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a6a69aac..9cb93a6c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -24,7 +24,7 @@ importers:
         version: 1.7.0(@vue/compiler-sfc@3.4.21)(eslint@8.57.0)(typescript@5.4.3)
       '@pengzhanbo/stylelint-config':
         specifier: ^1.7.0
-        version: 1.7.0(stylelint@16.2.1)
+        version: 1.7.0(stylelint@16.3.1)
       '@types/lodash.merge':
         specifier: ^4.6.9
         version: 4.6.9
@@ -65,8 +65,8 @@ importers:
         specifier: ^5.0.5
         version: 5.0.5
       stylelint:
-        specifier: ^16.2.1
-        version: 16.2.1(typescript@5.4.3)
+        specifier: ^16.3.1
+        version: 16.3.1(typescript@5.4.3)
       tsconfig-vuepress:
         specifier: ^4.5.0
         version: 4.5.0
@@ -74,11 +74,14 @@ importers:
         specifier: ^5.4.3
         version: 5.4.3
       vite:
-        specifier: ^5.2.4
-        version: 5.2.4(@types/node@20.9.1)
+        specifier: ^5.2.7
+        version: 5.2.7(@types/node@20.9.1)
 
   docs:
     dependencies:
+      '@iconify/json':
+        specifier: ^2.2.196
+        version: 2.2.196
       '@vuepress/bundler-vite':
         specifier: 2.0.0-rc.9
         version: 2.0.0-rc.9(@types/node@20.9.1)(typescript@5.4.3)
@@ -202,6 +205,37 @@ importers:
         specifier: 2.0.0-rc.9
         version: 2.0.0-rc.9(@vuepress/bundler-vite@2.0.0-rc.9)(typescript@5.4.3)(vue@3.4.21)
 
+  plugins/plugin-md-power:
+    dependencies:
+      '@iconify/utils':
+        specifier: ^2.1.22
+        version: 2.1.22
+      '@vueuse/core':
+        specifier: ^10.9.0
+        version: 10.9.0(vue@3.4.21)
+      local-pkg:
+        specifier: ^0.5.0
+        version: 0.5.0
+      markdown-it-container:
+        specifier: ^4.0.0
+        version: 4.0.0
+      nanoid:
+        specifier: ^5.0.6
+        version: 5.0.6
+      vue:
+        specifier: ^3.4.21
+        version: 3.4.21(typescript@5.4.3)
+      vuepress:
+        specifier: 2.0.0-rc.9
+        version: 2.0.0-rc.9(@vuepress/bundler-vite@2.0.0-rc.9)(typescript@5.4.3)(vue@3.4.21)
+    devDependencies:
+      '@iconify/json':
+        specifier: ^2.2.196
+        version: 2.2.196
+      '@types/markdown-it':
+        specifier: ^13.0.7
+        version: 13.0.7
+
   plugins/plugin-netlify-functions:
     dependencies:
       '@iarna/toml':
@@ -229,8 +263,8 @@ importers:
         specifier: ^8.0.1
         version: 8.0.1
       netlify-cli:
-        specifier: ^17.20.1
-        version: 17.20.1(@types/node@20.11.30)
+        specifier: ^17.21.1
+        version: 17.21.1(@types/node@20.12.2)
       portfinder:
         specifier: ^1.0.32
         version: 1.0.32
@@ -239,8 +273,8 @@ importers:
         version: 2.0.0-rc.9(@vuepress/bundler-vite@2.0.0-rc.9)(typescript@5.4.3)(vue@3.4.21)
     devDependencies:
       '@types/node':
-        specifier: ^20.11.30
-        version: 20.11.30
+        specifier: ^20.12.2
+        version: 20.12.2
 
   plugins/plugin-notes-data:
     dependencies:
@@ -296,11 +330,11 @@ importers:
   plugins/plugin-shikiji:
     dependencies:
       '@shikijs/transformers':
-        specifier: ^1.2.0
-        version: 1.2.0
+        specifier: ^1.2.2
+        version: 1.2.2
       '@shikijs/twoslash':
-        specifier: ^1.2.0
-        version: 1.2.0(typescript@5.4.3)
+        specifier: ^1.2.2
+        version: 1.2.2(typescript@5.4.3)
       '@types/hast':
         specifier: ^3.0.4
         version: 3.0.4
@@ -320,8 +354,8 @@ importers:
         specifier: ^5.0.6
         version: 5.0.6
       shiki:
-        specifier: ^1.2.0
-        version: 1.2.0
+        specifier: ^1.2.2
+        version: 1.2.2
       twoslash:
         specifier: ^0.2.5
         version: 0.2.5(typescript@5.4.3)
@@ -346,9 +380,6 @@ importers:
       '@vuepress-plume/plugin-blog-data':
         specifier: workspace:*
         version: link:../plugins/plugin-blog-data
-      '@vuepress-plume/plugin-caniuse':
-        specifier: workspace:*
-        version: link:../plugins/plugin-caniuse
       '@vuepress-plume/plugin-content-update':
         specifier: workspace:*
         version: link:../plugins/plugin-content-update
@@ -419,8 +450,8 @@ importers:
         specifier: ^3.6.0
         version: 3.6.0
       katex:
-        specifier: ^0.16.9
-        version: 0.16.9
+        specifier: ^0.16.10
+        version: 0.16.10
       lodash.merge:
         specifier: ^4.6.2
         version: 4.6.2
@@ -438,7 +469,10 @@ importers:
         version: 2.0.0-rc.9(@vuepress/bundler-vite@2.0.0-rc.9)(typescript@5.4.3)(vue@3.4.21)
       vuepress-plugin-md-enhance:
         specifier: 2.0.0-rc.32
-        version: 2.0.0-rc.32(katex@0.16.9)(markdown-it@14.1.0)(typescript@5.4.3)(vuepress@2.0.0-rc.9)
+        version: 2.0.0-rc.32(katex@0.16.10)(markdown-it@14.1.0)(typescript@5.4.3)(vuepress@2.0.0-rc.9)
+      vuepress-plugin-md-power:
+        specifier: workspace:*
+        version: link:../plugins/plugin-md-power
 
 packages:
 
@@ -586,6 +620,17 @@ packages:
     engines: {node: '>=18.0.0', npm: '>=9.0.0', pnpm: '>= 8.6.0'}
     dev: true
 
+  /@antfu/install-pkg@0.1.1:
+    resolution: {integrity: sha512-LyB/8+bSfa0DFGC06zpCEfs89/XoWZwws5ygEa5D+Xsm3OfI+aXQ86VgVG7Acyef+rSZ5HE7J8rrxzrQeM3PjQ==}
+    dependencies:
+      execa: 5.1.1
+      find-up: 5.0.0
+    dev: false
+
+  /@antfu/utils@0.7.7:
+    resolution: {integrity: sha512-gFPqTG7otEJ8uP6wrhDv6mqwGWYZKNvAcCq6u9hOj0c+IKCEsY4L1oC9trPq2SaWIzAfHvqfBDxF591JkMf+kg==}
+    dev: false
+
   /@babel/code-frame@7.22.13:
     resolution: {integrity: sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==}
     engines: {node: '>=6.9.0'}
@@ -861,11 +906,25 @@ packages:
       '@csstools/css-tokenizer': 2.2.3
     dev: true
 
+  /@csstools/css-parser-algorithms@2.6.1(@csstools/css-tokenizer@2.2.4):
+    resolution: {integrity: sha512-ubEkAaTfVZa+WwGhs5jbo5Xfqpeaybr/RvWzvFxRs4jfq16wH8l8Ty/QEEpINxll4xhuGfdMbipRyz5QZh9+FA==}
+    engines: {node: ^14 || ^16 || >=18}
+    peerDependencies:
+      '@csstools/css-tokenizer': ^2.2.4
+    dependencies:
+      '@csstools/css-tokenizer': 2.2.4
+    dev: true
+
   /@csstools/css-tokenizer@2.2.3:
     resolution: {integrity: sha512-pp//EvZ9dUmGuGtG1p+n17gTHEOqu9jO+FiCUjNN3BDmyhdA2Jq9QsVeR7K8/2QCK17HSsioPlTW9ZkzoWb3Lg==}
     engines: {node: ^14 || ^16 || >=18}
     dev: true
 
+  /@csstools/css-tokenizer@2.2.4:
+    resolution: {integrity: sha512-PuWRAewQLbDhGeTvFuq2oClaSCKPIBmHyIobCV39JHRYN0byDcUWJl5baPeNUcqrjtdMNqFooE0FGl31I3JOqw==}
+    engines: {node: ^14 || ^16 || >=18}
+    dev: true
+
   /@csstools/media-query-list-parser@2.1.7(@csstools/css-parser-algorithms@2.5.0)(@csstools/css-tokenizer@2.2.3):
     resolution: {integrity: sha512-lHPKJDkPUECsyAvD60joYfDmp8UERYxHGkFfyLJFTVK/ERJe0sVlIFLXU5XFxdjNDTerp5L4KeaKG+Z5S94qxQ==}
     engines: {node: ^14 || ^16 || >=18}
@@ -877,13 +936,24 @@ packages:
       '@csstools/css-tokenizer': 2.2.3
     dev: true
 
-  /@csstools/selector-specificity@3.0.1(postcss-selector-parser@6.0.15):
-    resolution: {integrity: sha512-NPljRHkq4a14YzZ3YD406uaxh7s0g6eAq3L9aLOWywoqe8PkYamAvtsh7KNX6c++ihDrJ0RiU+/z7rGnhlZ5ww==}
+  /@csstools/media-query-list-parser@2.1.9(@csstools/css-parser-algorithms@2.6.1)(@csstools/css-tokenizer@2.2.4):
+    resolution: {integrity: sha512-qqGuFfbn4rUmyOB0u8CVISIp5FfJ5GAR3mBrZ9/TKndHakdnm6pY0L/fbLcpPnrzwCyyTEZl1nUcXAYHEWneTA==}
+    engines: {node: ^14 || ^16 || >=18}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^2.6.1
+      '@csstools/css-tokenizer': ^2.2.4
+    dependencies:
+      '@csstools/css-parser-algorithms': 2.6.1(@csstools/css-tokenizer@2.2.4)
+      '@csstools/css-tokenizer': 2.2.4
+    dev: true
+
+  /@csstools/selector-specificity@3.0.2(postcss-selector-parser@6.0.16):
+    resolution: {integrity: sha512-RpHaZ1h9LE7aALeQXmXrJkRG84ZxIsctEN2biEUmFyKpzFM3zZ35eUMcIzZFsw/2olQE6v69+esEqU2f1MKycg==}
     engines: {node: ^14 || ^16 || >=18}
     peerDependencies:
       postcss-selector-parser: ^6.0.13
     dependencies:
-      postcss-selector-parser: 6.0.15
+      postcss-selector-parser: 6.0.16
     dev: true
 
   /@dabh/diagnostics@2.0.3:
@@ -945,6 +1015,10 @@ packages:
       - '@algolia/client-search'
     dev: false
 
+  /@dual-bundle/import-meta-resolve@4.0.0:
+    resolution: {integrity: sha512-ZKXyJeFAzcpKM2kk8ipoGIPUqx9BX52omTGnfwjJvxOCaZTM2wtDK7zN0aIgPRbT9XYAlha0HtmZ+XKteuh0Gw==}
+    dev: true
+
   /@es-joy/jsdoccomment@0.42.0:
     resolution: {integrity: sha512-R1w57YlVA6+YE01wch3GPYn6bCsrOV3YW/5oGGE2tmX6JcL9Nr+b5IikrjMPF+v9CV3ay+obImEdsDhovhJrzw==}
     engines: {node: '>=16'}
@@ -1705,8 +1779,27 @@ packages:
     resolution: {integrity: sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg==}
     dev: false
 
+  /@iconify/json@2.2.196:
+    resolution: {integrity: sha512-hRZ0pq77N+mkAbZvFi/pfsKcspA8PyGSASc6zQoq6n/RSLxb8xAgORatVHyDl0ow7shcS+dvyiZI8xmr6yI2WA==}
+    dependencies:
+      '@iconify/types': 2.0.0
+      pathe: 1.1.2
+
   /@iconify/types@2.0.0:
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
+
+  /@iconify/utils@2.1.22:
+    resolution: {integrity: sha512-6UHVzTVXmvO8uS6xFF+L/QTSpTzA/JZxtgU+KYGFyDYMEObZ1bu/b5l+zNJjHy+0leWjHI+C0pXlzGvv3oXZMA==}
+    dependencies:
+      '@antfu/install-pkg': 0.1.1
+      '@antfu/utils': 0.7.7
+      '@iconify/types': 2.0.0
+      debug: 4.3.4(supports-color@9.2.2)
+      kolorist: 1.8.0
+      local-pkg: 0.5.0
+      mlly: 1.6.1
+    transitivePeerDependencies:
+      - supports-color
     dev: false
 
   /@iconify/vue@4.1.1(vue@3.4.21):
@@ -1743,7 +1836,7 @@ packages:
     dependencies:
       '@types/istanbul-lib-coverage': 2.0.4
       '@types/istanbul-reports': 3.0.1
-      '@types/node': 20.11.30
+      '@types/node': 20.12.2
       '@types/yargs': 16.0.4
       chalk: 4.1.2
     dev: false
@@ -2011,7 +2104,7 @@ packages:
       upath: 2.0.1
     dev: false
 
-  /@mdit/plugin-katex@0.8.0(katex@0.16.9)(markdown-it@14.1.0):
+  /@mdit/plugin-katex@0.8.0(katex@0.16.10)(markdown-it@14.1.0):
     resolution: {integrity: sha512-u7CX3Xv5nuc2bu2sHrk1nil83/9ETKTBMmy0icbW8zlqBC0ykLo1xTCEBXmdhXtnJtPi9f/wUZVs6iMZrJzbNg==}
     engines: {node: '>= 18'}
     peerDependencies:
@@ -2026,7 +2119,7 @@ packages:
       '@mdit/plugin-tex': 0.8.0(markdown-it@14.1.0)
       '@types/katex': 0.16.7
       '@types/markdown-it': 13.0.7
-      katex: 0.16.9
+      katex: 0.16.10
       markdown-it: 14.1.0
     dev: false
 
@@ -2165,8 +2258,8 @@ packages:
     engines: {node: ^14.16.0 || >=16.0.0}
     dev: false
 
-  /@netlify/build-info@7.13.0:
-    resolution: {integrity: sha512-rVwq9HGp72mLjSzmyHXMwmKBtArbZYdvLMnqIdiTOVJDOC7nL8mce1JQhHC4DI0dNe/3k3xfzceeKPeeNY993A==}
+  /@netlify/build-info@7.13.2:
+    resolution: {integrity: sha512-smzhIgcms6Z/v2cct90l8ncBbnA5kvknj5/quhwyM6UHUycgMKFlA22qkB0KLj9shwL1Lkh7iQW751JwhSaP9g==}
     engines: {node: ^14.16.0 || >=16.0.0}
     hasBin: true
     dependencies:
@@ -2181,12 +2274,13 @@ packages:
       yargs: 17.7.2
     dev: false
 
-  /@netlify/build@29.36.3(@types/node@20.11.30):
-    resolution: {integrity: sha512-WLJB98MVt1jfHuUZq3dg2RvqbThTtbrs/0zOyjFq0b3TVMic7CyOnVfDOz78pfwLwbojZM0PW+AVBh5hHkRJVA==}
+  /@netlify/build@29.36.6(@opentelemetry/api@1.8.0)(@types/node@20.12.2):
+    resolution: {integrity: sha512-crNoY5Vr7tAodBfYdz8weM+NTw5q6W6ArkowNw6QhKXa4iRXT5MY6H0c2ztsge9o5gAYs55bDhBpKiPcZlzDlA==}
     engines: {node: ^14.16.0 || >=16.0.0}
     hasBin: true
     peerDependencies:
-      '@netlify/opentelemetry-sdk-setup': ^1.0.4
+      '@netlify/opentelemetry-sdk-setup': ^1.0.5
+      '@opentelemetry/api': ^1.7.0
     peerDependenciesMeta:
       '@netlify/opentelemetry-sdk-setup':
         optional: true
@@ -2196,16 +2290,16 @@ packages:
       '@netlify/cache-utils': 5.1.5
       '@netlify/config': 20.12.1
       '@netlify/edge-bundler': 11.3.0(supports-color@9.2.2)
-      '@netlify/framework-info': 9.8.10
+      '@netlify/framework-info': 9.8.11
       '@netlify/functions-utils': 5.2.51(supports-color@9.2.2)
       '@netlify/git-utils': 5.1.1
-      '@netlify/opentelemetry-utils': 1.0.2
+      '@netlify/opentelemetry-utils': 1.1.0(@opentelemetry/api@1.8.0)
       '@netlify/plugins-list': 6.75.0
       '@netlify/run-utils': 5.1.1
       '@netlify/zip-it-and-ship-it': 9.29.2(supports-color@9.2.2)
-      '@opentelemetry/api': 1.7.0
+      '@opentelemetry/api': 1.8.0
       '@sindresorhus/slugify': 2.1.0
-      ansi-escapes: 6.2.0
+      ansi-escapes: 6.2.1
       chalk: 5.3.0
       clean-stack: 4.2.0
       execa: 6.1.0
@@ -2245,7 +2339,7 @@ packages:
       strip-ansi: 7.1.0
       supports-color: 9.2.2
       terminal-link: 3.0.0
-      ts-node: 10.9.2(@types/node@20.11.30)(typescript@5.4.3)
+      ts-node: 10.9.2(@types/node@20.12.2)(typescript@5.4.3)
       typescript: 5.4.3
       uuid: 9.0.0
       yargs: 17.7.2
@@ -2334,8 +2428,8 @@ packages:
       - supports-color
     dev: false
 
-  /@netlify/framework-info@9.8.10:
-    resolution: {integrity: sha512-VT8ejAaB/XU2xRpdpQinHUO1YL3+BMx6LJ49wJk2u9Yq/VI1/gYCi5VqbqTHBQXJUlOi84YuiRlrDBsLpPr8eg==}
+  /@netlify/framework-info@9.8.11:
+    resolution: {integrity: sha512-8NuvzQQVeU36PRilWqijiIWmjy6JZcqbKooGQ4bNgH/26YNdS+tN5gOWGWVYnRHgdmBUCycyYrM5h1Srwnq3hQ==}
     engines: {node: ^14.14.0 || >=16.0.0}
     dependencies:
       ajv: 8.12.0
@@ -2515,11 +2609,13 @@ packages:
     engines: {node: '>=14'}
     dev: false
 
-  /@netlify/opentelemetry-utils@1.0.2:
-    resolution: {integrity: sha512-GeY5z/Af7q7DMSmJbJtrtKQaHCsw/XPdJwnryv/CqRpvg7z6rpGVH6V1UTck1Fe8BVQuB20mrb6qr4MZsAAiyg==}
+  /@netlify/opentelemetry-utils@1.1.0(@opentelemetry/api@1.8.0):
+    resolution: {integrity: sha512-VpjyInWRdreD0lPqTmWlxROfjF5mFHo99y9r21v/TvRmPniUbvEeFrtPgbA1VsiXt0YcHXZ9jUi/PrsLjQ5vPg==}
     engines: {node: '>=18.0.0'}
+    peerDependencies:
+      '@opentelemetry/api': ~1.8.0
     dependencies:
-      '@opentelemetry/api': 1.7.0
+      '@opentelemetry/api': 1.8.0
     dev: false
 
   /@netlify/plugins-list@6.75.0:
@@ -2777,8 +2873,8 @@ packages:
       '@octokit/openapi-types': 17.2.0
     dev: false
 
-  /@opentelemetry/api@1.7.0:
-    resolution: {integrity: sha512-AdY5wvN0P2vXBi3b29hxZgSFvdhdxPB9+f0B6s//P9Q8nibRWeA3cHm8UmLpio9ABigkVHJ5NMPk+Mz8VCCyrw==}
+  /@opentelemetry/api@1.8.0:
+    resolution: {integrity: sha512-I/s6F7yKUDdtMsoBWXJe8Qz40Tui5vsuKCWJEWVL+5q9sSWRzzx6v2KeNsOBEwd94j0eWkpWCH4yB6rZg9Mf0w==}
     engines: {node: '>=8.0.0'}
     dev: false
 
@@ -3012,25 +3108,25 @@ packages:
       - vue-eslint-parser
     dev: true
 
-  /@pengzhanbo/stylelint-config@1.7.0(stylelint@16.2.1):
+  /@pengzhanbo/stylelint-config@1.7.0(stylelint@16.3.1):
     resolution: {integrity: sha512-r31R+k7cTAKBoVzeGDAR5nnyIh4VId6zFnzobyoJS/z40o9v6sFNT7OYHFR9APXJwx4rV2L33t0LPCxlaoupEw==}
     peerDependencies:
       stylelint: '>=16.0.0'
     dependencies:
       '@pengzhanbo/utils': 1.1.2
-      '@stylelint-types/stylelint-order': 6.0.4(stylelint-define-config@1.2.0)(stylelint@16.2.1)
-      '@stylelint-types/stylelint-scss': 6.1.0(stylelint-define-config@1.2.0)(stylelint@16.2.1)
-      '@stylelint-types/stylelint-stylistic': 2.1.0(stylelint-define-config@1.2.0)(stylelint@16.2.1)
-      '@stylistic/stylelint-plugin': 2.1.0(stylelint@16.2.1)
+      '@stylelint-types/stylelint-order': 6.0.4(stylelint-define-config@1.2.0)(stylelint@16.3.1)
+      '@stylelint-types/stylelint-scss': 6.1.0(stylelint-define-config@1.2.0)(stylelint@16.3.1)
+      '@stylelint-types/stylelint-stylistic': 2.1.0(stylelint-define-config@1.2.0)(stylelint@16.3.1)
+      '@stylistic/stylelint-plugin': 2.1.0(stylelint@16.3.1)
       local-pkg: 0.5.0
       postcss: 8.4.35
       postcss-html: 1.6.0
-      stylelint: 16.2.1(typescript@5.4.3)
-      stylelint-config-html: 1.1.0(postcss-html@1.6.0)(stylelint@16.2.1)
-      stylelint-config-standard: 36.0.0(stylelint@16.2.1)
-      stylelint-config-standard-scss: 13.0.0(postcss@8.4.35)(stylelint@16.2.1)
-      stylelint-define-config: 1.2.0(stylelint@16.2.1)
-      stylelint-order: 6.0.4(stylelint@16.2.1)
+      stylelint: 16.3.1(typescript@5.4.3)
+      stylelint-config-html: 1.1.0(postcss-html@1.6.0)(stylelint@16.3.1)
+      stylelint-config-standard: 36.0.0(stylelint@16.3.1)
+      stylelint-config-standard-scss: 13.0.0(postcss@8.4.35)(stylelint@16.3.1)
+      stylelint-define-config: 1.2.0(stylelint@16.3.1)
+      stylelint-order: 6.0.4(stylelint@16.3.1)
     dev: true
 
   /@pengzhanbo/utils@1.1.2:
@@ -3156,20 +3252,20 @@ packages:
     requiresBuild: true
     optional: true
 
-  /@shikijs/core@1.2.0:
-    resolution: {integrity: sha512-OlFvx+nyr5C8zpcMBnSGir0YPD6K11uYhouqhNmm1qLiis4GA7SsGtu07r9gKS9omks8RtQqHrJL4S+lqWK01A==}
+  /@shikijs/core@1.2.2:
+    resolution: {integrity: sha512-GXbTyNP6HlxpyWMR4eirW54Cxp84nVuivcV5hGVBgKnIl+UmD4AJgCX1uXuNRcFFAw58lB3HqryuezIc0iCLgw==}
     dev: false
 
-  /@shikijs/transformers@1.2.0:
-    resolution: {integrity: sha512-xKn7DtA65DQV4FOfYsrvqM80xOy2xuXnxWWKsZmHv1VII/IOuDUDsWDu3KnpeLH6wqNJWp1GRoNUsHR1aw/VhQ==}
+  /@shikijs/transformers@1.2.2:
+    resolution: {integrity: sha512-GL03TlMh9oBeBLU5pcYBKpZnZZVdXSJ4ec7EQ/uw9+NrVaHs6qTjVN8F/0mvKd+sXLbBga8XZWDdob5F5tx5lw==}
     dependencies:
-      shiki: 1.2.0
+      shiki: 1.2.2
     dev: false
 
-  /@shikijs/twoslash@1.2.0(typescript@5.4.3):
-    resolution: {integrity: sha512-rVIpuL40tXG5hItVf+4aYTEEwQO6R5pvzqMZa5r6bLMpHK720Op25e/BnCohNIdsUOEaFH9xqRSJo8ubjCiM1w==}
+  /@shikijs/twoslash@1.2.2(typescript@5.4.3):
+    resolution: {integrity: sha512-jeKlFxejIj1f8SKNCHqWUyjSmfqsO91iCdiD2aG2fZk49JhesXBwqzEsCoB6DxSnVSNredjYbcnDKzTAjmySmQ==}
     dependencies:
-      '@shikijs/core': 1.2.0
+      '@shikijs/core': 1.2.2
       twoslash: 0.2.5(typescript@5.4.3)
     transitivePeerDependencies:
       - supports-color
@@ -3202,7 +3298,7 @@ packages:
       lodash.deburr: 4.1.0
     dev: false
 
-  /@stylelint-types/stylelint-order@6.0.4(stylelint-define-config@1.2.0)(stylelint@16.2.1):
+  /@stylelint-types/stylelint-order@6.0.4(stylelint-define-config@1.2.0)(stylelint@16.3.1):
     resolution: {integrity: sha512-KiwDbjvlFYQm9O1onomzZRLaEZjWZusnXvnEDwFGwN4fs2sq7MwbL6VAVt3UtmsAVt0R20xKEGKbxk0ojzdMmA==}
     engines: {node: '>=18.0.0', npm: '>=9.0.0', pnpm: '>=8.6.0'}
     peerDependencies:
@@ -3212,11 +3308,11 @@ packages:
       stylelint:
         optional: true
     dependencies:
-      stylelint: 16.2.1(typescript@5.4.3)
-      stylelint-define-config: 1.2.0(stylelint@16.2.1)
+      stylelint: 16.3.1(typescript@5.4.3)
+      stylelint-define-config: 1.2.0(stylelint@16.3.1)
     dev: true
 
-  /@stylelint-types/stylelint-scss@6.1.0(stylelint-define-config@1.2.0)(stylelint@16.2.1):
+  /@stylelint-types/stylelint-scss@6.1.0(stylelint-define-config@1.2.0)(stylelint@16.3.1):
     resolution: {integrity: sha512-wHNxvoh7nqJOdQpjnq05karRvtaYEm+FKVkBLO1VmOORPwZLWCzXNz0D9COU9sLhMtY3cEbqKiuOWjxYzFTRBw==}
     engines: {node: '>=18.0.0', npm: '>=9.0.0', pnpm: '>=8.6.0'}
     peerDependencies:
@@ -3226,11 +3322,11 @@ packages:
       stylelint:
         optional: true
     dependencies:
-      stylelint: 16.2.1(typescript@5.4.3)
-      stylelint-define-config: 1.2.0(stylelint@16.2.1)
+      stylelint: 16.3.1(typescript@5.4.3)
+      stylelint-define-config: 1.2.0(stylelint@16.3.1)
     dev: true
 
-  /@stylelint-types/stylelint-stylistic@2.1.0(stylelint-define-config@1.2.0)(stylelint@16.2.1):
+  /@stylelint-types/stylelint-stylistic@2.1.0(stylelint-define-config@1.2.0)(stylelint@16.3.1):
     resolution: {integrity: sha512-qCuTESf5N2u6PwPzTVk1SEn63FOeyDJj8a9Ft1t1ojaDzFMOXjjbfL/E1UPUnwJpHdVR/hrU2yhX5i4BSx/8fw==}
     engines: {node: '>=18.0.0', npm: '>=9.0.0', pnpm: '>=8.6.0'}
     peerDependencies:
@@ -3240,8 +3336,8 @@ packages:
       stylelint:
         optional: true
     dependencies:
-      stylelint: 16.2.1(typescript@5.4.3)
-      stylelint-define-config: 1.2.0(stylelint@16.2.1)
+      stylelint: 16.3.1(typescript@5.4.3)
+      stylelint-define-config: 1.2.0(stylelint@16.3.1)
     dev: true
 
   /@stylistic/eslint-plugin-js@1.7.0(eslint@8.57.0):
@@ -3316,7 +3412,7 @@ packages:
       - typescript
     dev: true
 
-  /@stylistic/stylelint-plugin@2.1.0(stylelint@16.2.1):
+  /@stylistic/stylelint-plugin@2.1.0(stylelint@16.3.1):
     resolution: {integrity: sha512-mUZEW9uImHSbXeyzbFmHb8WPBv56UTaEnWL/3dGdAiJ54C+8GTfDwDVdI6gbqT9wV7zynkPu7tCXc5746H9mZQ==}
     engines: {node: ^18.12 || >=20.9}
     peerDependencies:
@@ -3329,7 +3425,7 @@ packages:
       postcss-selector-parser: 6.0.15
       postcss-value-parser: 4.2.0
       style-search: 0.1.0
-      stylelint: 16.2.1(typescript@5.4.3)
+      stylelint: 16.3.1(typescript@5.4.3)
     dev: true
 
   /@szmarczak/http-timer@5.0.1:
@@ -3368,19 +3464,19 @@ packages:
     resolution: {integrity: sha512-fB3Zu92ucau0iQ0JMCFQE7b/dv8Ot07NI3KaZIkIUNXq82k4eBAqUaneXfleGY9JWskeS9y+u0nXMyspcuQrCg==}
     dependencies:
       '@types/connect': 3.4.38
-      '@types/node': 20.11.30
+      '@types/node': 20.12.2
     dev: true
 
   /@types/connect@3.4.38:
     resolution: {integrity: sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==}
     dependencies:
-      '@types/node': 20.11.30
+      '@types/node': 20.12.2
     dev: true
 
   /@types/conventional-commits-parser@5.0.0:
     resolution: {integrity: sha512-loB369iXNmAZglwWATL+WRe+CRMmmBPtpolYzIebFaX4YA3x+BEfLqhUAV9WanycKI3TG1IMr5bMJDajDKLlUQ==}
     dependencies:
-      '@types/node': 20.11.30
+      '@types/node': 20.12.2
     dev: true
 
   /@types/d3-scale-chromatic@3.0.3:
@@ -3416,7 +3512,7 @@ packages:
   /@types/express-serve-static-core@4.17.43:
     resolution: {integrity: sha512-oaYtiBirUOPQGSWNGPWnzyAFJ0BP3cwvN4oWZQY+zUBwpVIGsKUkpBpSztp74drYcjavs7SKFZ4DX1V2QeN8rg==}
     dependencies:
-      '@types/node': 20.11.30
+      '@types/node': 20.12.2
       '@types/qs': 6.9.12
       '@types/range-parser': 1.2.7
       '@types/send': 0.17.4
@@ -3435,7 +3531,7 @@ packages:
     resolution: {integrity: sha512-yTbItCNreRooED33qjunPthRcSjERP1r4MqCZc7wv0u2sUkzTFp45tgUfS5+r7FrZPdmCCNflLhVSP/o+SemsQ==}
     dependencies:
       '@types/jsonfile': 6.1.1
-      '@types/node': 20.11.30
+      '@types/node': 20.12.2
     dev: false
 
   /@types/hash-sum@1.0.2:
@@ -3459,7 +3555,7 @@ packages:
   /@types/http-proxy@1.17.9:
     resolution: {integrity: sha512-QsbSjA/fSk7xB+UXlCT3wHBy5ai9wOcNDWwZAtud+jXhwOM3l+EYZh8Lng4+/6n8uar0J7xILzqftJdJ/Wdfkw==}
     dependencies:
-      '@types/node': 20.11.30
+      '@types/node': 20.12.2
     dev: false
 
   /@types/istanbul-lib-coverage@2.0.4:
@@ -3485,7 +3581,7 @@ packages:
   /@types/jsonfile@6.1.1:
     resolution: {integrity: sha512-GSgiRCVeapDN+3pqA35IkQwasaCh/0YFH5dEF6S88iDvEn901DjOeH3/QPY+XYP1DFzDZPvIvfeEgk+7br5png==}
     dependencies:
-      '@types/node': 20.11.30
+      '@types/node': 20.12.2
     dev: false
 
   /@types/katex@0.16.7:
@@ -3551,8 +3647,8 @@ packages:
     resolution: {integrity: sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==}
     dev: false
 
-  /@types/node@20.11.30:
-    resolution: {integrity: sha512-dHM6ZxwlmuZaRmUPfv1p+KrdD1Dci04FbdEm/9wEMouFqxYoFl5aMkt0VMAUtYRQDyYvD41WJLukhq/ha3YuTw==}
+  /@types/node@20.12.2:
+    resolution: {integrity: sha512-zQ0NYO87hyN6Xrclcqp7f8ZbXNbRfoGWNcMvHTPQp9UUrwI0mI7XBz+cu7/W6/VClYo2g63B0cjull/srU7LgQ==}
     dependencies:
       undici-types: 5.26.5
 
@@ -3587,7 +3683,7 @@ packages:
   /@types/sax@1.2.4:
     resolution: {integrity: sha512-pSAff4IAxJjfAXUG6tFkO7dsSbTmf8CtUpfhhZ5VhkRpC4628tJhh3+V6H1E+/Gs9piSzYKT5yzHO5M4GG9jkw==}
     dependencies:
-      '@types/node': 20.11.30
+      '@types/node': 20.12.2
     dev: false
 
   /@types/semver@7.5.0:
@@ -3598,7 +3694,7 @@ packages:
     resolution: {integrity: sha512-x2EM6TJOybec7c52BX0ZspPodMsQUd5L6PRwOunVyVUhXiBSKf3AezDL8Dgvgt5o0UfKNfuA0eMLr2wLT4AiBA==}
     dependencies:
       '@types/mime': 1.3.5
-      '@types/node': 20.11.30
+      '@types/node': 20.12.2
     dev: true
 
   /@types/serve-static@1.15.5:
@@ -3606,7 +3702,7 @@ packages:
     dependencies:
       '@types/http-errors': 2.0.4
       '@types/mime': 3.0.4
-      '@types/node': 20.11.30
+      '@types/node': 20.12.2
     dev: true
 
   /@types/trusted-types@2.0.2:
@@ -3642,7 +3738,7 @@ packages:
     resolution: {integrity: sha512-Cn6WYCm0tXv8p6k+A8PvbDG763EDpBoTzHdA+Q/MF6H3sapGjCm9NzoaJncJS9tUKSuCoDs9XHxYYsQDgxR6kw==}
     requiresBuild: true
     dependencies:
-      '@types/node': 20.11.30
+      '@types/node': 20.12.2
     dev: false
     optional: true
 
@@ -3958,7 +4054,7 @@ packages:
       '@vue/shared': 3.4.21
       entities: 4.5.0
       estree-walker: 2.0.2
-      source-map-js: 1.0.2
+      source-map-js: 1.2.0
 
   /@vue/compiler-dom@3.4.21:
     resolution: {integrity: sha512-IZC6FKowtT1sl0CR5DpXSiEB5ayw75oT2bma1BEhV7RRR1+cfwLrxc2Z8Zq/RGFzJ8w5r9QtCOvTjQgdn0IKmA==}
@@ -3976,8 +4072,8 @@ packages:
       '@vue/shared': 3.4.21
       estree-walker: 2.0.2
       magic-string: 0.30.7
-      postcss: 8.4.35
-      source-map-js: 1.0.2
+      postcss: 8.4.38
+      source-map-js: 1.2.0
 
   /@vue/compiler-ssr@3.4.21:
     resolution: {integrity: sha512-M5+9nI2lPpAsgXOGQobnIueVqc9sisBFexh5yMIMRAPYLa7+5wEJs8iqOZc1WAa9WQbx9GR2twgznU8LTIiZ4Q==}
@@ -4691,6 +4787,12 @@ packages:
     engines: {node: '>=14.16'}
     dependencies:
       type-fest: 3.8.0
+    dev: true
+
+  /ansi-escapes@6.2.1:
+    resolution: {integrity: sha512-4nJ3yixlEthEJ9Rk4vPcdBRkZvQZlYyu8j4/Mqz5sgIkddmEnH2Yj2ZrnP9S3tQOvSNRUIgVNF/1yPpRAGNRig==}
+    engines: {node: '>=14.16'}
+    dev: false
 
   /ansi-regex@3.0.1:
     resolution: {integrity: sha512-+O9Jct8wf++lXxxFc4hc8LsjaSq0HFzzL7cVsw8pRDIPdjKD2mT4ytDZlLuSBZ4cLKZFXIrMGO7DbQCtMJJMKw==}
@@ -6389,7 +6491,7 @@ packages:
     engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
     dependencies:
       mdn-data: 2.0.30
-      source-map-js: 1.0.2
+      source-map-js: 1.2.0
 
   /css-what@6.1.0:
     resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==}
@@ -8360,7 +8462,6 @@ packages:
     dependencies:
       locate-path: 6.0.0
       path-exists: 4.0.0
-    dev: true
 
   /find-up@6.3.0:
     resolution: {integrity: sha512-v2ZsoEuVHYy8ZIlYqwPe/39Cy+cFDzp4dXPaxNvkEuouymu+2Jbz0PxpKarJHYJTmv2HWT3O382qY8l4jMWthw==}
@@ -8589,10 +8690,6 @@ packages:
     requiresBuild: true
     optional: true
 
-  /function-bind@1.1.1:
-    resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
-    dev: false
-
   /function-bind@1.1.2:
     resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
 
@@ -9103,7 +9200,7 @@ packages:
     resolution: {integrity: sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==}
     engines: {node: '>= 0.4.0'}
     dependencies:
-      function-bind: 1.1.1
+      function-bind: 1.1.2
     dev: false
 
   /hasbin@1.2.3:
@@ -9339,6 +9436,11 @@ packages:
     resolution: {integrity: sha512-g7dmpshy+gD7mh88OC9NwSGTKoc3kyLAZQRU1mt53Aw/vnvfXnbC+F/7F7QoYVKbV+KNvJx8wArewKy1vXMtlg==}
     engines: {node: '>= 4'}
 
+  /ignore@5.3.1:
+    resolution: {integrity: sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==}
+    engines: {node: '>= 4'}
+    dev: true
+
   /image-meta@0.2.0:
     resolution: {integrity: sha512-ZBGjl0ZMEMeOC3Ns0wUF/5UdUmr3qQhBSCniT0LxOgGGIRHiNFOkMtIHB7EOznRU47V2AxPgiVP+s+0/UCU0Hg==}
     dev: false
@@ -10075,6 +10177,13 @@ packages:
     resolution: {integrity: sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A==}
     dev: false
 
+  /katex@0.16.10:
+    resolution: {integrity: sha512-ZiqaC04tp2O5utMsl2TEZTXxa6WSC4yo0fv5ML++D3QZv/vx2Mct0mTlRx3O+uUkjfuAgOkzsCmq5MiUEsDDdA==}
+    hasBin: true
+    dependencies:
+      commander: 8.3.0
+    dev: false
+
   /katex@0.16.9:
     resolution: {integrity: sha512-fsSYjWS0EEOwvy81j3vRA8TEAhQhKiqO+FQaKWp0m39qwOzHVBgAUBIXWj1pB+O2W3fIpNa6Y9KSKCVbfPhyAQ==}
     hasBin: true
@@ -10134,6 +10243,14 @@ packages:
     resolution: {integrity: sha512-Ne7wqW7/9Cz54PDt4I3tcV+hAyat8ypyOGzYRJQfdxnnjeWsTxt1cy8pjvvKeI5kfXuyvULyeeAvwvvtAX3ayQ==}
     dev: true
 
+  /known-css-properties@0.30.0:
+    resolution: {integrity: sha512-VSWXYUnsPu9+WYKkfmJyLKtIvaRJi1kXUqVmBACORXZQxT5oZDsoZ2vQP+bQFDnWtpI/4eq3MLoRMjI2fnLzTQ==}
+    dev: true
+
+  /kolorist@1.8.0:
+    resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
+    dev: false
+
   /kuler@2.0.0:
     resolution: {integrity: sha512-Xq9nH7KlWZmXAtodXDDRE7vs6DU1gTU8zYDHDiWLSip45Egwq3plLHzPn27NgvzL2r1LMPC1vdqh98sQxtqj4A==}
     dev: false
@@ -10320,7 +10437,6 @@ packages:
     dependencies:
       mlly: 1.6.1
       pkg-types: 1.0.3
-    dev: true
 
   /locate-path@2.0.0:
     resolution: {integrity: sha512-NCI2kiDkyR7VeEKm27Kda/iQHyKJe1Bu0FlTbYp3CqJu+9IFe9bLyAjMxf5ZDDbEg+iMPzB5zYyUTSm8wVTKmA==}
@@ -10341,7 +10457,6 @@ packages:
     engines: {node: '>=10'}
     dependencies:
       p-locate: 5.0.0
-    dev: true
 
   /locate-path@7.2.0:
     resolution: {integrity: sha512-gvVijfZvn7R+2qyPX8mAuKcFGDf6Nc61GdvGafQsHL0sBIxfKzA+usWn4GFC/bk+QdwPUD4kWFJLhElipq+0VA==}
@@ -10889,8 +11004,8 @@ packages:
     engines: {node: '>=16.10'}
     dev: true
 
-  /meow@13.1.0:
-    resolution: {integrity: sha512-o5R/R3Tzxq0PJ3v3qcQJtSvSE9nKOLSAaDuuoMzDVuGTwHdccMWcYomh9Xolng2tjT6O/Y83d+0coVGof6tqmA==}
+  /meow@13.2.0:
+    resolution: {integrity: sha512-pxQJQzB6djGPXh08dacEloMFopsOqGVRKFPYvPOt9XDZ1HasbgDZA74CJGreSU4G3Ak7EFJGoiH2auq+yXISgA==}
     engines: {node: '>=18'}
     dev: true
 
@@ -11498,7 +11613,7 @@ packages:
     resolution: {integrity: sha512-i/Ykufi2t1EZ6NaPLdfnZk2AX8cs0d+mTzVKuPfqPKPatxLApaBoxJQ9x1/uckXtrS/U5oisPMDkNs0yQTaBRg==}
     dependencies:
       acorn: 8.10.0
-      pathe: 1.1.1
+      pathe: 1.1.2
       pkg-types: 1.0.3
       ufo: 1.3.1
 
@@ -11634,8 +11749,8 @@ packages:
     resolution: {integrity: sha512-9iN1ka/9zmX1ZvLV9ewJYEk9h7RyRRtqdK0woXcqohu8EWIerfPUjYJPg0ULy0UqP7cslmdGc8xKDJcojlKiaw==}
     dev: false
 
-  /netlify-cli@17.20.1(@types/node@20.11.30):
-    resolution: {integrity: sha512-Hj71m61PGteCk27t8y3O0y8JqFmMuPCitbVfDK1V/Ro+U6zUDsVQUFO3v4sEeoB8s/QOLhXZn/2NHu/sBUlDNQ==}
+  /netlify-cli@17.21.1(@types/node@20.12.2):
+    resolution: {integrity: sha512-B8QveV55h2dFCTnk5LInVW1MiXPINTQ61IkEtih15CVYpvVSQy+he8M6hdpucq83VqaF/phaJkb3Si2ligOxxw==}
     engines: {node: '>=18.14.0'}
     hasBin: true
     requiresBuild: true
@@ -11643,14 +11758,15 @@ packages:
       '@bugsnag/js': 7.20.2
       '@fastify/static': 6.10.2
       '@netlify/blobs': 7.0.1
-      '@netlify/build': 29.36.3(@types/node@20.11.30)
-      '@netlify/build-info': 7.13.0
+      '@netlify/build': 29.36.6(@opentelemetry/api@1.8.0)(@types/node@20.12.2)
+      '@netlify/build-info': 7.13.2
       '@netlify/config': 20.12.1
       '@netlify/edge-bundler': 11.3.0(supports-color@9.2.2)
       '@netlify/local-functions-proxy': 1.1.1
       '@netlify/zip-it-and-ship-it': 9.30.0
       '@octokit/rest': 19.0.13
-      ansi-escapes: 6.2.0
+      '@opentelemetry/api': 1.8.0
+      ansi-escapes: 6.2.1
       ansi-styles: 6.2.1
       ansi-to-html: 0.7.2
       ascii-table: 0.0.9
@@ -12278,7 +12394,6 @@ packages:
     engines: {node: '>=10'}
     dependencies:
       p-limit: 3.1.0
-    dev: true
 
   /p-locate@6.0.0:
     resolution: {integrity: sha512-wPrq66Llhl7/4AGC6I+cqxT07LhXvWL08LNXz1fENOw0Ap4sRZZ/gZpTTJ5jpurzzzfS2W/Ge9BY3LgLjCShcw==}
@@ -12689,13 +12804,13 @@ packages:
       postcss: 8.4.35
     dev: true
 
-  /postcss-safe-parser@7.0.0(postcss@8.4.33):
+  /postcss-safe-parser@7.0.0(postcss@8.4.38):
     resolution: {integrity: sha512-ovehqRNVCpuFzbXoTb4qLtyzK3xn3t/CUBxOs8LsnQjQrShaB4lKiHoVqY8ANaC0hBMHq5QVWk77rwGklFUDrg==}
     engines: {node: '>=18.0'}
     peerDependencies:
       postcss: ^8.4.31
     dependencies:
-      postcss: 8.4.33
+      postcss: 8.4.38
     dev: true
 
   /postcss-scss@4.0.9(postcss@8.4.35):
@@ -12715,6 +12830,14 @@ packages:
       util-deprecate: 1.0.2
     dev: true
 
+  /postcss-selector-parser@6.0.16:
+    resolution: {integrity: sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==}
+    engines: {node: '>=4'}
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+    dev: true
+
   /postcss-sorting@8.0.2(postcss@8.4.35):
     resolution: {integrity: sha512-M9dkSrmU00t/jK7rF6BZSZauA5MAaBW4i5EnJXspMwt4iqTh/L9j6fgMnbElEOfyRyfLfVbIHj/R52zHzAPe1Q==}
     peerDependencies:
@@ -12738,15 +12861,6 @@ packages:
       quote-unquote: 1.0.0
     dev: false
 
-  /postcss@8.4.33:
-    resolution: {integrity: sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==}
-    engines: {node: ^10 || ^12 || >=14}
-    dependencies:
-      nanoid: 3.3.7
-      picocolors: 1.0.0
-      source-map-js: 1.0.2
-    dev: true
-
   /postcss@8.4.35:
     resolution: {integrity: sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==}
     engines: {node: ^10 || ^12 || >=14}
@@ -12754,6 +12868,7 @@ packages:
       nanoid: 3.3.7
       picocolors: 1.0.0
       source-map-js: 1.0.2
+    dev: true
 
   /postcss@8.4.38:
     resolution: {integrity: sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==}
@@ -13632,10 +13747,10 @@ packages:
   /shell-quote@1.8.1:
     resolution: {integrity: sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==}
 
-  /shiki@1.2.0:
-    resolution: {integrity: sha512-xLhiTMOIUXCv5DqJ4I70GgQCtdlzsTqFLZWcMHHG3TAieBUbvEGthdrlPDlX4mL/Wszx9C6rEcxU6kMlg4YlxA==}
+  /shiki@1.2.2:
+    resolution: {integrity: sha512-nqazfFgrU+DBLqk4+WjmGQz8sVWkcUcGriHqSM2zGk0GhjirVz4FyJ3AABEx91OpjGiKpuKBg2diYfRfQG3Fbg==}
     dependencies:
-      '@shikijs/core': 1.2.0
+      '@shikijs/core': 1.2.2
     dev: false
 
   /side-channel@1.0.4:
@@ -13778,6 +13893,7 @@ packages:
   /source-map-js@1.0.2:
     resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
     engines: {node: '>=0.10.0'}
+    dev: true
 
   /source-map-js@1.2.0:
     resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==}
@@ -14077,7 +14193,7 @@ packages:
     resolution: {integrity: sha512-Dj1Okke1C3uKKwQcetra4jSuk0DqbzbYtXipzFlFMZtowbF1x7BKJwB9AayVMyFARvU8EDrZdcax4At/452cAg==}
     dev: true
 
-  /stylelint-config-html@1.1.0(postcss-html@1.6.0)(stylelint@16.2.1):
+  /stylelint-config-html@1.1.0(postcss-html@1.6.0)(stylelint@16.3.1):
     resolution: {integrity: sha512-IZv4IVESjKLumUGi+HWeb7skgO6/g4VMuAYrJdlqQFndgbj6WJAXPhaysvBiXefX79upBdQVumgYcdd17gCpjQ==}
     engines: {node: ^12 || >=14}
     peerDependencies:
@@ -14085,10 +14201,10 @@ packages:
       stylelint: '>=14.0.0'
     dependencies:
       postcss-html: 1.6.0
-      stylelint: 16.2.1(typescript@5.4.3)
+      stylelint: 16.3.1(typescript@5.4.3)
     dev: true
 
-  /stylelint-config-recommended-scss@14.0.0(postcss@8.4.35)(stylelint@16.2.1):
+  /stylelint-config-recommended-scss@14.0.0(postcss@8.4.35)(stylelint@16.3.1):
     resolution: {integrity: sha512-HDvpoOAQ1RpF+sPbDOT2Q2/YrBDEJDnUymmVmZ7mMCeNiFSdhRdyGEimBkz06wsN+HaFwUh249gDR+I9JR7Onw==}
     engines: {node: '>=18.12.0'}
     peerDependencies:
@@ -14100,21 +14216,21 @@ packages:
     dependencies:
       postcss: 8.4.35
       postcss-scss: 4.0.9(postcss@8.4.35)
-      stylelint: 16.2.1(typescript@5.4.3)
-      stylelint-config-recommended: 14.0.0(stylelint@16.2.1)
-      stylelint-scss: 6.0.0(stylelint@16.2.1)
+      stylelint: 16.3.1(typescript@5.4.3)
+      stylelint-config-recommended: 14.0.0(stylelint@16.3.1)
+      stylelint-scss: 6.0.0(stylelint@16.3.1)
     dev: true
 
-  /stylelint-config-recommended@14.0.0(stylelint@16.2.1):
+  /stylelint-config-recommended@14.0.0(stylelint@16.3.1):
     resolution: {integrity: sha512-jSkx290CglS8StmrLp2TxAppIajzIBZKYm3IxT89Kg6fGlxbPiTiyH9PS5YUuVAFwaJLl1ikiXX0QWjI0jmgZQ==}
     engines: {node: '>=18.12.0'}
     peerDependencies:
       stylelint: ^16.0.0
     dependencies:
-      stylelint: 16.2.1(typescript@5.4.3)
+      stylelint: 16.3.1(typescript@5.4.3)
     dev: true
 
-  /stylelint-config-standard-scss@13.0.0(postcss@8.4.35)(stylelint@16.2.1):
+  /stylelint-config-standard-scss@13.0.0(postcss@8.4.35)(stylelint@16.3.1):
     resolution: {integrity: sha512-WaLvkP689qSYUpJQPCo30TFJSSc3VzvvoWnrgp+7PpVby5o8fRUY1cZcP0sePZfjrFl9T8caGhcKg0GO34VDiQ==}
     engines: {node: '>=18.12.0'}
     peerDependencies:
@@ -14125,42 +14241,42 @@ packages:
         optional: true
     dependencies:
       postcss: 8.4.35
-      stylelint: 16.2.1(typescript@5.4.3)
-      stylelint-config-recommended-scss: 14.0.0(postcss@8.4.35)(stylelint@16.2.1)
-      stylelint-config-standard: 36.0.0(stylelint@16.2.1)
+      stylelint: 16.3.1(typescript@5.4.3)
+      stylelint-config-recommended-scss: 14.0.0(postcss@8.4.35)(stylelint@16.3.1)
+      stylelint-config-standard: 36.0.0(stylelint@16.3.1)
     dev: true
 
-  /stylelint-config-standard@36.0.0(stylelint@16.2.1):
+  /stylelint-config-standard@36.0.0(stylelint@16.3.1):
     resolution: {integrity: sha512-3Kjyq4d62bYFp/Aq8PMKDwlgUyPU4nacXsjDLWJdNPRUgpuxALu1KnlAHIj36cdtxViVhXexZij65yM0uNIHug==}
     engines: {node: '>=18.12.0'}
     peerDependencies:
       stylelint: ^16.1.0
     dependencies:
-      stylelint: 16.2.1(typescript@5.4.3)
-      stylelint-config-recommended: 14.0.0(stylelint@16.2.1)
+      stylelint: 16.3.1(typescript@5.4.3)
+      stylelint-config-recommended: 14.0.0(stylelint@16.3.1)
     dev: true
 
-  /stylelint-define-config@1.2.0(stylelint@16.2.1):
+  /stylelint-define-config@1.2.0(stylelint@16.3.1):
     resolution: {integrity: sha512-/Ful3xCnFaE3jCiWPRcyVHaT0Cpxe7IK/owtosfMs+EqjPqEt/EkCfB1jeMhotrndL/H6mISvArd82cFQZdEGQ==}
     engines: {node: '>=18.0.0', npm: '>=9.0.0', pnpm: '>=8.6.0'}
     peerDependencies:
       stylelint: '>=16.0.0'
     dependencies:
       csstype: 3.1.3
-      stylelint: 16.2.1(typescript@5.4.3)
+      stylelint: 16.3.1(typescript@5.4.3)
     dev: true
 
-  /stylelint-order@6.0.4(stylelint@16.2.1):
+  /stylelint-order@6.0.4(stylelint@16.3.1):
     resolution: {integrity: sha512-0UuKo4+s1hgQ/uAxlYU4h0o0HS4NiQDud0NAUNI0aa8FJdmYHA5ZZTFHiV5FpmE3071e9pZx5j0QpVJW5zOCUA==}
     peerDependencies:
       stylelint: ^14.0.0 || ^15.0.0 || ^16.0.1
     dependencies:
       postcss: 8.4.35
       postcss-sorting: 8.0.2(postcss@8.4.35)
-      stylelint: 16.2.1(typescript@5.4.3)
+      stylelint: 16.3.1(typescript@5.4.3)
     dev: true
 
-  /stylelint-scss@6.0.0(stylelint@16.2.1):
+  /stylelint-scss@6.0.0(stylelint@16.3.1):
     resolution: {integrity: sha512-N1xV/Ef5PNRQQt9E45unzGvBUN1KZxCI8B4FgN/pMfmyRYbZGVN4y9qWlvOMdScU17c8VVCnjIHTVn38Bb6qSA==}
     engines: {node: '>=18.12.0'}
     peerDependencies:
@@ -14171,18 +14287,19 @@ packages:
       postcss-resolve-nested-selector: 0.1.1
       postcss-selector-parser: 6.0.15
       postcss-value-parser: 4.2.0
-      stylelint: 16.2.1(typescript@5.4.3)
+      stylelint: 16.3.1(typescript@5.4.3)
     dev: true
 
-  /stylelint@16.2.1(typescript@5.4.3):
-    resolution: {integrity: sha512-SfIMGFK+4n7XVAyv50CpVfcGYWG4v41y6xG7PqOgQSY8M/PgdK0SQbjWFblxjJZlN9jNq879mB4BCZHJRIJ1hA==}
+  /stylelint@16.3.1(typescript@5.4.3):
+    resolution: {integrity: sha512-/JOwQnBvxEKOT2RtNgGpBVXnCSMBgKOL2k7w0K52htwCyJls4+cHvc4YZgXlVoAZS9QJd2DgYAiRnja96pTgxw==}
     engines: {node: '>=18.12.0'}
     hasBin: true
     dependencies:
-      '@csstools/css-parser-algorithms': 2.5.0(@csstools/css-tokenizer@2.2.3)
-      '@csstools/css-tokenizer': 2.2.3
-      '@csstools/media-query-list-parser': 2.1.7(@csstools/css-parser-algorithms@2.5.0)(@csstools/css-tokenizer@2.2.3)
-      '@csstools/selector-specificity': 3.0.1(postcss-selector-parser@6.0.15)
+      '@csstools/css-parser-algorithms': 2.6.1(@csstools/css-tokenizer@2.2.4)
+      '@csstools/css-tokenizer': 2.2.4
+      '@csstools/media-query-list-parser': 2.1.9(@csstools/css-parser-algorithms@2.6.1)(@csstools/css-tokenizer@2.2.4)
+      '@csstools/selector-specificity': 3.0.2(postcss-selector-parser@6.0.16)
+      '@dual-bundle/import-meta-resolve': 4.0.0
       balanced-match: 2.0.0
       colord: 2.9.3
       cosmiconfig: 9.0.0(typescript@5.4.3)
@@ -14196,19 +14313,19 @@ packages:
       globby: 11.1.0
       globjoin: 0.1.4
       html-tags: 3.3.1
-      ignore: 5.3.0
+      ignore: 5.3.1
       imurmurhash: 0.1.4
       is-plain-object: 5.0.0
-      known-css-properties: 0.29.0
+      known-css-properties: 0.30.0
       mathml-tag-names: 2.1.3
-      meow: 13.1.0
+      meow: 13.2.0
       micromatch: 4.0.5
       normalize-path: 3.0.0
       picocolors: 1.0.0
-      postcss: 8.4.33
+      postcss: 8.4.38
       postcss-resolve-nested-selector: 0.1.1
-      postcss-safe-parser: 7.0.0(postcss@8.4.33)
-      postcss-selector-parser: 6.0.15
+      postcss-safe-parser: 7.0.0(postcss@8.4.38)
+      postcss-selector-parser: 6.0.16
       postcss-value-parser: 4.2.0
       resolve-from: 5.0.0
       string-width: 4.2.3
@@ -14620,7 +14737,7 @@ packages:
     engines: {node: '>=6.10'}
     dev: false
 
-  /ts-node@10.9.2(@types/node@20.11.30)(typescript@5.4.3):
+  /ts-node@10.9.2(@types/node@20.12.2)(typescript@5.4.3):
     resolution: {integrity: sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==}
     hasBin: true
     peerDependencies:
@@ -14639,7 +14756,7 @@ packages:
       '@tsconfig/node12': 1.0.11
       '@tsconfig/node14': 1.0.3
       '@tsconfig/node16': 1.0.3
-      '@types/node': 20.11.30
+      '@types/node': 20.12.2
       acorn: 8.11.3
       acorn-walk: 8.2.0
       arg: 4.1.3
@@ -14769,6 +14886,7 @@ packages:
   /type-fest@3.8.0:
     resolution: {integrity: sha512-FVNSzGQz9Th+/9R6Lvv7WIAkstylfHN2/JYxkyhhmKFYh9At2DST8t6L6Lref9eYO8PXFTfG9Sg1Agg0K3vq3Q==}
     engines: {node: '>=14.16'}
+    dev: true
 
   /type-fest@4.12.0:
     resolution: {integrity: sha512-5Y2/pp2wtJk8o08G0CMkuFPCO354FGwk/vbidxrdhRGZfd0tFnb4Qb8anp9XxXriwBgVPjdWbKpGl4J9lJY2jQ==}
@@ -15209,8 +15327,8 @@ packages:
       fsevents: 2.3.3
     dev: false
 
-  /vite@5.2.4(@types/node@20.9.1):
-    resolution: {integrity: sha512-vjFghvHWidBTinu5TCymJk/lRHlR5ljqB83yugr0HA1xspUPdOZHqbqDLnZ8f9/jINrtFHTCYYyIUi+o+Q5iyg==}
+  /vite@5.2.7(@types/node@20.9.1):
+    resolution: {integrity: sha512-k14PWOKLI6pMaSzAuGtT+Cf0YmIx12z9YGon39onaJNy8DLBfBJrzg9FQEmkAM5lpHBZs9wksWAsyF/HkpEwJA==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     peerDependencies:
@@ -15318,7 +15436,7 @@ packages:
       typescript: 5.4.3
     dev: false
 
-  /vuepress-plugin-md-enhance@2.0.0-rc.32(katex@0.16.9)(markdown-it@14.1.0)(typescript@5.4.3)(vuepress@2.0.0-rc.9):
+  /vuepress-plugin-md-enhance@2.0.0-rc.32(katex@0.16.10)(markdown-it@14.1.0)(typescript@5.4.3)(vuepress@2.0.0-rc.9):
     resolution: {integrity: sha512-zZK8aEfbq26J5w8o9xGWXCHHrL3PYk25tloTPcx96nZWYPeD+5fMFAtVpHte0rXBWUf0MBtDQxddSeATteBE7Q==}
     engines: {node: '>=18.16.0', npm: '>=8', pnpm: '>=7', yarn: '>=2'}
     peerDependencies:
@@ -15381,7 +15499,7 @@ packages:
       '@mdit/plugin-img-mark': 0.8.0(markdown-it@14.1.0)
       '@mdit/plugin-img-size': 0.8.0(markdown-it@14.1.0)
       '@mdit/plugin-include': 0.8.0(markdown-it@14.1.0)
-      '@mdit/plugin-katex': 0.8.0(katex@0.16.9)(markdown-it@14.1.0)
+      '@mdit/plugin-katex': 0.8.0(katex@0.16.10)(markdown-it@14.1.0)
       '@mdit/plugin-mark': 0.8.0(markdown-it@14.1.0)
       '@mdit/plugin-mathjax': 0.8.0(markdown-it@14.1.0)
       '@mdit/plugin-stylize': 0.8.0(markdown-it@14.1.0)
@@ -15396,7 +15514,7 @@ packages:
       '@vueuse/core': 10.9.0(vue@3.4.21)
       balloon-css: 1.2.0
       js-yaml: 4.1.0
-      katex: 0.16.9
+      katex: 0.16.10
       vue: 3.4.21(typescript@5.4.3)
       vuepress: 2.0.0-rc.9(@vuepress/bundler-vite@2.0.0-rc.9)(typescript@5.4.3)(vue@3.4.21)
       vuepress-plugin-sass-palette: 2.0.0-rc.32(typescript@5.4.3)(vuepress@2.0.0-rc.9)
diff --git a/theme/package.json b/theme/package.json
index 3ce436d9..96157062 100644
--- a/theme/package.json
+++ b/theme/package.json
@@ -59,7 +59,6 @@
     "@vuepress-plume/plugin-auto-frontmatter": "workspace:*",
     "@vuepress-plume/plugin-baidu-tongji": "workspace:*",
     "@vuepress-plume/plugin-blog-data": "workspace:*",
-    "@vuepress-plume/plugin-caniuse": "workspace:*",
     "@vuepress-plume/plugin-content-update": "workspace:*",
     "@vuepress-plume/plugin-copy-code": "workspace:*",
     "@vuepress-plume/plugin-iconify": "workspace:*",
@@ -83,11 +82,12 @@
     "@vueuse/core": "^10.9.0",
     "bcrypt-ts": "^5.0.2",
     "date-fns": "^3.6.0",
-    "katex": "^0.16.9",
+    "katex": "^0.16.10",
     "lodash.merge": "^4.6.2",
     "nanoid": "^5.0.6",
     "vue": "^3.4.21",
     "vue-router": "4.3.0",
-    "vuepress-plugin-md-enhance": "2.0.0-rc.32"
+    "vuepress-plugin-md-enhance": "2.0.0-rc.32",
+    "vuepress-plugin-md-power": "workspace:*"
   }
 }
diff --git a/theme/src/client/components/Page.vue b/theme/src/client/components/Page.vue
index 4332b59d..83ad2320 100644
--- a/theme/src/client/components/Page.vue
+++ b/theme/src/client/components/Page.vue
@@ -193,7 +193,7 @@ onContentUpdated(() => zoom?.refresh())
 
 @media (min-width: 1440px) {
   .plume-page:not(.has-sidebar) .content {
-    max-width: 784px;
+    max-width: 884px;
   }
 
   .plume-page:not(.has-sidebar) .container {
diff --git a/theme/src/client/composables/darkMode.ts b/theme/src/client/composables/darkMode.ts
index c0a7e153..fd3e37f9 100644
--- a/theme/src/client/composables/darkMode.ts
+++ b/theme/src/client/composables/darkMode.ts
@@ -1,5 +1,5 @@
-import { inject, onMounted, provide, ref } from 'vue'
-import type { InjectionKey, Ref } from 'vue'
+import { inject, onMounted, ref } from 'vue'
+import type { App, InjectionKey, Ref } from 'vue'
 
 export type DarkModeRef = Ref<boolean>
 
@@ -22,10 +22,18 @@ export function useDarkMode(): DarkModeRef {
  * Create dark mode ref and provide as global computed in setup
  */
 export function setupDarkMode(): void {
-  const isDark = ref<boolean>(false)
+  const isDark = useDarkMode()
   onMounted(() => {
     if (document.documentElement.classList.contains('dark'))
       isDark.value = true
   })
-  provide(darkModeSymbol, isDark)
+}
+
+export function injectDarkMode(app: App): void {
+  const isDark = ref<boolean>(false)
+  app.provide(darkModeSymbol, isDark)
+
+  Object.defineProperty(app.config.globalProperties, '$isDark', {
+    get: () => isDark,
+  })
 }
diff --git a/theme/src/client/composables/page.ts b/theme/src/client/composables/page.ts
index e1a1fbb2..249dde84 100644
--- a/theme/src/client/composables/page.ts
+++ b/theme/src/client/composables/page.ts
@@ -60,8 +60,8 @@ export function useLastUpdated() {
   const frontmatter = usePageFrontmatter<PlumeThemePageFrontmatter>()
   const lang = usePageLang()
 
-  const date = computed(() => new Date(page.value.git?.updatedTime ?? ''))
-  const isoDatetime = computed(() => date.value.toISOString())
+  const date = computed(() => page.value.git?.updatedTime ? new Date(page.value.git.updatedTime) : null)
+  const isoDatetime = computed(() => date.value?.toISOString())
 
   const datetime = ref('')
 
@@ -76,13 +76,15 @@ export function useLastUpdated() {
       if (frontmatter.value.lastUpdated === false || theme.value.lastUpdated === false)
         return
 
-      datetime.value = new Intl.DateTimeFormat(
-        theme.value.lastUpdated?.formatOptions?.forceLocale ? lang.value : undefined,
-        theme.value.lastUpdated?.formatOptions ?? {
-          dateStyle: 'short',
-          timeStyle: 'short',
-        },
-      ).format(date.value)
+      datetime.value = date.value
+        ? new Intl.DateTimeFormat(
+          theme.value.lastUpdated?.formatOptions?.forceLocale ? lang.value : undefined,
+          theme.value.lastUpdated?.formatOptions ?? {
+            dateStyle: 'short',
+            timeStyle: 'short',
+          },
+        ).format(date.value)
+        : ''
     })
   })
 
diff --git a/theme/src/client/config.ts b/theme/src/client/config.ts
index b2cf7e55..a14301ea 100644
--- a/theme/src/client/config.ts
+++ b/theme/src/client/config.ts
@@ -5,13 +5,15 @@ import type { ClientConfig } from 'vuepress/client'
 import { h } from 'vue'
 import Badge from './components/global/Badge.vue'
 import ExternalLinkIcon from './components/global/ExternalLinkIcon.vue'
-import { setupDarkMode, useScrollPromise } from './composables/index.js'
+import { injectDarkMode, setupDarkMode, useScrollPromise } from './composables/index.js'
 import Layout from './layouts/Layout.vue'
 import NotFound from './layouts/NotFound.vue'
 import HomeBox from './components/Home/HomeBox.vue'
 
 export default defineClientConfig({
   enhance({ app, router }) {
+    injectDarkMode(app)
+
     // global component
     app.component('Badge', Badge)
 
diff --git a/theme/src/client/utils/color.ts b/theme/src/client/utils/color.ts
deleted file mode 100644
index 0bf7541c..00000000
--- a/theme/src/client/utils/color.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-const colorList = [
-  'var(--vp-c-brand-1)',
-  'var(--vp-c-brand-2)',
-  'var(--vp-c-green-1)',
-  'var(--vp-c-green-2)',
-  'var(--vp-c-green-3)',
-  'var(--vp-c-yellow-1)',
-  'var(--vp-c-yellow-2)',
-  'var(--vp-c-yellow-3)',
-  'var(--vp-c-red-1)',
-  'var(--vp-c-red-2)',
-  'var(--vp-c-red-3)',
-]
-
-export function getRandomColor() {
-  return colorList[Math.floor(Math.random() * colorList.length)]
-}
diff --git a/theme/src/node/plugins.ts b/theme/src/node/plugins.ts
index e4aec2fe..0df1e038 100644
--- a/theme/src/node/plugins.ts
+++ b/theme/src/node/plugins.ts
@@ -10,7 +10,6 @@ import { themeDataPlugin } from '@vuepress/plugin-theme-data'
 import { autoFrontmatterPlugin } from '@vuepress-plume/plugin-auto-frontmatter'
 import { baiduTongjiPlugin } from '@vuepress-plume/plugin-baidu-tongji'
 import { blogDataPlugin } from '@vuepress-plume/plugin-blog-data'
-import { caniusePlugin } from '@vuepress-plume/plugin-caniuse'
 import { copyCodePlugin } from '@vuepress-plume/plugin-copy-code'
 import { iconifyPlugin } from '@vuepress-plume/plugin-iconify'
 import { notesDataPlugin } from '@vuepress-plume/plugin-notes-data'
@@ -22,6 +21,7 @@ import { seoPlugin } from '@vuepress/plugin-seo'
 import { sitemapPlugin } from '@vuepress/plugin-sitemap'
 import { contentUpdatePlugin } from '@vuepress-plume/plugin-content-update'
 import { searchPlugin } from '@vuepress-plume/plugin-search'
+import { markdownPowerPlugin } from 'vuepress-plugin-md-power'
 import type {
   PlumeThemeEncrypt,
   PlumeThemeLocaleOptions,
@@ -139,9 +139,6 @@ export function setupPlugins(
     }))
   }
 
-  if (options.caniuse !== false)
-    plugins.push(caniusePlugin(options.caniuse || { mode: 'embed' }))
-
   if (options.externalLinkIcon !== false) {
     plugins.push(externalLinkIconPlugin({
       locales: Object.entries(localeOptions.locales || {}).reduce(
@@ -205,6 +202,13 @@ export function setupPlugins(
     ))
   }
 
+  if (options.markdownPower !== false) {
+    plugins.push(markdownPowerPlugin({
+      caniuse: options.caniuse,
+      ...options.markdownPower || {},
+    }))
+  }
+
   if (options.comment)
     plugins.push(commentPlugin(options.comment))
 
diff --git a/theme/src/shared/options/plugins.ts b/theme/src/shared/options/plugins.ts
index 5b29ff22..33e5b9e6 100644
--- a/theme/src/shared/options/plugins.ts
+++ b/theme/src/shared/options/plugins.ts
@@ -2,18 +2,20 @@ import type { DocsearchOptions } from '@vuepress/plugin-docsearch'
 import type { SearchPluginOptions } from '@vuepress-plume/plugin-search'
 import type { AutoFrontmatterOptions } from '@vuepress-plume/plugin-auto-frontmatter'
 import type { BaiduTongjiOptions } from '@vuepress-plume/plugin-baidu-tongji'
-import type { CanIUsePluginOptions } from '@vuepress-plume/plugin-caniuse'
 import type { CopyCodeOptions } from '@vuepress-plume/plugin-copy-code'
 import type { ShikiPluginOptions } from '@vuepress-plume/plugin-shikiji'
 import type { CommentPluginOptions } from '@vuepress/plugin-comment'
 import type { MarkdownEnhanceOptions } from 'vuepress-plugin-md-enhance'
 import type { ReadingTimePluginOptions } from '@vuepress/plugin-reading-time'
+import type { MarkdownPowerPluginOptions } from 'vuepress-plugin-md-power'
 
 export interface PlumeThemePluginOptions {
   /**
+   * @deprecated 迁移至 `plugin-md-power` 插件
+   *
    * 是否启用 can-i-use 插件
    */
-  caniuse?: false | CanIUsePluginOptions
+  caniuse?: false
 
   /**
    * 是否启用 external-link-icon 插件
@@ -54,6 +56,8 @@ export interface PlumeThemePluginOptions {
 
   markdownEnhance?: false | MarkdownEnhanceOptions
 
+  markdownPower?: false | MarkdownPowerPluginOptions
+
   comment?: false | CommentPluginOptions
 
   sitemap?: false
diff --git a/tsconfig.json b/tsconfig.json
index 9fdaa2c3..fb4db8ed 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -17,6 +17,9 @@
       "@vuepress-plume/*/client": ["./plugins/*/src/client/index.ts"],
       "vuepress-plugin-netlify-functions": [
         "./plugins/plugin-netlify-functions/src/node/index.ts"
+      ],
+      "vuepress-plugin-md-power": [
+        "./plugins/plugin-md-power/src/node/index.ts"
       ]
     },
     "types": ["webpack-env", "vite/client"]