feat(md-enhance): add playground and vue playground (#2202)

demo/md-enhance/src/.vuepress/config.ts

@@ -36,11 +36,13 @@ export default defineUserConfig({
         "/demo/mark",
         "/demo/include",
         "/demo/mermaid",
+        "/demo/playground",
         "/demo/presentation",
         "/demo/sup-sub",
         "/demo/tabs",
         "/demo/tasklist",
         "/demo/tex",
+        "/demo/vue-playground",
       ],
     },
 
@@ -57,6 +59,9 @@ export default defineUserConfig({
   plugins: [
     mdEnhancePlugin({
       enableAll: true,
+      playground: {
+        presets: ["ts", "vue"],
+      },
       presentation: {
         plugins: ["highlight", "math", "search", "notes", "zoom"],
       },

demo/md-enhance/src/demo/README.md

@@ -17,8 +17,10 @@ title: Get Started
 - [Mark](mark.md)
 - [Include files](include.md)
 - [Mermaid](mermaid.md)
+- [Playground](playground.md)
 - [Presentation](presentation.md)
 - [Subscript and Superscript](sup-sub.md)
 - [Tabs](tabs.md)
 - [Tasklist](tasklist.md)
 - [Tex](tex.md)
+- [Vue Playground](vue-playground.md)

demo/md-enhance/src/demo/playground.md

@@ -0,0 +1,113 @@
+---
+title: Playground
+---
+
+## Demo
+
+### TS
+
+::: playground#ts TS demo 1
+
+@file index.ts
+
+```ts
+const msg = "hello world";
+
+const speak = (msg: string) => console.log(msg);
+
+speak(msg);
+```
+
+:::
+
+::: playground#ts TS demo 2
+
+@file index.ts
+
+```ts
+const msg = "hello world";
+
+const speak = (msg: string) => console.log(msg);
+
+speak(msg);
+```
+
+@settings
+
+```json
+{
+  "target": "es5"
+}
+```
+
+:::
+
+### Vue
+
+::: playground#vue Vue demo with cutomized imports
+
+@file App.vue
+
+```vue
+<script setup>
+import { ref } from "vue";
+
+import Comp from "./Comp.vue";
+
+const msg = ref("Hello World!");
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+  <input v-model="msg" />
+  <Comp />
+</template>
+```
+
+@file Comp.vue
+
+```vue
+<template>
+  <div>Comp</div>
+</template>
+```
+
+@import
+
+```json
+{
+  "imports": {
+    "vue": "https://sfc.vuejs.org/vue.runtime.esm-browser.js"
+  }
+}
+```
+
+:::
+
+::: playground#vue Vue demo with customized settings
+
+@file App.vue
+
+```vue
+<script setup>
+import { ref } from "vue";
+
+const msg = ref("Hello Playground!");
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+  <input v-model="msg" />
+</template>
+```
+
+@setting
+
+```json
+{
+  "dev": true,
+  "ssr": true
+}
+```
+
+:::

demo/md-enhance/src/demo/vue-playground.md

@@ -0,0 +1,82 @@
+---
+title: Vue Playground
+---
+
+## Demo
+
+::: vue-playground Vue Playground
+
+@file App.vue
+
+```vue
+<script setup>
+import { ref } from "vue";
+
+const msg = ref("Hello Playground!");
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+  <input v-model="msg" />
+</template>
+```
+
+:::
+
+::: vue-playground Vue Playground with cutomized settings and import
+
+@file App.vue
+
+```vue
+<script setup>
+import { ref } from "vue";
+import Comp from "./Comp.vue";
+
+const msg = ref("Hello Playground!");
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+  <input v-model="msg" />
+  <Comp />
+</template>
+```
+
+@file Comp.vue
+
+```vue
+<script setup>
+import { useBattery } from "@vueuse/core";
+import { ref } from "vue";
+
+const { charging, level } = useBattery();
+</script>
+
+<template>
+  <h1>Battery status</h1>
+  <p>Charging: {{ charging }}</p>
+  <p>Level: {{ level * 100 }}%</p>
+</template>
+```
+
+@import
+
+```json
+{
+  "imports": {
+    "@vueuse/core": "https://unpkg.com/@vueuse/core/index.mjs",
+    "@vueuse/shared": "https://unpkg.com/@vueuse/shared/index.mjs",
+    "vue-demi": "https://unpkg.com/vue-demi/lib/index.mjs"
+  }
+}
+```
+
+@setting
+
+```json
+{
+  "showCompileOutput": true
+}
+```
+
+:::

docs/md-enhance/src/.vuepress/sidebar.ts

@@ -25,6 +25,8 @@ export const enSidebarConfig = sidebar({
         "flowchart",
         "mermaid",
         "tex",
+        "playground",
+        "vue-playground",
         {
           text: "Code Demo",
           icon: "discover",
@@ -66,6 +68,8 @@ export const enSidebarConfig = sidebar({
     "flowchart",
     "mermaid",
     "tex",
+    "playground",
+    "vue-playground",
     {
       text: "Code Demo",
       icon: "discover",
@@ -110,6 +114,8 @@ export const zhSidebarConfig = sidebar({
         "flowchart",
         "mermaid",
         "tex",
+        "playground",
+        "vue-playground",
         {
           text: "代码演示",
           icon: "discover",
@@ -151,6 +157,8 @@ export const zhSidebarConfig = sidebar({
     "flowchart",
     "mermaid",
     "tex",
+    "playground",
+    "vue-playground",
     {
       text: "代码演示",
       icon: "discover",

docs/md-enhance/src/.vuepress/theme.ts

@@ -18,6 +18,9 @@ export default theme("md-enhance", {
   plugins: {
     mdEnhance: {
       enableAll: true,
+      playground: {
+        presets: ["ts", "vue"],
+      },
       presentation: {
         plugins: ["highlight", "math", "search", "notes", "zoom"],
       },

docs/md-enhance/src/README.md

@@ -89,6 +89,16 @@ features:
     details: split your docs with different parts and import them in Markdown
     link: /guide/include.html
 
+  - title: Playground Support
+    icon: code
+    details: You can add playground in markdown files
+    link: /guide/playground.html
+
+  - title: Vue playground Support
+    icon: code
+    details: Show living vue component in playground
+    link: /guide/vue-playground.html
+
   - title: Code Demo Support
     icon: discover
     details: You can insert code demo easily