chore: tweak

pengzhanbo · Jan 9, 2025 · 9703385 · 9703385
1 parent 43689f5
commit 9703385
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 25 deletions.
diff --git a/cli/templates/.vuepress/config.ts.handlebars b/cli/templates/.vuepress/config.ts.handlebars
@@ -106,7 +106,6 @@ export default defineUserConfig({
        * @see https://theme-plume.vuejs.press/config/plugins/markdown-enhance/
        */
       // markdownEnhance: {
-      //   demo: true,
       //   chartjs: true,
       //   echarts: true,
       //   mermaid: true,
@@ -131,6 +130,7 @@ export default defineUserConfig({
       //   codeSandbox: true,  // 启用嵌入 codeSandbox 语法 @[codeSandbox](id)
       //   jsfiddle: true,     // 启用嵌入 jsfiddle 语法 @[jsfiddle](user/id)
       //   npmTo: true,        // 启用 npm-to 容器  ::: npm-to
+      //   demo: true,         // 启用 demo 容器  ::: demo
       //   repl: {             // 启用 代码演示容器
       //     go: true,         // ::: go-repl
       //     rust: true,       // ::: rust-repl

diff --git a/cli/templates/docs/en/preview/markdown.md b/cli/templates/docs/en/preview/markdown.md
@@ -254,26 +254,36 @@ const c = a + b
 
 **code demo:**
 
-::: normal-demo Demo 演示
+:::: demo title="Demo" desc="A normal demo"
+
+::: code-tabs
+@tab HTML
 
 ```html
-<h1>Hello Word!</h1>
-<p><span id="very">Very</span>Powerful!</p>
+<div id="app">
+  <h3>vuepress-theme-plume</h3>
+</div>
 ```
 
+@tab Javascript
+
 ```js
-document.querySelector('#very').addEventListener('click', () => {
-  alert('Very Powerful')
-})
+const a = 'So Awesome!'
+const app = document.querySelector('#app')
+app.appendChild(window.document.createElement('small')).textContent = a
 ```
 
+@tab CSS
+
 ```css
-span {
-  color: red;
+#app {
+  font-size: 2em;
+  text-align: center;
 }
 ```
 
 :::
+::::
 
 **tab card：**
 

diff --git a/cli/templates/docs/zh/preview/markdown.md b/cli/templates/docs/zh/preview/markdown.md
@@ -254,26 +254,36 @@ const c = a + b
 
 **代码演示：**
 
-::: normal-demo Demo 演示
+:::: demo title="常规示例" desc="一个常规示例"
+
+::: code-tabs
+@tab HTML
 
 ```html
-<h1>Hello Word!</h1>
-<p><span id="very">非常</span>强大!</p>
+<div id="app">
+  <h3>vuepress-theme-plume</h3>
+</div>
 ```
 
+@tab Javascript
+
 ```js
-document.querySelector('#very').addEventListener('click', () => {
-  alert('非常强大')
-})
+const a = 'So Awesome!'
+const app = document.querySelector('#app')
+app.appendChild(window.document.createElement('small')).textContent = a
 ```
 
+@tab CSS
+
 ```css
-span {
-  color: red;
+#app {
+  font-size: 2em;
+  text-align: center;
 }
 ```
 
 :::
+::::
 
 **选项卡：**
 

diff --git a/docs/2.preview/主题效果预览.md b/docs/2.preview/主题效果预览.md
@@ -348,26 +348,36 @@ const c = a + b
 
 **代码演示：**
 
-::: normal-demo Demo 演示
+:::: demo title="常规示例" desc="一个常规示例"
+
+::: code-tabs
+@tab HTML
 
 ```html
-<h1>Hello Word!</h1>
-<p><span id="very">非常</span>强大!</p>
+<div id="app">
+  <h3>vuepress-theme-plume</h3>
+</div>
 ```
 
+@tab Javascript
+
 ```js
-document.querySelector('#very').addEventListener('click', () => {
-  alert('非常强大')
-})
+const a = 'So Awesome!'
+const app = document.querySelector('#app')
+app.appendChild(window.document.createElement('small')).textContent = a
 ```
 
+@tab CSS
+
 ```css
-span {
-  color: red;
+#app {
+  font-size: 2em;
+  text-align: center;
 }
 ```
 
 :::
+::::
 
 **选项卡：**