From b07426dfc6142c10db34618a8fadb6feb5c0d4ce Mon Sep 17 00:00:00 2001 From: pengzhanbo Date: Fri, 25 Apr 2025 15:04:55 +0800 Subject: [PATCH] refactor(plugin-md-power): improve md plugins (#562) --- docs/notes/theme/guide/chart/mermaid.md | 1 - docs/notes/theme/guide/repl/golang.md | 10 +- docs/notes/theme/guide/repl/kotlin.md | 10 +- docs/notes/theme/guide/repl/rust.md | 14 +- .../artPlayerPlugin.spec.ts.snap | 6 +- .../__snapshots__/audioReader.spec.ts.snap | 8 +- .../__snapshots__/bilibiliPlugin.spec.ts.snap | 4 +- .../__snapshots__/caniusePlugin.spec.ts.snap | 18 +- .../codeSandboxPlugin.spec.ts.snap | 4 +- .../__snapshots__/codepenPlugin.spec.ts.snap | 4 +- .../__snapshots__/jsfiddlePlugin.spec.ts.snap | 4 +- .../__snapshots__/langReplPlugin.spec.ts.snap | 30 +-- .../__snapshots__/pdfPlugin.spec.ts.snap | 6 +- .../__snapshots__/timelinePlugin.spec.ts.snap | 6 +- .../__snapshots__/youtubePlugin.spec.ts.snap | 4 +- .../__test__/langReplPlugin.spec.ts | 10 +- .../__test__/resolveAttrs.spec.ts | 12 +- .../__test__/stringifyAttrs.spec.ts | 47 +++++ .../src/client/components/CanIUse.vue | 8 +- .../src/node/container/card.ts | 17 +- .../src/node/container/collapse.ts | 7 +- .../src/node/container/createContainer.ts | 4 +- .../src/node/container/langRepl.ts | 55 +++-- .../src/node/container/npmTo.ts | 196 ++---------------- .../src/node/container/npmToPreset.ts | 165 +++++++++++++++ .../src/node/container/timeline.ts | 31 +-- .../plugin-md-power/src/node/demo/markdown.ts | 7 +- .../plugin-md-power/src/node/demo/normal.ts | 7 +- .../plugin-md-power/src/node/demo/readme.md | 26 --- plugins/plugin-md-power/src/node/demo/vue.ts | 7 +- .../src/node/embed/audio/reader.ts | 52 +++-- .../plugin-md-power/src/node/embed/caniuse.ts | 29 +-- .../src/node/embed/code/codeSandbox.ts | 5 +- .../src/node/embed/code/codepen.ts | 14 +- .../src/node/embed/code/jsfiddle.ts | 4 +- .../src/node/embed/code/replit.ts | 5 +- plugins/plugin-md-power/src/node/embed/pdf.ts | 5 +- .../src/node/embed/video/artPlayer.ts | 28 +-- .../src/node/embed/video/bilibili.ts | 23 +- .../src/node/embed/video/youtube.ts | 20 +- .../src/node/inline/annotation.ts | 3 +- .../plugin-md-power/src/node/inline/plot.ts | 142 +++++++------ .../src/node/utils/resolveAttrs.ts | 28 +-- .../src/node/utils/stringifyAttrs.ts | 37 ++++ pnpm-lock.yaml | 16 +- pnpm-workspace.yaml | 2 +- 46 files changed, 577 insertions(+), 564 deletions(-) create mode 100644 plugins/plugin-md-power/__test__/stringifyAttrs.spec.ts create mode 100644 plugins/plugin-md-power/src/node/container/npmToPreset.ts delete mode 100644 plugins/plugin-md-power/src/node/demo/readme.md create mode 100644 plugins/plugin-md-power/src/node/utils/stringifyAttrs.ts diff --git a/docs/notes/theme/guide/chart/mermaid.md b/docs/notes/theme/guide/chart/mermaid.md index cf601856..03adc666 100644 --- a/docs/notes/theme/guide/chart/mermaid.md +++ b/docs/notes/theme/guide/chart/mermaid.md @@ -18,7 +18,6 @@ permalink: /guide/chart/mermaid/ 你需要在你的项目中安装 [mermaid](https://mermaid.js.org/) 库。 ::: npm-to -@tab pnpm ```sh npm install mermaid diff --git a/docs/notes/theme/guide/repl/golang.md b/docs/notes/theme/guide/repl/golang.md index da39d7f1..8242b045 100644 --- a/docs/notes/theme/guide/repl/golang.md +++ b/docs/notes/theme/guide/repl/golang.md @@ -40,7 +40,7 @@ export default defineUserConfig({ golang 代码演示默认是只读的，不可编辑。 ````md -::: go-repl 自定义标题 +::: go-repl title="自定义标题" ```go // your go code ``` @@ -49,10 +49,10 @@ golang 代码演示默认是只读的，不可编辑。 ### 可编辑代码演示 -如果需要在线编辑并执行，需要将代码块包裹在 `::: go-repl#editable` 容器语法中 +如果需要在线编辑并执行，需要将代码块包裹在 `::: go-repl editable` 容器语法中 ````md -::: go-repl#editable 自定义标题 +::: go-repl editable title="自定义标题" ```go // your go code ``` @@ -103,7 +103,7 @@ func main() { **输入：** ````md -:::go-repl#editable +:::go-repl editable ```go package main @@ -120,7 +120,7 @@ func main() { **输出：** -:::go-repl#editable +:::go-repl editable ```go package main diff --git a/docs/notes/theme/guide/repl/kotlin.md b/docs/notes/theme/guide/repl/kotlin.md index a10eee39..4b33a1a0 100644 --- a/docs/notes/theme/guide/repl/kotlin.md +++ b/docs/notes/theme/guide/repl/kotlin.md @@ -40,7 +40,7 @@ export default defineUserConfig({ kotlin 代码演示默认是只读的，不可编辑。 ````md -::: kotlin-repl 自定义标题 +::: kotlin-repl title="自定义标题" ```kotlin // your kotlin code ``` @@ -49,10 +49,10 @@ kotlin 代码演示默认是只读的，不可编辑。 ### 可编辑代码演示 -如果需要在线编辑并执行，需要将代码块包裹在 `::: kotlin-repl#editable` 容器语法中 +如果需要在线编辑并执行，需要将代码块包裹在 `::: kotlin-repl editable` 容器语法中 ````md -::: kotlin-repl#editable 自定义标题 +::: kotlin-repl editable title="自定义标题" ```kotlin // your kotlin code ``` @@ -114,7 +114,7 @@ fun main(args: Array) { **输入：** ````md -::: kotlin-repl#editable +::: kotlin-repl editable ```kotlin class Contact(val id: Int, var email: String) @@ -128,7 +128,7 @@ fun main(args: Array) { **输出：** -::: kotlin-repl#editable +::: kotlin-repl editable ```kotlin class Contact(val id: Int, var email: String) diff --git a/docs/notes/theme/guide/repl/rust.md b/docs/notes/theme/guide/repl/rust.md index 63e84628..cd2ac8a7 100644 --- a/docs/notes/theme/guide/repl/rust.md +++ b/docs/notes/theme/guide/repl/rust.md @@ -40,7 +40,7 @@ export default defineUserConfig({ rust 代码演示默认是只读的，不可编辑。 ````md -::: rust-repl 自定义标题 +::: rust-repl title="自定义标题" ```rust // your rust code ``` @@ -49,10 +49,10 @@ rust 代码演示默认是只读的，不可编辑。 ### 可编辑代码演示 -如果需要在线编辑并执行，需要将代码块包裹在 `::: rust-repl#editable` 容器语法中 +如果需要在线编辑并执行，需要将代码块包裹在 `::: rust-repl editable` 容器语法中 ````md -::: rust-repl#editable 自定义标题 +::: rust-repl editable title="自定义标题" ```rust // your rust code ``` @@ -66,7 +66,7 @@ rust 代码演示默认是只读的，不可编辑。 **输入：** ````md -::: rust-repl 打印内容 +::: rust-repl title="打印内容" ```rust fn main() { println!("Hello, world!"); @@ -77,7 +77,7 @@ fn main() { **输出：** -::: rust-repl 打印内容 +::: rust-repl title="打印内容" ```rust fn main() { @@ -156,7 +156,7 @@ fn main() { **输入：** ````md -::: rust-repl#editable +::: rust-repl editable ```rust fn main() { println!("Hello, world!"); @@ -167,7 +167,7 @@ fn main() { **输出：** -::: rust-repl#editable +::: rust-repl editable ```rust fn main() { diff --git a/plugins/plugin-md-power/__test__/__snapshots__/artPlayerPlugin.spec.ts.snap b/plugins/plugin-md-power/__test__/__snapshots__/artPlayerPlugin.spec.ts.snap index 3d7704a8..5de14ab3 100644 --- a/plugins/plugin-md-power/__test__/__snapshots__/artPlayerPlugin.spec.ts.snap +++ b/plugins/plugin-md-power/__test__/__snapshots__/artPlayerPlugin.spec.ts.snap @@ -1,10 +1,10 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html exports[`artPlayerPlugin > should not work 1`] = ` -"

@[artPlayer]xxx

+"

@[artPlayer]xxx

@[ artPlayer]123456

@ artPlayer

-" +" `; -exports[`artPlayerPlugin > should work 1`] = `""`; +exports[`artPlayerPlugin > should work 1`] = `""`; diff --git a/plugins/plugin-md-power/__test__/__snapshots__/audioReader.spec.ts.snap b/plugins/plugin-md-power/__test__/__snapshots__/audioReader.spec.ts.snap index 0d0ded7b..ab76cd0f 100644 --- a/plugins/plugin-md-power/__test__/__snapshots__/audioReader.spec.ts.snap +++ b/plugins/plugin-md-power/__test__/__snapshots__/audioReader.spec.ts.snap @@ -12,9 +12,9 @@ exports[`artPlayerPlugin > should not work 1`] = ` `; exports[`artPlayerPlugin > should work 1`] = ` -"

-

title

-

-

xxx xxx

+"

+

+

+

xxx xxx

" `; diff --git a/plugins/plugin-md-power/__test__/__snapshots__/bilibiliPlugin.spec.ts.snap b/plugins/plugin-md-power/__test__/__snapshots__/bilibiliPlugin.spec.ts.snap index 5fa89c24..5cc71d14 100644 --- a/plugins/plugin-md-power/__test__/__snapshots__/bilibiliPlugin.spec.ts.snap +++ b/plugins/plugin-md-power/__test__/__snapshots__/bilibiliPlugin.spec.ts.snap @@ -1,10 +1,10 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html exports[`bilibiliPlugin > should not work 1`] = ` -"

@[bilibili]xxx

+"

@[bilibili]xxx

@[ bilibili]BV12345

@[bilibili](BV12345

" `; -exports[`bilibiliPlugin > should work 1`] = `""`; +exports[`bilibiliPlugin > should work 1`] = `""`; diff --git a/plugins/plugin-md-power/__test__/__snapshots__/caniusePlugin.spec.ts.snap b/plugins/plugin-md-power/__test__/__snapshots__/caniusePlugin.spec.ts.snap index 46e510e3..70c7fc45 100644 --- a/plugins/plugin-md-power/__test__/__snapshots__/caniusePlugin.spec.ts.snap +++ b/plugins/plugin-md-power/__test__/__snapshots__/caniusePlugin.spec.ts.snap @@ -37,7 +37,7 @@ exports[`caniusePlugin > should not work 8`] = ` " `; -exports[`caniusePlugin > should work 1`] = `""`; +exports[`caniusePlugin > should work 1`] = `""`; exports[`caniusePlugin > should work 2`] = ` "

@@ -47,13 +47,13 @@ exports[`caniusePlugin > should work 2`] = `

" `; -exports[`caniusePlugin > should work 3`] = `""`; +exports[`caniusePlugin > should work 3`] = `""`; -exports[`caniusePlugin > should work 4`] = `""`; +exports[`caniusePlugin > should work 4`] = `""`; -exports[`caniusePlugin > should work 5`] = `""`; +exports[`caniusePlugin > should work 5`] = `""`; -exports[`caniusePlugin > should work 6`] = `""`; +exports[`caniusePlugin > should work 6`] = `""`; exports[`caniusePlugin > should work with options 1`] = ` "

@@ -63,13 +63,13 @@ exports[`caniusePlugin > should work with options 1`] = `

" `; -exports[`caniusePlugin > should work with options 2`] = `""`; +exports[`caniusePlugin > should work with options 2`] = `""`; -exports[`caniusePlugin > should work with options 3`] = `""`; +exports[`caniusePlugin > should work with options 3`] = `""`; -exports[`legacyCaniuse > should work 1`] = `""`; +exports[`legacyCaniuse > should work 1`] = `""`; -exports[`legacyCaniuse > should work 2`] = `""`; +exports[`legacyCaniuse > should work 2`] = `""`; exports[`legacyCaniuse > should work 3`] = `""`; diff --git a/plugins/plugin-md-power/__test__/__snapshots__/codeSandboxPlugin.spec.ts.snap b/plugins/plugin-md-power/__test__/__snapshots__/codeSandboxPlugin.spec.ts.snap index 71e9aaee..cd262b84 100644 --- a/plugins/plugin-md-power/__test__/__snapshots__/codeSandboxPlugin.spec.ts.snap +++ b/plugins/plugin-md-power/__test__/__snapshots__/codeSandboxPlugin.spec.ts.snap @@ -1,9 +1,9 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html exports[`codeSandboxPlugin > should not work 1`] = ` -"

@[codesandbox]xxx

+"

@[codesandbox]xxx

@[codesandbox embed](

" `; -exports[`codeSandboxPlugin > should work 1`] = `""`; +exports[`codeSandboxPlugin > should work 1`] = `""`; diff --git a/plugins/plugin-md-power/__test__/__snapshots__/codepenPlugin.spec.ts.snap b/plugins/plugin-md-power/__test__/__snapshots__/codepenPlugin.spec.ts.snap index 53944bba..62417825 100644 --- a/plugins/plugin-md-power/__test__/__snapshots__/codepenPlugin.spec.ts.snap +++ b/plugins/plugin-md-power/__test__/__snapshots__/codepenPlugin.spec.ts.snap @@ -1,9 +1,9 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html exports[`codepenPlugin > should not work 1`] = ` -"

@[codepen]xxx

+"

@[codepen]xxx

@[codepen preview](

" `; -exports[`codepenPlugin > should work 1`] = `""`; +exports[`codepenPlugin > should work 1`] = `""`; diff --git a/plugins/plugin-md-power/__test__/__snapshots__/jsfiddlePlugin.spec.ts.snap b/plugins/plugin-md-power/__test__/__snapshots__/jsfiddlePlugin.spec.ts.snap index e527ceb9..8702dc6f 100644 --- a/plugins/plugin-md-power/__test__/__snapshots__/jsfiddlePlugin.spec.ts.snap +++ b/plugins/plugin-md-power/__test__/__snapshots__/jsfiddlePlugin.spec.ts.snap @@ -1,9 +1,9 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html exports[`codeSandboxPlugin > should not work 1`] = ` -"

@[jsfiddle]xxx

+"

@[jsfiddle]xxx

@[jsfiddle](

" `; -exports[`codeSandboxPlugin > should work 1`] = `""`; +exports[`codeSandboxPlugin > should work 1`] = `""`; diff --git a/plugins/plugin-md-power/__test__/__snapshots__/langReplPlugin.spec.ts.snap b/plugins/plugin-md-power/__test__/__snapshots__/langReplPlugin.spec.ts.snap index 855f0f61..c6718f77 100644 --- a/plugins/plugin-md-power/__test__/__snapshots__/langReplPlugin.spec.ts.snap +++ b/plugins/plugin-md-power/__test__/__snapshots__/langReplPlugin.spec.ts.snap @@ -1,21 +1,21 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html exports[`langReplPlugin > should work with custom options 1`] = ` -"
const a = 1
+"
const a = 1
 

 
const a = 1
 

-
const a = 1
+
const a = 1
 

 
const a = 1
 

-
const a = 1
+
const a = 1
 

 
const a = 1
 

-
const a = 1
+
const a = 1
 

-
const a = 1
+
const a = 1
 

 "
 `;
@@ -45,21 +45,21 @@ exports[`langReplPlugin > should work with custom options 2`] = `
 `;
 
 exports[`langReplPlugin > should work with custom theme 1`] = `
-"
const a = 1
+"
const a = 1
 

 
const a = 1
 

-
const a = 1
+
const a = 1
 

 
const a = 1
 

-
const a = 1
+
const a = 1
 

 
const a = 1
 

-
const a = 1
+
const a = 1
 

-
const a = 1
+
const a = 1
 

 "
 `;
@@ -85,7 +85,7 @@ exports[`langReplPlugin > should work with default options 1`] = `
 
const a = 1
 

 
:::

-
::: go-repl#editable

+
::: go-repl editable

 
const a = 1
 

 
:::

@@ -93,7 +93,7 @@ exports[`langReplPlugin > should work with default options 1`] = `
 
const a = 1
 

 
:::

-
::: kotlin-repl#editable

+
::: kotlin-repl editable

 
const a = 1
 

 
:::

@@ -101,15 +101,15 @@ exports[`langReplPlugin > should work with default options 1`] = `
 
const a = 1
 

 
:::

-
::: rust-repl#editable

+
::: rust-repl editable

 
const a = 1
 

 
:::

-
::: rust-repl title

+
::: rust-repl title="title"

 
const a = 1
 

 
:::

-
::: rust-repl#editable title

+
::: rust-repl editable title="title"

 
const a = 1
 

 
:::

diff --git a/plugins/plugin-md-power/__test__/__snapshots__/pdfPlugin.spec.ts.snap b/plugins/plugin-md-power/__test__/__snapshots__/pdfPlugin.spec.ts.snap
index 46b628a5..b0d8f83a 100644
--- a/plugins/plugin-md-power/__test__/__snapshots__/pdfPlugin.spec.ts.snap
+++ b/plugins/plugin-md-power/__test__/__snapshots__/pdfPlugin.spec.ts.snap
@@ -1,12 +1,12 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`pdfPlugin > should not work 1`] = `
-"
@[pdf]xxx

+"
@[pdf]xxx

 
@ pdf

 
@[pdf]

 "
 `;
 
-exports[`pdfPlugin > should work 1`] = `""`;
+exports[`pdfPlugin > should work 1`] = `""`;
 
-exports[`pdfPlugin > should work 2`] = `""`;
+exports[`pdfPlugin > should work 2`] = `""`;
diff --git a/plugins/plugin-md-power/__test__/__snapshots__/timelinePlugin.spec.ts.snap b/plugins/plugin-md-power/__test__/__snapshots__/timelinePlugin.spec.ts.snap
index 1631ade4..1fc02a58 100644
--- a/plugins/plugin-md-power/__test__/__snapshots__/timelinePlugin.spec.ts.snap
+++ b/plugins/plugin-md-power/__test__/__snapshots__/timelinePlugin.spec.ts.snap
@@ -4,7 +4,7 @@ exports[`timeline > timelinePlugin() > should work 1`] = `
 "
这是内容

 
这是内容

-
这是内容

+
这是内容

 
    
 
  • 1
    • 
 
  • 2
    • 
@@ -16,9 +16,9 @@ exports[`timeline > timelinePlugin() > should work 1`] = `
 
 

 
这是内容

-
这是内容

+
这是内容

 
这是内容

-
这是内容

+
这是内容

 
这是内容

 
这是内容

 "
diff --git a/plugins/plugin-md-power/__test__/__snapshots__/youtubePlugin.spec.ts.snap b/plugins/plugin-md-power/__test__/__snapshots__/youtubePlugin.spec.ts.snap
index e181a063..561a4d4c 100644
--- a/plugins/plugin-md-power/__test__/__snapshots__/youtubePlugin.spec.ts.snap
+++ b/plugins/plugin-md-power/__test__/__snapshots__/youtubePlugin.spec.ts.snap
@@ -1,10 +1,10 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`youtubePlugin > should not work 1`] = `
-"
@[youtube]xxx

+"
@[youtube]xxx

 
@[ youtube]123456

 
@ youtube

 "
 `;
 
-exports[`youtubePlugin > should work 1`] = `""`;
+exports[`youtubePlugin > should work 1`] = `""`;
diff --git a/plugins/plugin-md-power/__test__/langReplPlugin.spec.ts b/plugins/plugin-md-power/__test__/langReplPlugin.spec.ts
index 12e87160..a7ea041f 100644
--- a/plugins/plugin-md-power/__test__/langReplPlugin.spec.ts
+++ b/plugins/plugin-md-power/__test__/langReplPlugin.spec.ts
@@ -59,7 +59,7 @@ const a = 1
 ${FENCE}
 :::
 
-::: go-repl#editable
+::: go-repl editable
 ${FENCE}go
 const a = 1
 ${FENCE}
@@ -71,7 +71,7 @@ const a = 1
 ${FENCE}
 :::
 
-::: kotlin-repl#editable
+::: kotlin-repl editable
 ${FENCE}kotlin
 const a = 1
 ${FENCE}
@@ -83,19 +83,19 @@ const a = 1
 ${FENCE}
 :::
 
-::: rust-repl#editable
+::: rust-repl editable
 ${FENCE}rust
 const a = 1
 ${FENCE}
 :::
 
-::: rust-repl title
+::: rust-repl title="title"
 ${FENCE}rust
 const a = 1
 ${FENCE}
 :::
 
-::: rust-repl#editable title
+::: rust-repl editable title="title"
 ${FENCE}rust
 const a = 1
 ${FENCE}
diff --git a/plugins/plugin-md-power/__test__/resolveAttrs.spec.ts b/plugins/plugin-md-power/__test__/resolveAttrs.spec.ts
index 83ff8648..4a3343e2 100644
--- a/plugins/plugin-md-power/__test__/resolveAttrs.spec.ts
+++ b/plugins/plugin-md-power/__test__/resolveAttrs.spec.ts
@@ -3,9 +3,9 @@ import { resolveAttrs } from '../src/node/utils/resolveAttrs.js'
 
 describe('resolveAttrs(info)', () => {
   it('should resolve attrs', () => {
-    expect(resolveAttrs('')).toMatchObject({ rawAttrs: '', attrs: {} })
+    expect(resolveAttrs('')).toEqual({ rawAttrs: '', attrs: {} })
 
-    expect(resolveAttrs('a="1"')).toMatchObject({
+    expect(resolveAttrs('a="1"')).toEqual({
       rawAttrs: 'a="1"',
       attrs: { a: '1' },
     })
@@ -15,21 +15,21 @@ describe('resolveAttrs(info)', () => {
       attrs: { a: '1', b: '2' },
     })
 
-    expect(resolveAttrs('a="1" b="2" c')).toMatchObject({
+    expect(resolveAttrs('a="1" b="2" c')).toEqual({
       rawAttrs: 'a="1" b="2" c',
       attrs: { a: '1', b: '2', c: true },
     })
 
-    expect(resolveAttrs('a b="true" c="false"')).toMatchObject({
+    expect(resolveAttrs('a b="true" c="false"')).toEqual({
       rawAttrs: 'a b="true" c="false"',
       attrs: { a: true, b: true, c: false },
     })
   })
 
   it('should resolve attrs with include `-`', () => {
-    expect(resolveAttrs('foo-bar="1" fizz-buzz')).toMatchObject({
+    expect(resolveAttrs('foo-bar="1" fizz-buzz')).toEqual({
       rawAttrs: 'foo-bar="1" fizz-buzz',
-      attrs: { 'fooBar': '1', 'fizzBuzz': true, 'foo-bar': '1', 'fizz-buzz': true },
+      attrs: { fooBar: '1', fizzBuzz: true },
     })
   })
 })
diff --git a/plugins/plugin-md-power/__test__/stringifyAttrs.spec.ts b/plugins/plugin-md-power/__test__/stringifyAttrs.spec.ts
new file mode 100644
index 00000000..52476b36
--- /dev/null
+++ b/plugins/plugin-md-power/__test__/stringifyAttrs.spec.ts
@@ -0,0 +1,47 @@
+import { describe, expect, it } from 'vitest'
+import { stringifyAttrs } from '../src/node/utils/stringifyAttrs.js'
+
+describe('stringifyAttrs', () => {
+  it('should handle empty attributes', () => {
+    expect(stringifyAttrs({})).toBe('')
+  })
+
+  it('should handle single attribute', () => {
+    expect(stringifyAttrs({ id: 'test' })).toBe(' id="test"')
+  })
+
+  it('should handle multiple attributes', () => {
+    expect(stringifyAttrs({ id: 'test', class: 'my-class' })).toBe(' id="test" class="my-class"')
+  })
+
+  it('should handle boolean attributes', () => {
+    expect(stringifyAttrs({ disabled: true, readonly: false, checked: 'true', selected: 'false' })).toBe(' disabled checked')
+  })
+
+  it('should handle null and undefined values', () => {
+    expect(stringifyAttrs({ id: null, class: undefined })).toBe('')
+    expect(stringifyAttrs({ id: null, class: undefined, foo: 'undefined', bar: 'null' }, true)).toBe(' :id="null" :class="undefined" :foo="undefined" :bar="null"')
+  })
+
+  it('should handle mixed attribute types', () => {
+    expect(stringifyAttrs({ id: 'test', disabled: true, title: 'hello' })).toBe(' id="test" disabled title="hello"')
+  })
+
+  it('should ignore prototype properties', () => {
+    const attrs = Object.create({ prototypeProp: 'value' })
+    attrs.id = 'test'
+    expect(stringifyAttrs(attrs)).toBe(' id="test"')
+  })
+
+  it('should handle number attributes', () => {
+    expect(stringifyAttrs({ id: 1, class: 2 })).toBe(' :id="1" :class="2"')
+  })
+
+  it('should handle like json string values', () => {
+    expect(stringifyAttrs({ id: '{ "foo": "bar", baz: 1 }', class: '["a", "b"]' })).toBe(' :id="{ \'foo\': \'bar\', baz: 1 }" :class="[\'a\', \'b\']"')
+  })
+
+  it('should handle kebabCase keys', () => {
+    expect(stringifyAttrs({ 'data-foo': 'bar', 'data-baz': 1, 'fooBaz': 'bar' })).toBe(' data-foo="bar" :data-baz="1" foo-baz="bar"')
+  })
+})
diff --git a/plugins/plugin-md-power/src/client/components/CanIUse.vue b/plugins/plugin-md-power/src/client/components/CanIUse.vue
index 870541f3..b7fb0c9f 100644
--- a/plugins/plugin-md-power/src/client/components/CanIUse.vue
+++ b/plugins/plugin-md-power/src/client/components/CanIUse.vue
@@ -14,12 +14,12 @@ interface MessageData {
 
 const props = withDefaults(defineProps<{
   feature: string
-  past?: string
-  future?: string
+  past?: number
+  future?: number
   meta?: string
 }>(), {
-  past: '2',
-  future: '1',
+  past: 2,
+  future: 1,
   meta: '',
 })
 
diff --git a/plugins/plugin-md-power/src/node/container/card.ts b/plugins/plugin-md-power/src/node/container/card.ts
index 30df3e09..c41b4af0 100644
--- a/plugins/plugin-md-power/src/node/container/card.ts
+++ b/plugins/plugin-md-power/src/node/container/card.ts
@@ -1,5 +1,6 @@
 import type { Markdown } from 'vuepress/markdown'
-import { resolveAttrs } from '.././utils/resolveAttrs.js'
+import { resolveAttrs } from '../utils/resolveAttrs.js'
+import { stringifyAttrs } from '../utils/stringifyAttrs.js'
 import { createContainerPlugin } from './createContainer.js'
 
 interface CardAttrs {
@@ -21,8 +22,7 @@ export function cardPlugin(md: Markdown) {
   createContainerPlugin(md, 'card', {
     before(info) {
       const { attrs } = resolveAttrs(info)
-      const { title, icon } = attrs
-      return ``
+      return ``
     },
     after: () => '',
   })
@@ -55,13 +55,12 @@ export function cardPlugin(md: Markdown) {
   createContainerPlugin(md, 'card-masonry', {
     before: (info) => {
       const { attrs } = resolveAttrs(info)
-      let cols!: string | number
-      if (attrs.cols) {
-        cols = attrs.cols[0] === '{' ? attrs.cols : Number.parseInt(`${attrs.cols}`)
-      }
-      const gap = Number.parseInt(`${attrs.gap}`)
+      if (attrs.cols)
+        attrs.cols = attrs.cols[0] === '{' ? attrs.cols : Number.parseInt(`${attrs.cols}`)
+      if (attrs.gap)
+        attrs.gap = Number(attrs.gap)
 
-      return `= 0 ? ` :gap="${gap}"` : ''}>`
+      return ``
     },
     after: () => '',
   })
diff --git a/plugins/plugin-md-power/src/node/container/collapse.ts b/plugins/plugin-md-power/src/node/container/collapse.ts
index 9a447cb3..233bc57b 100644
--- a/plugins/plugin-md-power/src/node/container/collapse.ts
+++ b/plugins/plugin-md-power/src/node/container/collapse.ts
@@ -8,7 +8,8 @@
  */
 import type Token from 'markdown-it/lib/token.mjs'
 import type { Markdown } from 'vuepress/markdown'
-import { resolveAttrs } from '.././utils/resolveAttrs.js'
+import { resolveAttrs } from '../utils/resolveAttrs.js'
+import { stringifyAttrs } from '../utils/stringifyAttrs.js'
 import { createContainerPlugin } from './createContainer.js'
 
 interface CollapseMeta {
@@ -28,14 +29,14 @@ export function collapsePlugin(md: Markdown): void {
       const idx = parseCollapse(tokens, index, attrs)
       const { accordion } = attrs
 
-      return ``
+      return ``
     },
     after: () => ``,
   })
   md.renderer.rules.collapse_item_open = (tokens, idx) => {
     const token = tokens[idx]
     const { expand, index } = token.meta as CollapseItemMeta
-    return ``
+    return ``
   }
   md.renderer.rules.collapse_item_close = () => ''
   md.renderer.rules.collapse_item_title_open = () => '