From 2cf606b1de119478087f676808e9e2a06cdb04af Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Sun, 22 Sep 2024 07:57:49 +0800
Subject: [PATCH] perf(plugin-md-power): optimize structure (#204)

---
 .../src/client/components/CanIUse.vue         |   8 +-
 .../src/client/components/CodeEditor.vue      |   4 +-
 .../src/client/components/CodeSandbox.vue     |  10 +-
 .../fileTree/definitions.ts                   |   0
 .../fileTree/findIcon.ts                      |   0
 .../{features => container}/fileTree/index.ts |   0
 .../fileTree/resolveTreeNodeInfo.ts           |   0
 .../src/node/container/index.ts               |  19 +++
 .../node/{features => container}/langRepl.ts  |   0
 .../src/node/{features => embed}/caniuse.ts   |   4 +-
 .../{features => embed/code}/codeSandbox.ts   |  10 +-
 .../node/{features => embed/code}/codepen.ts  |  10 +-
 .../node/{features => embed/code}/jsfiddle.ts |  10 +-
 .../node/{features => embed/code}/replit.ts   |  10 +-
 .../createEmbedRuleBlock.ts}                  |   6 +-
 .../plugin-md-power/src/node/embed/index.ts   |  55 ++++++++
 .../src/node/{features => embed}/pdf.ts       |   4 +-
 .../{features => embed}/video/bilibili.ts     |   4 +-
 .../node/{features => embed}/video/youtube.ts |   4 +-
 .../node/{features => enhance}/imageSize.ts   |   0
 plugins/plugin-md-power/src/node/index.ts     |   2 +-
 .../src/node/{features => inline}/icons.ts    |   9 +-
 .../plugin-md-power/src/node/inline/index.ts  |  22 ++++
 .../src/node/{features => inline}/plot.ts     |  11 +-
 plugins/plugin-md-power/src/node/plugin.ts    | 124 ++++--------------
 25 files changed, 169 insertions(+), 157 deletions(-)
 rename plugins/plugin-md-power/src/node/{features => container}/fileTree/definitions.ts (100%)
 rename plugins/plugin-md-power/src/node/{features => container}/fileTree/findIcon.ts (100%)
 rename plugins/plugin-md-power/src/node/{features => container}/fileTree/index.ts (100%)
 rename plugins/plugin-md-power/src/node/{features => container}/fileTree/resolveTreeNodeInfo.ts (100%)
 create mode 100644 plugins/plugin-md-power/src/node/container/index.ts
 rename plugins/plugin-md-power/src/node/{features => container}/langRepl.ts (100%)
 rename plugins/plugin-md-power/src/node/{features => embed}/caniuse.ts (96%)
 rename plugins/plugin-md-power/src/node/{features => embed/code}/codeSandbox.ts (82%)
 rename plugins/plugin-md-power/src/node/{features => embed/code}/codepen.ts (86%)
 rename plugins/plugin-md-power/src/node/{features => embed/code}/jsfiddle.ts (80%)
 rename plugins/plugin-md-power/src/node/{features => embed/code}/replit.ts (76%)
 rename plugins/plugin-md-power/src/node/{utils/createRuleBlock.ts => embed/createEmbedRuleBlock.ts} (89%)
 create mode 100644 plugins/plugin-md-power/src/node/embed/index.ts
 rename plugins/plugin-md-power/src/node/{features => embed}/pdf.ts (92%)
 rename plugins/plugin-md-power/src/node/{features => embed}/video/bilibili.ts (94%)
 rename plugins/plugin-md-power/src/node/{features => embed}/video/youtube.ts (93%)
 rename plugins/plugin-md-power/src/node/{features => enhance}/imageSize.ts (100%)
 rename plugins/plugin-md-power/src/node/{features => inline}/icons.ts (96%)
 create mode 100644 plugins/plugin-md-power/src/node/inline/index.ts
 rename plugins/plugin-md-power/src/node/{features => inline}/plot.ts (90%)

diff --git a/plugins/plugin-md-power/src/client/components/CanIUse.vue b/plugins/plugin-md-power/src/client/components/CanIUse.vue
index f8a9e7b4..9449e12d 100644
--- a/plugins/plugin-md-power/src/client/components/CanIUse.vue
+++ b/plugins/plugin-md-power/src/client/components/CanIUse.vue
@@ -68,15 +68,11 @@ function parseData(data: string | MessageData): MessageData {
     :data-past="past"
     :data-future="future"
   >
-    <iframe
-      :src="source"
-      :style="{ height }"
-      :title="`Can I use ${feature}`"
-    />
+    <iframe :src="source" :style="{ height }" :title="`Can I use ${feature}`" />
   </div>
 </template>
 
-<style scoped>
+<style>
 .ciu_embed {
   margin: 16px -24px;
 }
diff --git a/plugins/plugin-md-power/src/client/components/CodeEditor.vue b/plugins/plugin-md-power/src/client/components/CodeEditor.vue
index a209eccd..202c1168 100644
--- a/plugins/plugin-md-power/src/client/components/CodeEditor.vue
+++ b/plugins/plugin-md-power/src/client/components/CodeEditor.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HighlighterCore } from 'shiki/core'
 import editorData from '@internal/md-power/replEditorData'
-import { getHighlighterCore } from 'shiki/core'
+import { createHighlighterCore } from 'shiki/core'
 import { onMounted, onUnmounted, ref, shallowRef, watch } from 'vue'
 import { resolveCodeInfo } from '../composables/codeRepl.js'
 
@@ -17,7 +17,7 @@ const textAreaEl = shallowRef<HTMLTextAreaElement>()
 const input = ref('')
 
 async function init() {
-  highlighter = await getHighlighterCore({
+  highlighter = await createHighlighterCore({
     themes: 'light' in theme && 'dark' in theme ? [theme.light, theme.dark] : [theme],
     langs: Object.keys(grammars).map(key => grammars[key]),
     loadWasm: () => import('shiki/wasm'),
diff --git a/plugins/plugin-md-power/src/client/components/CodeSandbox.vue b/plugins/plugin-md-power/src/client/components/CodeSandbox.vue
index c7e49253..c3d2f625 100644
--- a/plugins/plugin-md-power/src/client/components/CodeSandbox.vue
+++ b/plugins/plugin-md-power/src/client/components/CodeSandbox.vue
@@ -11,19 +11,17 @@ const SANDBOX = 'allow-forms allow-modals allow-popups allow-presentation allow-
 
 const source = computed(() => {
   const params = new URLSearchParams()
-  if (props.filepath) {
+  if (props.filepath)
     params.set(props.type === 'embed' ? 'module' : 'file', encodeURIComponent(props.filepath))
-  }
 
   if (props.type === 'embed') {
     params.set('view', props.layout ? props.layout.replace(/,/g, '+') : 'Editor+Preview')
 
-    if (props.console) {
+    if (props.console)
       params.set('expanddevtools', '1')
-    }
-    if (props.navbar === false) {
+
+    if (props.navbar === false)
       params.set('hidenavigation', '1')
-    }
   }
   else {
     params.set('from-embed', '')
diff --git a/plugins/plugin-md-power/src/node/features/fileTree/definitions.ts b/plugins/plugin-md-power/src/node/container/fileTree/definitions.ts
similarity index 100%
rename from plugins/plugin-md-power/src/node/features/fileTree/definitions.ts
rename to plugins/plugin-md-power/src/node/container/fileTree/definitions.ts
diff --git a/plugins/plugin-md-power/src/node/features/fileTree/findIcon.ts b/plugins/plugin-md-power/src/node/container/fileTree/findIcon.ts
similarity index 100%
rename from plugins/plugin-md-power/src/node/features/fileTree/findIcon.ts
rename to plugins/plugin-md-power/src/node/container/fileTree/findIcon.ts
diff --git a/plugins/plugin-md-power/src/node/features/fileTree/index.ts b/plugins/plugin-md-power/src/node/container/fileTree/index.ts
similarity index 100%
rename from plugins/plugin-md-power/src/node/features/fileTree/index.ts
rename to plugins/plugin-md-power/src/node/container/fileTree/index.ts
diff --git a/plugins/plugin-md-power/src/node/features/fileTree/resolveTreeNodeInfo.ts b/plugins/plugin-md-power/src/node/container/fileTree/resolveTreeNodeInfo.ts
similarity index 100%
rename from plugins/plugin-md-power/src/node/features/fileTree/resolveTreeNodeInfo.ts
rename to plugins/plugin-md-power/src/node/container/fileTree/resolveTreeNodeInfo.ts
diff --git a/plugins/plugin-md-power/src/node/container/index.ts b/plugins/plugin-md-power/src/node/container/index.ts
new file mode 100644
index 00000000..d8bc84ac
--- /dev/null
+++ b/plugins/plugin-md-power/src/node/container/index.ts
@@ -0,0 +1,19 @@
+import type { App } from 'vuepress'
+import type { Markdown } from 'vuepress/markdown'
+import type { MarkdownPowerPluginOptions } from '../../shared/index.js'
+import { fileTreePlugin } from './fileTree/index.js'
+import { langReplPlugin } from './langRepl.js'
+
+export async function containerPlugin(
+  app: App,
+  md: Markdown,
+  options: MarkdownPowerPluginOptions,
+) {
+  if (options.repl)
+    await langReplPlugin(app, md, options.repl)
+
+  if (options.fileTree) {
+    // ::: file-tree
+    fileTreePlugin(md)
+  }
+}
diff --git a/plugins/plugin-md-power/src/node/features/langRepl.ts b/plugins/plugin-md-power/src/node/container/langRepl.ts
similarity index 100%
rename from plugins/plugin-md-power/src/node/features/langRepl.ts
rename to plugins/plugin-md-power/src/node/container/langRepl.ts
diff --git a/plugins/plugin-md-power/src/node/features/caniuse.ts b/plugins/plugin-md-power/src/node/embed/caniuse.ts
similarity index 96%
rename from plugins/plugin-md-power/src/node/features/caniuse.ts
rename to plugins/plugin-md-power/src/node/embed/caniuse.ts
index 36b79290..b6ba6d6c 100644
--- a/plugins/plugin-md-power/src/node/features/caniuse.ts
+++ b/plugins/plugin-md-power/src/node/embed/caniuse.ts
@@ -8,7 +8,7 @@ import type Token from 'markdown-it/lib/token.mjs'
 import type { CanIUseMode, CanIUseOptions, CanIUseTokenMeta } from '../../shared/index.js'
 import container from 'markdown-it-container'
 import { customAlphabet } from 'nanoid'
-import { createRuleBlock } from '../utils/createRuleBlock.js'
+import { createEmbedRuleBlock } from './createEmbedRuleBlock.js'
 
 const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz', 5)
 const UNDERLINE_RE = /_+/g
@@ -22,7 +22,7 @@ export const caniusePlugin: PluginWithOptions<CanIUseOptions> = (
   md,
   { mode: defaultMode = 'embed' }: CanIUseOptions = {},
 ): void => {
-  createRuleBlock<CanIUseTokenMeta>(md, {
+  createEmbedRuleBlock<CanIUseTokenMeta>(md, {
     type: 'caniuse',
     syntaxPattern: /^@\[caniuse\s*(embed|image)?(?:\{([0-9,\-]*)\})?\]\(([^)]*)\)/,
     meta: ([, mode, versions = '', feature]) => ({
diff --git a/plugins/plugin-md-power/src/node/features/codeSandbox.ts b/plugins/plugin-md-power/src/node/embed/code/codeSandbox.ts
similarity index 82%
rename from plugins/plugin-md-power/src/node/features/codeSandbox.ts
rename to plugins/plugin-md-power/src/node/embed/code/codeSandbox.ts
index df00e508..c9d294db 100644
--- a/plugins/plugin-md-power/src/node/features/codeSandbox.ts
+++ b/plugins/plugin-md-power/src/node/embed/code/codeSandbox.ts
@@ -4,13 +4,13 @@
  * @[codesanbox title="xxx" layout="Editor+Preview" height="500px" navbar="false" console="false"](id#filepath)
  */
 import type { PluginWithOptions } from 'markdown-it'
-import type { CodeSandboxTokenMeta } from '../../shared/index.js'
-import { createRuleBlock } from '../utils/createRuleBlock.js'
-import { parseRect } from '../utils/parseRect.js'
-import { resolveAttrs } from '../utils/resolveAttrs.js'
+import type { CodeSandboxTokenMeta } from '../../../shared/index.js'
+import { parseRect } from '../../utils/parseRect.js'
+import { resolveAttrs } from '../../utils/resolveAttrs.js'
+import { createEmbedRuleBlock } from '../createEmbedRuleBlock.js'
 
 export const codeSandboxPlugin: PluginWithOptions<never> = (md) => {
-  createRuleBlock<CodeSandboxTokenMeta>(md, {
+  createEmbedRuleBlock<CodeSandboxTokenMeta>(md, {
     type: 'codesandbox',
     syntaxPattern: /^@\[codesandbox(?:\s+(embed|button))?([^\]]*)\]\(([^)]*)\)/,
     meta([, type, info = '', source = '']) {
diff --git a/plugins/plugin-md-power/src/node/features/codepen.ts b/plugins/plugin-md-power/src/node/embed/code/codepen.ts
similarity index 86%
rename from plugins/plugin-md-power/src/node/features/codepen.ts
rename to plugins/plugin-md-power/src/node/embed/code/codepen.ts
index df42484b..75cf1971 100644
--- a/plugins/plugin-md-power/src/node/features/codepen.ts
+++ b/plugins/plugin-md-power/src/node/embed/code/codepen.ts
@@ -4,15 +4,15 @@
  * @[codepen preview editable title="" height="400px" tab="css,result" theme="dark"](user/slash)
  */
 import type { PluginWithOptions } from 'markdown-it'
-import type { CodepenTokenMeta } from '../../shared/index.js'
-import { createRuleBlock } from '../utils/createRuleBlock.js'
-import { parseRect } from '../utils/parseRect.js'
-import { resolveAttrs } from '../utils/resolveAttrs.js'
+import type { CodepenTokenMeta } from '../../../shared/index.js'
+import { parseRect } from '../../utils/parseRect.js'
+import { resolveAttrs } from '../../utils/resolveAttrs.js'
+import { createEmbedRuleBlock } from '../createEmbedRuleBlock.js'
 
 const CODEPEN_LINK = 'https://codepen.io/'
 
 export const codepenPlugin: PluginWithOptions<never> = (md) => {
-  createRuleBlock<CodepenTokenMeta>(md, {
+  createEmbedRuleBlock<CodepenTokenMeta>(md, {
     type: 'codepen',
     syntaxPattern: /^@\[codepen([^\]]*)\]\(([^)]*)\)/,
     meta: ([, info = '', source = '']) => {
diff --git a/plugins/plugin-md-power/src/node/features/jsfiddle.ts b/plugins/plugin-md-power/src/node/embed/code/jsfiddle.ts
similarity index 80%
rename from plugins/plugin-md-power/src/node/features/jsfiddle.ts
rename to plugins/plugin-md-power/src/node/embed/code/jsfiddle.ts
index 1891cb7e..caa6009a 100644
--- a/plugins/plugin-md-power/src/node/features/jsfiddle.ts
+++ b/plugins/plugin-md-power/src/node/embed/code/jsfiddle.ts
@@ -3,13 +3,13 @@
  * @[jsfiddle theme="dark" tab="js,css,html,result"](user/id)
  */
 import type { PluginWithOptions } from 'markdown-it'
-import type { JSFiddleTokenMeta } from '../../shared/index.js'
-import { createRuleBlock } from '../utils/createRuleBlock.js'
-import { parseRect } from '../utils/parseRect.js'
-import { resolveAttrs } from '../utils/resolveAttrs.js'
+import type { JSFiddleTokenMeta } from '../../../shared/index.js'
+import { parseRect } from '../../utils/parseRect.js'
+import { resolveAttrs } from '../../utils/resolveAttrs.js'
+import { createEmbedRuleBlock } from '../createEmbedRuleBlock.js'
 
 export const jsfiddlePlugin: PluginWithOptions<never> = (md) => {
-  createRuleBlock<JSFiddleTokenMeta>(md, {
+  createEmbedRuleBlock<JSFiddleTokenMeta>(md, {
     type: 'jsfiddle',
     syntaxPattern: /^@\[jsfiddle([^\]]*)\]\(([^)]*)\)/,
     meta([, info = '', source]) {
diff --git a/plugins/plugin-md-power/src/node/features/replit.ts b/plugins/plugin-md-power/src/node/embed/code/replit.ts
similarity index 76%
rename from plugins/plugin-md-power/src/node/features/replit.ts
rename to plugins/plugin-md-power/src/node/embed/code/replit.ts
index 1b9dfa5d..f9d89d8b 100644
--- a/plugins/plugin-md-power/src/node/features/replit.ts
+++ b/plugins/plugin-md-power/src/node/embed/code/replit.ts
@@ -4,13 +4,13 @@
  * @[replit title="" height="400px" width="100%" theme="dark"](user/repl-name)
  */
 import type { PluginWithOptions } from 'markdown-it'
-import type { ReplitTokenMeta } from '../../shared/index.js'
-import { createRuleBlock } from '../utils/createRuleBlock.js'
-import { parseRect } from '../utils/parseRect.js'
-import { resolveAttrs } from '../utils/resolveAttrs.js'
+import type { ReplitTokenMeta } from '../../../shared/index.js'
+import { parseRect } from '../../utils/parseRect.js'
+import { resolveAttrs } from '../../utils/resolveAttrs.js'
+import { createEmbedRuleBlock } from '../createEmbedRuleBlock.js'
 
 export const replitPlugin: PluginWithOptions<never> = (md) => {
-  createRuleBlock<ReplitTokenMeta>(md, {
+  createEmbedRuleBlock<ReplitTokenMeta>(md, {
     type: 'replit',
     syntaxPattern: /^@\[replit([^\]]*)\]\(([^)]*)\)/,
     meta: ([, info = '', source = '']) => {
diff --git a/plugins/plugin-md-power/src/node/utils/createRuleBlock.ts b/plugins/plugin-md-power/src/node/embed/createEmbedRuleBlock.ts
similarity index 89%
rename from plugins/plugin-md-power/src/node/utils/createRuleBlock.ts
rename to plugins/plugin-md-power/src/node/embed/createEmbedRuleBlock.ts
index 7aa977e3..5b3aa050 100644
--- a/plugins/plugin-md-power/src/node/utils/createRuleBlock.ts
+++ b/plugins/plugin-md-power/src/node/embed/createEmbedRuleBlock.ts
@@ -1,7 +1,7 @@
 import type { RuleOptions } from 'markdown-it/lib/ruler.mjs'
 import type { Markdown } from 'vuepress/markdown'
 
-export interface RuleBlockOptions<Meta extends Record<string, any>> {
+export interface EmbedRuleBlockOptions<Meta extends Record<string, any>> {
   /**
    * @[type]()
    */
@@ -18,7 +18,7 @@ export interface RuleBlockOptions<Meta extends Record<string, any>> {
 }
 
 // @[name]()
-export function createRuleBlock<Meta extends Record<string, any> = Record<string, any>>(
+export function createEmbedRuleBlock<Meta extends Record<string, any> = Record<string, any>>(
   md: Markdown,
   {
     type,
@@ -28,7 +28,7 @@ export function createRuleBlock<Meta extends Record<string, any> = Record<string
     ruleOptions = { alt: ['paragraph', 'reference', 'blockquote', 'list'] },
     meta,
     content,
-  }: RuleBlockOptions<Meta>,
+  }: EmbedRuleBlockOptions<Meta>,
 ): void {
   const MIN_LENGTH = type.length + 5
   const START_CODES = [64, 91, ...type.split('').map(c => c.charCodeAt(0))]
diff --git a/plugins/plugin-md-power/src/node/embed/index.ts b/plugins/plugin-md-power/src/node/embed/index.ts
new file mode 100644
index 00000000..5760312a
--- /dev/null
+++ b/plugins/plugin-md-power/src/node/embed/index.ts
@@ -0,0 +1,55 @@
+import type { Markdown } from 'vuepress/markdown'
+import type { MarkdownPowerPluginOptions } from '../../shared/index.js'
+import { caniusePlugin, legacyCaniuse } from './caniuse.js'
+import { codepenPlugin } from './code/codepen.js'
+import { codeSandboxPlugin } from './code/codeSandbox.js'
+import { jsfiddlePlugin } from './code/jsfiddle.js'
+import { replitPlugin } from './code/replit.js'
+import { pdfPlugin } from './pdf.js'
+import { bilibiliPlugin } from './video/bilibili.js'
+import { youtubePlugin } from './video/youtube.js'
+
+export function embedSyntaxPlugin(md: Markdown, options: MarkdownPowerPluginOptions) {
+  if (options.caniuse) {
+    const caniuse = options.caniuse === true ? {} : options.caniuse
+    // @[caniuse](feature_name)
+    md.use(caniusePlugin, caniuse)
+    // 兼容旧语法
+    legacyCaniuse(md, caniuse)
+  }
+
+  if (options.pdf) {
+    // @[pdf](url)
+    md.use(pdfPlugin)
+  }
+
+  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)
+  }
+
+  if (options.codeSandbox) {
+    // @[codesandbox](id)
+    md.use(codeSandboxPlugin)
+  }
+
+  if (options.jsfiddle) {
+    // @[jsfiddle](user/id)
+    md.use(jsfiddlePlugin)
+  }
+}
diff --git a/plugins/plugin-md-power/src/node/features/pdf.ts b/plugins/plugin-md-power/src/node/embed/pdf.ts
similarity index 92%
rename from plugins/plugin-md-power/src/node/features/pdf.ts
rename to plugins/plugin-md-power/src/node/embed/pdf.ts
index 07507f05..4b0a008a 100644
--- a/plugins/plugin-md-power/src/node/features/pdf.ts
+++ b/plugins/plugin-md-power/src/node/embed/pdf.ts
@@ -6,12 +6,12 @@
 import type { PluginWithOptions } from 'markdown-it'
 import type { PDFTokenMeta } from '../../shared/index.js'
 import { path } from 'vuepress/utils'
-import { createRuleBlock } from '../utils/createRuleBlock.js'
 import { parseRect } from '../utils/parseRect.js'
 import { resolveAttrs } from '../utils/resolveAttrs.js'
+import { createEmbedRuleBlock } from './createEmbedRuleBlock.js'
 
 export const pdfPlugin: PluginWithOptions<never> = (md) => {
-  createRuleBlock<PDFTokenMeta>(md, {
+  createEmbedRuleBlock<PDFTokenMeta>(md, {
     type: 'pdf',
     // eslint-disable-next-line regexp/no-super-linear-backtracking
     syntaxPattern: /^@\[pdf(?:\s+(\d+))?([^\]]*)\]\(([^)]*)\)/,
diff --git a/plugins/plugin-md-power/src/node/features/video/bilibili.ts b/plugins/plugin-md-power/src/node/embed/video/bilibili.ts
similarity index 94%
rename from plugins/plugin-md-power/src/node/features/video/bilibili.ts
rename to plugins/plugin-md-power/src/node/embed/video/bilibili.ts
index 0d0b19e0..3a503aea 100644
--- a/plugins/plugin-md-power/src/node/features/video/bilibili.ts
+++ b/plugins/plugin-md-power/src/node/embed/video/bilibili.ts
@@ -7,15 +7,15 @@
 import type { PluginWithOptions } from 'markdown-it'
 import type { BilibiliTokenMeta } from '../../../shared/index.js'
 import { URLSearchParams } from 'node:url'
-import { createRuleBlock } from '../../utils/createRuleBlock.js'
 import { parseRect } from '../../utils/parseRect.js'
 import { resolveAttrs } from '../../utils/resolveAttrs.js'
 import { timeToSeconds } from '../../utils/timeToSeconds.js'
+import { createEmbedRuleBlock } from '../createEmbedRuleBlock.js'
 
 const BILIBILI_LINK = 'https://player.bilibili.com/player.html'
 
 export const bilibiliPlugin: PluginWithOptions<never> = (md) => {
-  createRuleBlock<BilibiliTokenMeta>(md, {
+  createEmbedRuleBlock<BilibiliTokenMeta>(md, {
     type: 'bilibili',
     name: 'video_bilibili',
     // eslint-disable-next-line regexp/no-super-linear-backtracking
diff --git a/plugins/plugin-md-power/src/node/features/video/youtube.ts b/plugins/plugin-md-power/src/node/embed/video/youtube.ts
similarity index 93%
rename from plugins/plugin-md-power/src/node/features/video/youtube.ts
rename to plugins/plugin-md-power/src/node/embed/video/youtube.ts
index 84efd1c3..6cdb2279 100644
--- a/plugins/plugin-md-power/src/node/features/video/youtube.ts
+++ b/plugins/plugin-md-power/src/node/embed/video/youtube.ts
@@ -4,15 +4,15 @@
 import type { PluginWithOptions } from 'markdown-it'
 import type { YoutubeTokenMeta } from '../../../shared/index.js'
 import { URLSearchParams } from 'node:url'
-import { createRuleBlock } from '../../utils/createRuleBlock.js'
 import { parseRect } from '../../utils/parseRect.js'
 import { resolveAttrs } from '../../utils/resolveAttrs.js'
 import { timeToSeconds } from '../../utils/timeToSeconds.js'
+import { createEmbedRuleBlock } from '..//createEmbedRuleBlock.js'
 
 const YOUTUBE_LINK = 'https://www.youtube.com/embed/'
 
 export const youtubePlugin: PluginWithOptions<never> = (md) => {
-  createRuleBlock<YoutubeTokenMeta>(md, {
+  createEmbedRuleBlock<YoutubeTokenMeta>(md, {
     type: 'youtube',
     name: 'video_youtube',
     syntaxPattern: /^@\[youtube([^\]]*)\]\(([^)]*)\)/,
diff --git a/plugins/plugin-md-power/src/node/features/imageSize.ts b/plugins/plugin-md-power/src/node/enhance/imageSize.ts
similarity index 100%
rename from plugins/plugin-md-power/src/node/features/imageSize.ts
rename to plugins/plugin-md-power/src/node/enhance/imageSize.ts
diff --git a/plugins/plugin-md-power/src/node/index.ts b/plugins/plugin-md-power/src/node/index.ts
index 6a18e7d8..7b1a4de2 100644
--- a/plugins/plugin-md-power/src/node/index.ts
+++ b/plugins/plugin-md-power/src/node/index.ts
@@ -1,3 +1,3 @@
 export * from '../shared/index.js'
-export { resolveImageSize } from './features/imageSize.js'
+export { resolveImageSize } from './enhance/imageSize.js'
 export * from './plugin.js'
diff --git a/plugins/plugin-md-power/src/node/features/icons.ts b/plugins/plugin-md-power/src/node/inline/icons.ts
similarity index 96%
rename from plugins/plugin-md-power/src/node/features/icons.ts
rename to plugins/plugin-md-power/src/node/inline/icons.ts
index 3f632f22..b6eddedb 100644
--- a/plugins/plugin-md-power/src/node/features/icons.ts
+++ b/plugins/plugin-md-power/src/node/inline/icons.ts
@@ -9,6 +9,9 @@ import type { RuleInline } from 'markdown-it/lib/parser_inline.mjs'
 
 const [openTag, endTag] = [':[', ']:']
 
+export const iconsPlugin: PluginWithOptions<never> = md =>
+  md.inline.ruler.before('emphasis', 'iconify', createTokenizer())
+
 function createTokenizer(): RuleInline {
   return (state, silent) => {
     let found = false
@@ -75,9 +78,3 @@ function createTokenizer(): RuleInline {
     return true
   }
 }
-
-export const iconsPlugin: PluginWithOptions<never> = (
-  md,
-) => {
-  md.inline.ruler.before('emphasis', 'iconify', createTokenizer())
-}
diff --git a/plugins/plugin-md-power/src/node/inline/index.ts b/plugins/plugin-md-power/src/node/inline/index.ts
new file mode 100644
index 00000000..312d66c6
--- /dev/null
+++ b/plugins/plugin-md-power/src/node/inline/index.ts
@@ -0,0 +1,22 @@
+import type { Markdown } from 'vuepress/markdown'
+import type { MarkdownPowerPluginOptions } from '../../shared/index.js'
+import { iconsPlugin } from './icons.js'
+import { plotPlugin } from './plot.js'
+
+export function inlineSyntaxPlugin(
+  md: Markdown,
+  options: MarkdownPowerPluginOptions,
+): void {
+  if (options.icons) {
+    // :[collect:name]:
+    md.use(iconsPlugin)
+  }
+
+  if (
+    options.plot === true
+    || (typeof options.plot === 'object' && options.plot.tag !== false)
+  ) {
+    // !!plot!!
+    md.use(plotPlugin)
+  }
+}
diff --git a/plugins/plugin-md-power/src/node/features/plot.ts b/plugins/plugin-md-power/src/node/inline/plot.ts
similarity index 90%
rename from plugins/plugin-md-power/src/node/features/plot.ts
rename to plugins/plugin-md-power/src/node/inline/plot.ts
index dc52a758..e6cd15fc 100644
--- a/plugins/plugin-md-power/src/node/features/plot.ts
+++ b/plugins/plugin-md-power/src/node/inline/plot.ts
@@ -1,11 +1,14 @@
 /**
- * =|这里的文本将被黑幕隐藏，通过点击或者 hover 才可重现|=
+ * !!这里的文本将被黑幕隐藏，通过点击或者 hover 才可重现!!
  */
 import type { PluginWithOptions } from 'markdown-it'
 import type { RuleInline } from 'markdown-it/lib/parser_inline.mjs'
 
 const [openTag, endTag] = ['!!', '!!']
 
+export const plotPlugin: PluginWithOptions<never> = md =>
+  md.inline.ruler.before('emphasis', 'plot', createTokenizer())
+
 function createTokenizer(): RuleInline {
   return (state, silent) => {
     let found = false
@@ -65,9 +68,3 @@ function createTokenizer(): RuleInline {
     return true
   }
 }
-
-export const plotPlugin: PluginWithOptions<never> = (
-  md,
-) => {
-  md.inline.ruler.before('emphasis', 'plot', createTokenizer())
-}
diff --git a/plugins/plugin-md-power/src/node/plugin.ts b/plugins/plugin-md-power/src/node/plugin.ts
index 31e72bea..07a5e43a 100644
--- a/plugins/plugin-md-power/src/node/plugin.ts
+++ b/plugins/plugin-md-power/src/node/plugin.ts
@@ -1,110 +1,38 @@
-import type MarkdownIt from 'markdown-it'
 import type { Plugin } from 'vuepress/core'
-import type { CanIUseOptions, MarkdownPowerPluginOptions } from '../shared/index.js'
+import type { MarkdownPowerPluginOptions } from '../shared/index.js'
 import { addViteOptimizeDepsInclude } from '@vuepress/helper'
-import { caniusePlugin, legacyCaniuse } from './features/caniuse.js'
-import { codepenPlugin } from './features/codepen.js'
-import { codeSandboxPlugin } from './features/codeSandbox.js'
-import { fileTreePlugin } from './features/fileTree/index.js'
-import { iconsPlugin } from './features/icons.js'
-import { imageSizePlugin } from './features/imageSize.js'
-import { jsfiddlePlugin } from './features/jsfiddle.js'
-import { langReplPlugin } from './features/langRepl.js'
-import { pdfPlugin } from './features/pdf.js'
-import { plotPlugin } from './features/plot.js'
-import { replitPlugin } from './features/replit.js'
-import { bilibiliPlugin } from './features/video/bilibili.js'
-import { youtubePlugin } from './features/video/youtube.js'
+import { containerPlugin } from './container/index.js'
+import { embedSyntaxPlugin } from './embed/index.js'
+import { imageSizePlugin } from './enhance/imageSize.js'
+import { inlineSyntaxPlugin } from './inline/index.js'
 import { prepareConfigFile } from './prepareConfigFile.js'
 
 export function markdownPowerPlugin(options: MarkdownPowerPluginOptions = {}): Plugin {
-  return (app) => {
-    return {
-      name: 'vuepress-plugin-md-power',
+  return {
+    name: 'vuepress-plugin-md-power',
 
-      clientConfigFile: app => prepareConfigFile(app, options),
+    clientConfigFile: app => prepareConfigFile(app, options),
 
-      define: {
-        __MD_POWER_INJECT_OPTIONS__: options,
-      },
+    define: {
+      __MD_POWER_INJECT_OPTIONS__: options,
+    },
 
-      extendsBundlerOptions(bundlerOptions) {
-        if (options.repl) {
-          addViteOptimizeDepsInclude(
-            bundlerOptions,
-            app,
-            ['shiki/core', 'shiki/wasm'],
-          )
-        }
-      },
+    extendsBundlerOptions(bundlerOptions, app) {
+      if (options.repl) {
+        addViteOptimizeDepsInclude(
+          bundlerOptions,
+          app,
+          ['shiki/core', 'shiki/wasm'],
+        )
+      }
+    },
 
-      extendsMarkdown: async (md: MarkdownIt, app) => {
-        await imageSizePlugin(app, md, options.imageSize)
+    extendsMarkdown: async (md, app) => {
+      embedSyntaxPlugin(md, options)
+      inlineSyntaxPlugin(md, options)
 
-        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)
-        }
-
-        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)
-        }
-
-        if (options.codeSandbox) {
-          // @[codesandbox](id)
-          md.use(codeSandboxPlugin)
-        }
-
-        if (options.jsfiddle) {
-          // @[jsfiddle](user/id)
-          md.use(jsfiddlePlugin)
-        }
-
-        if (
-          options.plot === true
-          || (typeof options.plot === 'object' && options.plot.tag !== false)
-        ) {
-          // !!plot!!
-          md.use(plotPlugin)
-        }
-
-        if (options.repl)
-          await langReplPlugin(app, md, options.repl)
-
-        if (options.fileTree) {
-          // ::: file-tree
-          fileTreePlugin(md)
-        }
-      },
-    }
+      await containerPlugin(app, md, options)
+      await imageSizePlugin(app, md, options.imageSize)
+    },
   }
 }