demo vue scoped styles (#542)"},{"hash":"0fd6cac57412002f4d72dc10378789b529adc357","time":1742063370000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"refactor(theme): improve types and flat config (#524)"},{"hash":"c703b89e1c9644275fd2d3628afdb772b50c3b1a","time":1737995181000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"feat(plugin-md-power): improve normal demo sandbox (#448)"},{"hash":"a9f6bd0a0c04b617abfd23ebcd248a52cf4382d9","time":1736479043000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"feat(plugin-md-power): add demo syntax (#415)"}]},"autoDesc":true,"filePathRelative":"guide/repl/frontend.md","headers":[],"bulletin":false}`),M=Object.assign({name:`frontend.md`},{setup(n){return(n,u)=>{let d=t(`VPLink`),f=t(`VPIcon`),p=t(`VPDemoBasic`),m=t(`CodeTabs`),y=t(`VPDemoNormal`);return r(),o(`div`,null,[u[48]||=c('旧的前端代码演示 已弃用，请迁移至此新的方案。
旧的方案由 vuepress-plugin-md-enhance 提供，感谢在过去 提供的代码演示的支持，在 vuepress-plugin-md-enhance 中代码演示功能也将迁移至 vuepress/ecosystem， 详情请查看 vuepress/ecosystem#293 。
前端代码演示是一个很有用的功能，但是在旧的方案中，所实现的功能与实际使用场景预期不符。
旧的方案中，比如 vue-demo 仅能支持一些简单的 vue 组件演示，且不能直接导入项目中的依赖，仅能通过 加载外部脚本支持更多功能，且并没提供对 vue sfc 的完全支持，仅能进行简单的代码演示。
而且对脚本代码的编译是在浏览器运行时，先从 CDN 请求加载 babel，完成后再通过 babel 进行转换， 这需要额外的等待时间完成，同时对于企业内部的项目，在内网环境中无法请求外部资源，导致演示无法正常展示。
在新的方案中，所有的演示代码均是在 nodejs 运行时进行编译转换，因此在浏览器运行时可直接展示演示代码，无需额外的等待时间。 且得益于 nodejs 强大的能力，可以完全支持 vue sfc 的完整功能，且可以直接导入项目中的依赖，让你的演示更加丰富。 更符合实际的使用场景。
此功能支持在 页面中 嵌入 代码演示 功能。前端代码演示由两个主要区域组成： 渲染区 和 代码区 。
其中，渲染区 用于展示代码的执行结果，包括 UI 渲染和 交互；代码区 用于展示源代码，默认是折叠的。
主题提供了 三种不同的 前端代码演示支持：
vue 组件的演示，像编写一个 vue 组件一样编写你的演示代码，可以用于演示如 组件库、composables-api 等外部依赖。markdown 的演示。HTML + JS/TS + CSS/Less/Sass/Stylus 的代码演示，像编写一个网页一样编写你的演示代码。主题还提供了 两种不同的使用方式编写演示代码:
嵌入演示代码文件：
@[demo type](url)可以通过简单的嵌入语法，从文件中导入演示代码。
demo 容器内联演示代码:
::: demo type\n``` [lang]\ncode\n```\n:::直接在 markdown 文件中编写演示代码，使用 demo 容器包裹即可。
export default defineUserConfig({
theme: plumeTheme({
markdown: {
demo: true,
},
})
})代码演示支持以下 语言：
对于 css 预处理语言，你需要在项目中安装对应的预处理器，如 less 、 sass 、 stylus 等。
不同的代码演示均使用相同的嵌入语法，你可以快速掌握它们的使用方法。
<!-- 语法 -->
@[demo](url)
@[demo [type]](url)
@[demo [type] title="" desc="" expanded code-setting=""](url)@[demo](url) 是一个固定的语法格式。
[type] 表示类型，支持 三个不同的值：
normal: 普通代码演示类型。当不传入 [type] 参数时，默认为 normal 类型。vue: vue 组件演示类型。markdown: markdown 演示类型。url 表示演示代码文件的路径，可以是相对路径或绝对路径，
<!-- 普通代码演示 -->
@[demo](./demo/normal.html)
@[demo normal](./demo/normal.html)
@[demo](/.vuepress/demo/normal.html)
<!-- vue 组件演示 -->
@[demo vue](./demo/Counter.vue)
@[demo vue](./demo/Counter.ts)
@[demo](/.vuepress/demo/Counter.vue)
<!-- markdown 演示 -->
@[demo markdown](./demo/example.md)
@[demo markdown](/.vuepress/demo/example.md)其它额外参数：
title="xxx" ：演示标题
desc="xxx"：演示描述
expanded：展开代码区域
code-setting="xxx"：代码设置，值将被拼接在 \`\`\` [lang] 之后，用于给代码块添加配置。
code-setting=":lines-number",则会在代码块后面添加 :lines-number，使代码块支持显示行号。
code-setting=":collapsed-lines=10",则会在代码块后面添加 :collapsed-lines=10，使代码块从第 10 行开始折叠。
@[demo vue expanded title="标题" desc="描述" code-setting=":collapsed-lines=10"](./demo/Counter.vue)demo 容器内联演示 使用 demo 容器包裹演示代码，可以在 markdown 文件中快速地编写演示代码，如下：
::: demo [type] title="" desc="" expanded
<!-- 代码块 -->
:::所有参数与 @[demo](url) 语法相同。
<!-- 普通代码演示 -->
::: demo
\`\`\`html
<!-- html 代码 -->
\`\`\`
\`\`\` js
// js 代码
\`\`\`
\`\`\` css
/* css 代码 */
\`\`\`
:::
<!-- vue 组件演示 -->
::: demo vue
\`\`\` vue
<!-- vue 代码 -->
\`\`\`
:::
<!-- markdown 演示 -->
::: demo markdown
\`\`\` md
<!-- markdown 代码 -->
\`\`\`
:::还可以在 ::: demo 容器中 使用 ::: code-tabs 容器包裹代码块，以获得更好的交互效果。
:::: demo
::: code-tabs
@tab HTML
\`\`\`html
<!-- html 代码 -->
\`\`\`
@tab javascript
\`\`\` js
// js 代码
\`\`\`
@tab css
\`\`\` css
/* css 代码 */
\`\`\`
::::当期望使用 Typescript 或 Less/Sass/Stylus 时，通过修改 \`\`\` [lang] 的值即可：
:::: demo
::: code-tabs
@tab HTML
\`\`\`html
<!-- html 代码 -->
\`\`\`
@tab Typescript
\`\`\` ts
// ts 代码
\`\`\`
@tab Scss
\`\`\` scss
/* scss 代码 */
\`\`\`
::::vue 组件演示 是一个很强大的功能，对于演示代码不做任何限制，这甚至完全取决于 bundler 对于 vue 的支持。 你还可以直接在演示代码中导入项目中安装的依赖，就像你在写一个 vue 项目的组件一样。
因此，你可以直接使用它来为 你的组件库 提供演示示例，或者为你的 composables-api 提供演示示例。
你可以直接使用以下方式在页面中嵌入一个 vue 组件演示:
输入：
@[demo vue title="计数器" desc="点击 +1 按钮，计数器自增 1"](./demo/Counter.vue)./demo/Counter.vue 代码<script setup lang="ts">
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
<div class="counter">
<p>
计数器：{{ count }}
</p>
<button type="button" class="btn" @click="count += 1">
+ 1
</button>
</div>
</template>
<style scoped>
.btn {
border: 1px solid var(--vp-c-divider);
border-radius: 4px;
}
</style>输出：
`,22),i(p,{type:`vue`,title:`计数器`,desc:`点击 +1 按钮，计数器自增 1`},{code:e(()=>[...u[11]||=[l(`div`,{class:`language-vue line-numbers-mode`,"data-highlighter":`shiki`,"data-ext":`vue`,style:{"--shiki-light":`#393a34`,"--shiki-dark":`#dbd7caee`,"--shiki-light-bg":`#ffffff`,"--shiki-dark-bg":`#121212`}},[l(`pre`,{class:`shiki shiki-themes vitesse-light vitesse-dark vp-code`},[l(`code`,{class:`language-vue`},[l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`<`),l(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`script`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` setup`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` lang`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`=`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`"`),l(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`ts`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`"`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`>`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`import`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` {`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` ref`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` }`),l(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},` from`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},` '`),l(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`vue`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`'`)]),s(` `),l(`span`,{class:`line`}),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#AB5959`,"--shiki-dark":`#CB7676`}},`const `),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},`count`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` =`),l(`span`,{style:{"--shiki-light":`#59873A`,"--shiki-dark":`#80A665`}},` ref`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`(`),l(`span`,{style:{"--shiki-light":`#2F798A`,"--shiki-dark":`#4C9A91`}},`0`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`)`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},``)]),s(` `),l(`span`,{class:`line`}),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`<`),l(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`template`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`>`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` <`),l(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`div`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` class`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`=`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`"`),l(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`counter`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`"`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`>`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` <`),l(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`p`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`>`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#393A34`,"--shiki-dark":`#DBD7CAEE`}},` 计数器：{{ count }}`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` `)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` <`),l(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`button`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` type`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`=`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`"`),l(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`button`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`"`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` class`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`=`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`"`),l(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`btn`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`"`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` @click`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`=`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`"`),l(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`count += 1`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`"`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`>`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#393A34`,"--shiki-dark":`#DBD7CAEE`}},` + 1`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` `)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` `)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},``)]),s(` `),l(`span`,{class:`line`}),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`<`),l(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`style`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` scoped`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`>`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`.`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},`btn`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` {`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#998418`,"--shiki-dark":`#B8A965`}},` border`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`:`),l(`span`,{style:{"--shiki-light":`#2F798A`,"--shiki-dark":`#4C9A91`}},` 1`),l(`span`,{style:{"--shiki-light":`#AB5959`,"--shiki-dark":`#CB7676`}},`px`),l(`span`,{style:{"--shiki-light":`#A65E2B`,"--shiki-dark":`#C99076`}},` solid`),l(`span`,{style:{"--shiki-light":`#998418`,"--shiki-dark":`#B8A965`}},` var`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`(`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},`--vp-c-divider`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`);`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#998418`,"--shiki-dark":`#B8A965`}},` border-radius`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`:`),l(`span`,{style:{"--shiki-light":`#2F798A`,"--shiki-dark":`#4C9A91`}},` 4`),l(`span`,{style:{"--shiki-light":`#AB5959`,"--shiki-dark":`#CB7676`}},`px`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`;`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`}`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},``)])])]),l(`div`,{class:`line-numbers`,"aria-hidden":`true`,style:{"counter-reset":`line-number 0`}},[l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`})])],-1)]]),default:e(()=>[i(E)]),_:1}),u[52]||=c(`也可以嵌入一个 .ts 编写的 vue 组件：
输入：
@[demo vue title="计数器" desc="点击 +1 按钮，计数器自增 1"](./demo/Counter.ts)对于 .js/.ts 编写的组件，请使用 css module 来编写样式以实现样式隔离
可以在演示代码中导入外部依赖， 以导入 @vueuse/core 中的 useToggle() 为例:
输入：
@[demo vue title="useToggle" desc="useToggle() 演示"](./demo/Toggle.vue)<script setup lang="ts">
import { useToggle } from '@vueuse/core'
const [value, toggle] = useToggle()
</script>
<template>
<div>
<p>Value: {{ value ? 'ON' : 'OFF' }}</p>
<div style="display: flex;gap: 16px;">
<button class="btn" @click="toggle()">
Toggle
</button>
<button class="btn" @click="value = true">
Set On
</button>
<button class="btn" @click="value = false">
Set Off
</button>
</div>
</div>
</template>
<style scoped>
.btn {
border: 1px solid var(--vp-c-divider);
border-radius: 4px;
}
</style>输出：
`,7),i(p,{type:`vue`,title:`useToggle`,desc:`useToggle() 演示`},{code:e(()=>[...u[18]||=[l(`div`,{class:`language-vue line-numbers-mode`,"data-highlighter":`shiki`,"data-ext":`vue`,style:{"--shiki-light":`#393a34`,"--shiki-dark":`#dbd7caee`,"--shiki-light-bg":`#ffffff`,"--shiki-dark-bg":`#121212`}},[l(`pre`,{class:`shiki shiki-themes vitesse-light vitesse-dark vp-code`},[l(`code`,{class:`language-vue`},[l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`<`),l(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`script`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` setup`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` lang`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`=`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`"`),l(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`ts`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`"`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`>`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`import`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` {`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` useToggle`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` }`),l(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},` from`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},` '`),l(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`@vueuse/core`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`'`)]),s(` `),l(`span`,{class:`line`}),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#AB5959`,"--shiki-dark":`#CB7676`}},`const `),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`[`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},`value`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`,`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` toggle`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`]`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` =`),l(`span`,{style:{"--shiki-light":`#59873A`,"--shiki-dark":`#80A665`}},` useToggle`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`()`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},``)]),s(` `),l(`span`,{class:`line`}),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`<`),l(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`template`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`>`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` <`),l(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`div`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`>`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` <`),l(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`p`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`>`),l(`span`,{style:{"--shiki-light":`#393A34`,"--shiki-dark":`#DBD7CAEE`}},`Value: {{ value ? 'ON' : 'OFF' }}`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},``)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` <`),l(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`div`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` style`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`=`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`"`),l(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`display: flex;gap: 16px;`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`"`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`>`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` <`),l(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`button`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` class`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`=`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`"`),l(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`btn`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`"`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` @click`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`=`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`"`),l(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`toggle()`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`"`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`>`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#393A34`,"--shiki-dark":`#DBD7CAEE`}},` Toggle`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` `)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` <`),l(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`button`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` class`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`=`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`"`),l(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`btn`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`"`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` @click`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`=`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`"`),l(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`value = true`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`"`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`>`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#393A34`,"--shiki-dark":`#DBD7CAEE`}},` Set On`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` `)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` <`),l(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`button`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` class`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`=`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`"`),l(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`btn`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`"`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` @click`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`=`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`"`),l(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`value = false`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`"`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`>`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#393A34`,"--shiki-dark":`#DBD7CAEE`}},` Set Off`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` `)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` `)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` `)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},``)]),s(` `),l(`span`,{class:`line`}),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`<`),l(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`style`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` scoped`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`>`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`.`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},`btn`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` {`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#998418`,"--shiki-dark":`#B8A965`}},` border`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`:`),l(`span`,{style:{"--shiki-light":`#2F798A`,"--shiki-dark":`#4C9A91`}},` 1`),l(`span`,{style:{"--shiki-light":`#AB5959`,"--shiki-dark":`#CB7676`}},`px`),l(`span`,{style:{"--shiki-light":`#A65E2B`,"--shiki-dark":`#C99076`}},` solid`),l(`span`,{style:{"--shiki-light":`#998418`,"--shiki-dark":`#B8A965`}},` var`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`(`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},`--vp-c-divider`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`);`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#998418`,"--shiki-dark":`#B8A965`}},` border-radius`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`:`),l(`span`,{style:{"--shiki-light":`#2F798A`,"--shiki-dark":`#4C9A91`}},` 4`),l(`span`,{style:{"--shiki-light":`#AB5959`,"--shiki-dark":`#CB7676`}},`px`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`;`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`}`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},``)])])]),l(`div`,{class:`line-numbers`,"aria-hidden":`true`,style:{"counter-reset":`line-number 0`}},[l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`})])],-1)]]),default:e(()=>[i(S)]),_:1}),u[55]||=c(`在 markdown 文件中使用 demo 容器包裹演示代码，可以快速地编写演示代码，如下：
输入：
::: demo vue title="计数器" desc="点击 +1 按钮，计数器自增 1"
\`\`\`vue
<script setup lang="ts">
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
<div class="counter">
<p>计数器：{{ count }}</p>
<button type="button" class="btn" @click="count += 1">
+ 1
</button>
</div>
</template>
<style scoped>
.btn {
border: 1px solid var(--vp-c-divider);
border-radius: 4px;
}
</style>
\`\`\`
:::输出：
`,5),i(p,{type:`vue`,title:`计数器`,desc:`点击 +1 按钮，计数器自增 1`},{code:e(()=>[...u[19]||=[l(`div`,{class:`language-vue line-numbers-mode`,"data-highlighter":`shiki`,"data-ext":`vue`,style:{"--shiki-light":`#393a34`,"--shiki-dark":`#dbd7caee`,"--shiki-light-bg":`#ffffff`,"--shiki-dark-bg":`#121212`}},[l(`pre`,{class:`shiki shiki-themes vitesse-light vitesse-dark vp-code`},[l(`code`,{class:`language-vue`},[l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`<`),l(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`script`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` setup`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` lang`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`=`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`"`),l(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`ts`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`"`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`>`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`import`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` {`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` ref`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` }`),l(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},` from`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},` '`),l(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`vue`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`'`)]),s(` `),l(`span`,{class:`line`}),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#AB5959`,"--shiki-dark":`#CB7676`}},`const `),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},`count`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` =`),l(`span`,{style:{"--shiki-light":`#59873A`,"--shiki-dark":`#80A665`}},` ref`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`(`),l(`span`,{style:{"--shiki-light":`#2F798A`,"--shiki-dark":`#4C9A91`}},`0`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`)`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},``)]),s(` `),l(`span`,{class:`line`}),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`<`),l(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`template`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`>`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` <`),l(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`div`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` class`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`=`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`"`),l(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`counter`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`"`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`>`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` <`),l(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`p`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`>`),l(`span`,{style:{"--shiki-light":`#393A34`,"--shiki-dark":`#DBD7CAEE`}},`计数器：{{ count }}`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},``)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` <`),l(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`button`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` type`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`=`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`"`),l(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`button`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`"`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` class`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`=`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`"`),l(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`btn`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`"`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` @click`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`=`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`"`),l(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`count += 1`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`"`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`>`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#393A34`,"--shiki-dark":`#DBD7CAEE`}},` + 1`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` `)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` `)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},``)]),s(` `),l(`span`,{class:`line`}),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`<`),l(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`style`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` scoped`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`>`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`.`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},`btn`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` {`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#998418`,"--shiki-dark":`#B8A965`}},` border`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`:`),l(`span`,{style:{"--shiki-light":`#2F798A`,"--shiki-dark":`#4C9A91`}},` 1`),l(`span`,{style:{"--shiki-light":`#AB5959`,"--shiki-dark":`#CB7676`}},`px`),l(`span`,{style:{"--shiki-light":`#A65E2B`,"--shiki-dark":`#C99076`}},` solid`),l(`span`,{style:{"--shiki-light":`#998418`,"--shiki-dark":`#B8A965`}},` var`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`(`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},`--vp-c-divider`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`);`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#998418`,"--shiki-dark":`#B8A965`}},` border-radius`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`:`),l(`span`,{style:{"--shiki-light":`#2F798A`,"--shiki-dark":`#4C9A91`}},` 4`),l(`span`,{style:{"--shiki-light":`#AB5959`,"--shiki-dark":`#CB7676`}},`px`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`;`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`}`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},``)])])]),l(`div`,{class:`line-numbers`,"aria-hidden":`true`,style:{"counter-reset":`line-number 0`}},[l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`}),l(`div`,{class:`line-number`})])],-1)]]),default:e(()=>[i(b)]),_:1}),u[56]||=c(`注意
vue demo 容器语法虽然也支持使用 .js/ts + css 的方式来嵌入演示代码， 但主题不推荐这样做。因为样式无法被隔离，这可能导致样式污染。
:::: demo vue title="标题" desc="描述"
::: code-tabs
@tab Counter.ts
\`\`\`ts
import { defineComponent, ref } from 'vue'
export default defineComponent({
// code
})
\`\`\`
@tab Counter.css
\`\`\`css
/* css code */
\`\`\`
:::
::::普通代码演示支持 html 、 css/less/sass/stylus 、 js/ts 语言。
适合于相对简单的代码演示，比如 一个样式渲染效果，一个交互效果，一个功能 等。
普通代码演示还支持跳转到 codePen 和 jsFiddle 中查看。
同时，也支持通过 外部链接 的方式引入 第三方的库，比如 jQuery ， dayjs 等。
不建议过于复杂的演示。
使用嵌入语法时，对于导入的 代码演示文件，使用 .html 作为文件后缀。在 .html 文件中， 你可以像编写一个 HTML 页面一样编写 演示代码：
<!-- html 代码 -->
<div id="app">
演示内容
<div>
<!-- 脚本内容，使用 lang 属性设置语言, 默认为 js -->
<script lang="ts">
</script>
<!-- 样式内容，使用 lang 属性设置语言, 默认为 css -->
<style lang="css">
</style>
<!-- 可选的配置文件 json 格式 -->
<script type="config">
{
"jsLib": [],
"cssLib": []
}
</script>每一个区域的内容都是可选的。但请注意，不支持存在多个相同的区域。区域的顺序无要求。 除了 <script> 和 <style> 之外的内容，都被认为是 HTML 代码。
你可以在 <script type="config"></script> 内使用 json 格式声明要加载的其他依赖资源。
比如，加载 jQuery， 以及 normalize.css:
<div>xxxx</div>
<script type="config">
{
"jsLib": [
"https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"
],
"cssLib": [
"https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css"
]
}
</script>一个常规的示例：
输入：
@[demo title="示例" desc="这是一个常规演示"](./demo/normal.html)./demo/normal.html代码<div id="app">
<h3>vuepress-theme-plume</h3>
</div>
<script lang="ts">
const a = 'So Awesome!'
const app = document.querySelector('#app')
app.appendChild(document.createElement('small')).textContent = a
</script>
<style lang="css">
#app {
font-size: 2em;
text-align: center;
}
</style>输出：
`,20),i(y,{config:a(v),title:`示例`,desc:`这是一个常规演示`},{default:e(()=>[i(m,{id:`0`,data:[{id:`HTML`},{id:`Typescript`},{id:`CSS`}]},{title0:e(({value:e,isActive:t})=>[i(f,{provider:`iconify`,name:`vscode-icons:file-type-html`}),u[20]||=l(`span`,null,`HTML`,-1)]),title1:e(({value:e,isActive:t})=>[i(f,{provider:`iconify`,name:`vscode-icons:file-type-typescript-official`}),u[21]||=l(`span`,null,`Typescript`,-1)]),title2:e(({value:e,isActive:t})=>[i(f,{provider:`iconify`,name:`vscode-icons:file-type-css`}),u[22]||=l(`span`,null,`CSS`,-1)]),tab0:e(({value:e,isActive:t})=>[...u[23]||=[l(`div`,{class:`language-html`,"data-highlighter":`shiki`,"data-ext":`html`,style:{"--shiki-light":`#393a34`,"--shiki-dark":`#dbd7caee`,"--shiki-light-bg":`#ffffff`,"--shiki-dark-bg":`#121212`}},[l(`pre`,{class:`shiki shiki-themes vitesse-light vitesse-dark vp-code`},[l(`code`,{class:`language-html`},[l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`<`),l(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`div`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` id`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`=`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`"`),l(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`app`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`"`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`>`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` <`),l(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`h3`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`>`),l(`span`,{style:{"--shiki-light":`#393A34`,"--shiki-dark":`#DBD7CAEE`}},`vuepress-theme-plume`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},``)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},``)])])])],-1)]]),tab1:e(({value:e,isActive:t})=>[...u[24]||=[l(`div`,{class:`language-ts`,"data-highlighter":`shiki`,"data-ext":`ts`,style:{"--shiki-light":`#393a34`,"--shiki-dark":`#dbd7caee`,"--shiki-light-bg":`#ffffff`,"--shiki-dark-bg":`#121212`}},[l(`pre`,{class:`shiki shiki-themes vitesse-light vitesse-dark vp-code`},[l(`code`,{class:`language-ts`},[l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#AB5959`,"--shiki-dark":`#CB7676`}},`const `),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},`a`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` =`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},` '`),l(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`So Awesome!`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`'`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#AB5959`,"--shiki-dark":`#CB7676`}},`const `),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},`app`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` =`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` document`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`.`),l(`span`,{style:{"--shiki-light":`#59873A`,"--shiki-dark":`#80A665`}},`querySelector`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`(`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`'`),l(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`#app`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`'`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`)`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},`app`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`.`),l(`span`,{style:{"--shiki-light":`#59873A`,"--shiki-dark":`#80A665`}},`appendChild`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`(`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},`document`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`.`),l(`span`,{style:{"--shiki-light":`#59873A`,"--shiki-dark":`#80A665`}},`createElement`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`(`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`'`),l(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`small`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`'`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`)).`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},`textContent`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` =`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` a`)])])])],-1)]]),tab2:e(({value:e,isActive:t})=>[...u[25]||=[l(`div`,{class:`language-css`,"data-highlighter":`shiki`,"data-ext":`css`,style:{"--shiki-light":`#393a34`,"--shiki-dark":`#dbd7caee`,"--shiki-light-bg":`#ffffff`,"--shiki-dark-bg":`#121212`}},[l(`pre`,{class:`shiki shiki-themes vitesse-light vitesse-dark vp-code`},[l(`code`,{class:`language-css`},[l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`#`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},`app`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` {`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#998418`,"--shiki-dark":`#B8A965`}},` font-size`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`:`),l(`span`,{style:{"--shiki-light":`#2F798A`,"--shiki-dark":`#4C9A91`}},` 2`),l(`span`,{style:{"--shiki-light":`#AB5959`,"--shiki-dark":`#CB7676`}},`em`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`;`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#998418`,"--shiki-dark":`#B8A965`}},` text-align`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`:`),l(`span`,{style:{"--shiki-light":`#A65E2B`,"--shiki-dark":`#C99076`}},` center`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`;`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`}`)])])])],-1)]]),_:1})]),_:1},8,[`config`]),u[57]||=c(`引入 jQuery , dayjs 和 normalize.css 的示例:
输入：
@[demo title="示例" desc="这是一个常规演示"](./demo/normal-lib.html)./demo/normal-lib.html代码<div id="app">
<h3>vuepress-theme-plume</h3>
<p id="message"></p>
<datetime id="datetime"></datetime>
</div>
<script>
$('#message').text('So Awesome!')
const datetime = $('#datetime')
setInterval(() => {
datetime.text(dayjs().format('YYYY-MM-DD HH:mm:ss'))
}, 1000)
</script>
<style lang="css">
#app {
font-size: 2em;
text-align: center;
}
</style>
<script type="config">
{
"jsLib": [
"https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js",
"https://cdn.jsdelivr.net/npm/dayjs@1.11.13/dayjs.min.js"
],
"cssLib": ["https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css"]
}
</script>输出：
`,6),i(y,{config:a(_),title:`示例`,desc:`这是一个常规演示`},{default:e(()=>[i(m,{id:`0`,data:[{id:`HTML`},{id:`Javascript`},{id:`CSS`}]},{title0:e(({value:e,isActive:t})=>[i(f,{provider:`iconify`,name:`vscode-icons:file-type-html`}),u[26]||=l(`span`,null,`HTML`,-1)]),title1:e(({value:e,isActive:t})=>[i(f,{provider:`iconify`,name:`vscode-icons:file-type-js-official`}),u[27]||=l(`span`,null,`Javascript`,-1)]),title2:e(({value:e,isActive:t})=>[i(f,{provider:`iconify`,name:`vscode-icons:file-type-css`}),u[28]||=l(`span`,null,`CSS`,-1)]),tab0:e(({value:e,isActive:t})=>[...u[29]||=[l(`div`,{class:`language-html`,"data-highlighter":`shiki`,"data-ext":`html`,style:{"--shiki-light":`#393a34`,"--shiki-dark":`#dbd7caee`,"--shiki-light-bg":`#ffffff`,"--shiki-dark-bg":`#121212`}},[l(`pre`,{class:`shiki shiki-themes vitesse-light vitesse-dark vp-code`},[l(`code`,{class:`language-html`},[l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`<`),l(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`div`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` id`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`=`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`"`),l(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`app`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`"`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`>`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` <`),l(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`h3`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`>`),l(`span`,{style:{"--shiki-light":`#393A34`,"--shiki-dark":`#DBD7CAEE`}},`vuepress-theme-plume`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},``)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` <`),l(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`p`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` id`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`=`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`"`),l(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`message`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`"`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`>`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` <`),l(`span`,{style:{"--shiki-light":`#B31D28`,"--shiki-dark":`#FDAEB7`}},`datetime`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` id`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`=`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`"`),l(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`datetime`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`"`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`>`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},``)])])])],-1)]]),tab1:e(({value:e,isActive:t})=>[...u[30]||=[l(`div`,{class:`language-js`,"data-highlighter":`shiki`,"data-ext":`js`,style:{"--shiki-light":`#393a34`,"--shiki-dark":`#dbd7caee`,"--shiki-light-bg":`#ffffff`,"--shiki-dark-bg":`#121212`}},[l(`pre`,{class:`shiki shiki-themes vitesse-light vitesse-dark vp-code`},[l(`code`,{class:`language-js`},[l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#59873A`,"--shiki-dark":`#80A665`}},`$`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`(`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`'`),l(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`#message`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`'`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`).`),l(`span`,{style:{"--shiki-light":`#59873A`,"--shiki-dark":`#80A665`}},`text`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`(`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`'`),l(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`So Awesome!`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`'`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`)`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#AB5959`,"--shiki-dark":`#CB7676`}},`const`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` datetime`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` =`),l(`span`,{style:{"--shiki-light":`#59873A`,"--shiki-dark":`#80A665`}},` $`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`(`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`'`),l(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`#datetime`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`'`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`)`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#59873A`,"--shiki-dark":`#80A665`}},`setInterval`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`(()`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` =>`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` {`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` datetime`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`.`),l(`span`,{style:{"--shiki-light":`#59873A`,"--shiki-dark":`#80A665`}},`text`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`(`),l(`span`,{style:{"--shiki-light":`#59873A`,"--shiki-dark":`#80A665`}},`dayjs`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`().`),l(`span`,{style:{"--shiki-light":`#59873A`,"--shiki-dark":`#80A665`}},`format`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`(`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`'`),l(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`YYYY-MM-DD HH:mm:ss`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`'`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`))`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`},`),l(`span`,{style:{"--shiki-light":`#2F798A`,"--shiki-dark":`#4C9A91`}},` 1000`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`)`)])])])],-1)]]),tab2:e(({value:e,isActive:t})=>[...u[31]||=[l(`div`,{class:`language-css`,"data-highlighter":`shiki`,"data-ext":`css`,style:{"--shiki-light":`#393a34`,"--shiki-dark":`#dbd7caee`,"--shiki-light-bg":`#ffffff`,"--shiki-dark-bg":`#121212`}},[l(`pre`,{class:`shiki shiki-themes vitesse-light vitesse-dark vp-code`},[l(`code`,{class:`language-css`},[l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`#`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},`app`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` {`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#998418`,"--shiki-dark":`#B8A965`}},` font-size`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`:`),l(`span`,{style:{"--shiki-light":`#2F798A`,"--shiki-dark":`#4C9A91`}},` 2`),l(`span`,{style:{"--shiki-light":`#AB5959`,"--shiki-dark":`#CB7676`}},`em`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`;`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#998418`,"--shiki-dark":`#B8A965`}},` text-align`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`:`),l(`span`,{style:{"--shiki-light":`#A65E2B`,"--shiki-dark":`#C99076`}},` center`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`;`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`}`)])])])],-1)]]),_:1})]),_:1},8,[`config`]),u[58]||=c('在 markdown 文件中使用 demo 容器包裹演示代码，可以快速地编写演示代码，如下：
::: demo title="示例" desc="描述" expanded\n```json\n{\n "jsLib": [],\n "cssLib": []\n}\n```\n\n```html\n<!-- html 代码 -->\n```\n\n```js\n// js 代码\n```\n\n```css\n/* css 代码 */\n```\n:::还可以在 ::: demo 中包裹 ::: code-tabs 以获得更好的代码块展示效果：
:::: demo title="示例" desc="描述" expanded\n```json\n{\n "jsLib": [],\n "cssLib": []\n}\n```\n::: code-tabs\n@tab HTML\n```html\n<!-- html 代码 -->\n```\n@tab Javascript\n```js\n// js 代码\n```\n@tab CSS\n```css\n/* css 代码 */\n```\n:::\n::::一个常规的 容器示例：
输入：
:::: demo title="常规示例" desc="一个常规示例"\n::: code-tabs\n@tab HTML\n```html\n<div id="app">\n <h3>vuepress-theme-plume</h3>\n</div>\n```\n@tab Javascript\n```js\nconst a = 'So Awesome!'\nconst app = document.querySelector('#app')\napp.appendChild(document.createElement('small')).textContent = a\n```\n@tab CSS\n```css\n#app {\n font-size: 2em;\n text-align: center;\n}\n```\n:::\n::::输出：
',10),i(y,{config:a(g),title:`常规示例`,desc:`一个常规示例`},{default:e(()=>[i(m,{id:`411`,data:[{id:`HTML`},{id:`Javascript`},{id:`CSS`}]},{title0:e(({value:e,isActive:t})=>[i(f,{provider:`iconify`,name:`vscode-icons:file-type-html`}),u[32]||=l(`span`,null,`HTML`,-1)]),title1:e(({value:e,isActive:t})=>[i(f,{provider:`iconify`,name:`vscode-icons:file-type-js-official`}),u[33]||=l(`span`,null,`Javascript`,-1)]),title2:e(({value:e,isActive:t})=>[i(f,{provider:`iconify`,name:`vscode-icons:file-type-css`}),u[34]||=l(`span`,null,`CSS`,-1)]),tab0:e(({value:e,isActive:t})=>[...u[35]||=[l(`div`,{class:`language-html`,"data-highlighter":`shiki`,"data-ext":`html`,style:{"--shiki-light":`#393a34`,"--shiki-dark":`#dbd7caee`,"--shiki-light-bg":`#ffffff`,"--shiki-dark-bg":`#121212`}},[l(`pre`,{class:`shiki shiki-themes vitesse-light vitesse-dark vp-code`},[l(`code`,{class:`language-html`},[l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`<`),l(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`div`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` id`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`=`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`"`),l(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`app`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`"`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`>`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` <`),l(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`h3`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`>`),l(`span`,{style:{"--shiki-light":`#393A34`,"--shiki-dark":`#DBD7CAEE`}},`vuepress-theme-plume`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},``)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},``)])])])],-1)]]),tab1:e(({value:e,isActive:t})=>[...u[36]||=[l(`div`,{class:`language-js`,"data-highlighter":`shiki`,"data-ext":`js`,style:{"--shiki-light":`#393a34`,"--shiki-dark":`#dbd7caee`,"--shiki-light-bg":`#ffffff`,"--shiki-dark-bg":`#121212`}},[l(`pre`,{class:`shiki shiki-themes vitesse-light vitesse-dark vp-code`},[l(`code`,{class:`language-js`},[l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#AB5959`,"--shiki-dark":`#CB7676`}},`const`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` a`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` =`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},` '`),l(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`So Awesome!`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`'`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#AB5959`,"--shiki-dark":`#CB7676`}},`const`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` app`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` =`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` document`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`.`),l(`span`,{style:{"--shiki-light":`#59873A`,"--shiki-dark":`#80A665`}},`querySelector`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`(`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`'`),l(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`#app`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`'`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`)`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},`app`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`.`),l(`span`,{style:{"--shiki-light":`#59873A`,"--shiki-dark":`#80A665`}},`appendChild`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`(`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},`document`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`.`),l(`span`,{style:{"--shiki-light":`#59873A`,"--shiki-dark":`#80A665`}},`createElement`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`(`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`'`),l(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`small`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`'`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`)).`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},`textContent`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` =`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` a`)])])])],-1)]]),tab2:e(({value:e,isActive:t})=>[...u[37]||=[l(`div`,{class:`language-css`,"data-highlighter":`shiki`,"data-ext":`css`,style:{"--shiki-light":`#393a34`,"--shiki-dark":`#dbd7caee`,"--shiki-light-bg":`#ffffff`,"--shiki-dark-bg":`#121212`}},[l(`pre`,{class:`shiki shiki-themes vitesse-light vitesse-dark vp-code`},[l(`code`,{class:`language-css`},[l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`#`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},`app`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` {`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#998418`,"--shiki-dark":`#B8A965`}},` font-size`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`:`),l(`span`,{style:{"--shiki-light":`#2F798A`,"--shiki-dark":`#4C9A91`}},` 2`),l(`span`,{style:{"--shiki-light":`#AB5959`,"--shiki-dark":`#CB7676`}},`em`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`;`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#998418`,"--shiki-dark":`#B8A965`}},` text-align`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`:`),l(`span`,{style:{"--shiki-light":`#A65E2B`,"--shiki-dark":`#C99076`}},` center`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`;`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`}`)])])])],-1)]]),_:1})]),_:1},8,[`config`]),u[59]||=c(`引入 jQuery , dayjs 和 normalize.css 的示例:
输入：
:::: demo title="常规示例" desc="一个常规示例"
\`\`\`json
{
"jsLib": [
"https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js",
"https://cdn.jsdelivr.net/npm/dayjs@1.11.13/dayjs.min.js"
],
"cssLib": ["https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css"]
}
\`\`\`
::: code-tabs
@tab HTML
\`\`\`html
<div id="app">
<h3>vuepress-theme-plume</h3>
<p id="message"></p>
<datetime id="datetime"></datetime>
</div>
\`\`\`
@tab Javascript
\`\`\`js
$('#message').text('So Awesome!')
const datetime = $('#datetime')
setInterval(() => {
datetime.text(dayjs().format('YYYY-MM-DD HH:mm:ss'))
}, 1000)
\`\`\`
@tab CSS
\`\`\`css
#app {
font-size: 2em;
text-align: center;
}
\`\`\`
:::
::::输出：
`,5),i(y,{config:a(h),title:`常规示例`,desc:`一个常规示例`},{default:e(()=>[i(m,{id:`438`,data:[{id:`HTML`},{id:`Javascript`},{id:`CSS`}]},{title0:e(({value:e,isActive:t})=>[i(f,{provider:`iconify`,name:`vscode-icons:file-type-html`}),u[38]||=l(`span`,null,`HTML`,-1)]),title1:e(({value:e,isActive:t})=>[i(f,{provider:`iconify`,name:`vscode-icons:file-type-js-official`}),u[39]||=l(`span`,null,`Javascript`,-1)]),title2:e(({value:e,isActive:t})=>[i(f,{provider:`iconify`,name:`vscode-icons:file-type-css`}),u[40]||=l(`span`,null,`CSS`,-1)]),tab0:e(({value:e,isActive:t})=>[...u[41]||=[l(`div`,{class:`language-html`,"data-highlighter":`shiki`,"data-ext":`html`,style:{"--shiki-light":`#393a34`,"--shiki-dark":`#dbd7caee`,"--shiki-light-bg":`#ffffff`,"--shiki-dark-bg":`#121212`}},[l(`pre`,{class:`shiki shiki-themes vitesse-light vitesse-dark vp-code`},[l(`code`,{class:`language-html`},[l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`<`),l(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`div`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` id`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`=`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`"`),l(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`app`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`"`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`>`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` <`),l(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`h3`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`>`),l(`span`,{style:{"--shiki-light":`#393A34`,"--shiki-dark":`#DBD7CAEE`}},`vuepress-theme-plume`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},``)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` <`),l(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`p`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` id`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`=`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`"`),l(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`message`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`"`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`>`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` <`),l(`span`,{style:{"--shiki-light":`#B31D28`,"--shiki-dark":`#FDAEB7`}},`datetime`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` id`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`=`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`"`),l(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`datetime`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`"`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`>`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},``)])])])],-1)]]),tab1:e(({value:e,isActive:t})=>[...u[42]||=[l(`div`,{class:`language-js`,"data-highlighter":`shiki`,"data-ext":`js`,style:{"--shiki-light":`#393a34`,"--shiki-dark":`#dbd7caee`,"--shiki-light-bg":`#ffffff`,"--shiki-dark-bg":`#121212`}},[l(`pre`,{class:`shiki shiki-themes vitesse-light vitesse-dark vp-code`},[l(`code`,{class:`language-js`},[l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#59873A`,"--shiki-dark":`#80A665`}},`$`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`(`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`'`),l(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`#message`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`'`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`).`),l(`span`,{style:{"--shiki-light":`#59873A`,"--shiki-dark":`#80A665`}},`text`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`(`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`'`),l(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`So Awesome!`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`'`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`)`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#AB5959`,"--shiki-dark":`#CB7676`}},`const`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` datetime`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` =`),l(`span`,{style:{"--shiki-light":`#59873A`,"--shiki-dark":`#80A665`}},` $`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`(`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`'`),l(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`#datetime`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`'`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`)`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#59873A`,"--shiki-dark":`#80A665`}},`setInterval`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`(()`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` =>`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` {`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` datetime`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`.`),l(`span`,{style:{"--shiki-light":`#59873A`,"--shiki-dark":`#80A665`}},`text`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`(`),l(`span`,{style:{"--shiki-light":`#59873A`,"--shiki-dark":`#80A665`}},`dayjs`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`().`),l(`span`,{style:{"--shiki-light":`#59873A`,"--shiki-dark":`#80A665`}},`format`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`(`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`'`),l(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`YYYY-MM-DD HH:mm:ss`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`'`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`))`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`},`),l(`span`,{style:{"--shiki-light":`#2F798A`,"--shiki-dark":`#4C9A91`}},` 1000`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`)`)])])])],-1)]]),tab2:e(({value:e,isActive:t})=>[...u[43]||=[l(`div`,{class:`language-css`,"data-highlighter":`shiki`,"data-ext":`css`,style:{"--shiki-light":`#393a34`,"--shiki-dark":`#dbd7caee`,"--shiki-light-bg":`#ffffff`,"--shiki-dark-bg":`#121212`}},[l(`pre`,{class:`shiki shiki-themes vitesse-light vitesse-dark vp-code`},[l(`code`,{class:`language-css`},[l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`#`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},`app`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` {`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#998418`,"--shiki-dark":`#B8A965`}},` font-size`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`:`),l(`span`,{style:{"--shiki-light":`#2F798A`,"--shiki-dark":`#4C9A91`}},` 2`),l(`span`,{style:{"--shiki-light":`#AB5959`,"--shiki-dark":`#CB7676`}},`em`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`;`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#998418`,"--shiki-dark":`#B8A965`}},` text-align`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`:`),l(`span`,{style:{"--shiki-light":`#A65E2B`,"--shiki-dark":`#C99076`}},` center`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`;`)]),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`}`)])])])],-1)]]),_:1})]),_:1},8,[`config`]),u[60]||=c(`在页面中演示 markdown 源代码 和渲染结果。
输入：
@[demo markdown title="公告板" desc="公告板代码示例"](/.vuepress/bulletin.md)/.vuepress/bulletin.md 代码::: center
**QQ 交流群：** [792882761](https://qm.qq.com/q/FbPPoOIscE)
{width="618" height="616" style="width: 200px"}
您在使用过程中遇到任何问题，欢迎通过 [issue](https://github.com/pengzhanbo/vuepress-theme-plume/issues/new/choose) 反馈。也欢迎加入我们的 QQ 交流群一起讨论。
:::输出：
`,7),i(p,{type:`markdown`,title:`公告板`,desc:`公告板代码示例`},{code:e(()=>[...u[44]||=[l(`div`,{class:`language-md`,"data-highlighter":`shiki`,"data-ext":`md`,style:{"--shiki-light":`#393a34`,"--shiki-dark":`#dbd7caee`,"--shiki-light-bg":`#ffffff`,"--shiki-dark-bg":`#121212`}},[l(`pre`,{class:`shiki shiki-themes vitesse-light vitesse-dark vp-code`},[l(`code`,{class:`language-md`},[l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#393A34`,"--shiki-dark":`#DBD7CAEE`}},`::: center`)]),s(` `),l(`span`,{class:`line`}),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-light-font-weight":`bold`,"--shiki-dark":`#666666`,"--shiki-dark-font-weight":`bold`}},`**`),l(`span`,{style:{"--shiki-light":`#393A34`,"--shiki-light-font-weight":`bold`,"--shiki-dark":`#DBD7CAEE`,"--shiki-dark-font-weight":`bold`}},`QQ 交流群：`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-light-font-weight":`bold`,"--shiki-dark":`#666666`,"--shiki-dark-font-weight":`bold`}},`**`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` [`),l(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`792882761`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`](`),l(`span`,{style:{"--shiki-light":`#393A3490`,"--shiki-light-text-decoration":`underline`,"--shiki-dark":`#DEDCD590`,"--shiki-dark-text-decoration":`underline`}},`https://qm.qq.com/q/FbPPoOIscE`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`)`)]),s(` `),l(`span`,{class:`line`}),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`,l(`span`,{style:{"--shiki-light":`#393A3490`,"--shiki-light-text-decoration":`underline`,"--shiki-dark":`#DEDCD590`,"--shiki-dark-text-decoration":`underline`}},`/images/qq_qrcode.png`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`)`),l(`span`,{style:{"--shiki-light":`#393A34`,"--shiki-dark":`#DBD7CAEE`}},`{width="618" height="616" style="width: 200px"}`)]),s(` `),l(`span`,{class:`line`}),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#393A34`,"--shiki-dark":`#DBD7CAEE`}},`您在使用过程中遇到任何问题，欢迎通过 `),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`[`),l(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`issue`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`](`),l(`span`,{style:{"--shiki-light":`#393A3490`,"--shiki-light-text-decoration":`underline`,"--shiki-dark":`#DEDCD590`,"--shiki-dark-text-decoration":`underline`}},`https://github.com/pengzhanbo/vuepress-theme-plume/issues/new/choose`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`)`),l(`span`,{style:{"--shiki-light":`#393A34`,"--shiki-dark":`#DBD7CAEE`}},` 反馈。也欢迎加入我们的 QQ 交流群一起讨论。`)]),s(` `),l(`span`,{class:`line`}),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#393A34`,"--shiki-dark":`#DBD7CAEE`}},`:::`)])])])],-1)]]),default:e(()=>[u[45]||=l(`div`,{style:{"text-align":`center`}},[l(`p`,null,[l(`strong`,null,`QQ 交流群：`),s(),l(`a`,{href:`https://qm.qq.com/q/FbPPoOIscE`,target:`_blank`,rel:`noopener noreferrer`},`792882761`)]),l(`p`,null,[l(`img`,{src:`/images/qq_qrcode.png`,alt:`QQ qr_code`,width:`618`,height:`616`,style:{width:`200px`}})]),l(`p`,null,[s(`您在使用过程中遇到任何问题，欢迎通过 `),l(`a`,{href:`https://github.com/pengzhanbo/vuepress-theme-plume/issues/new/choose`,target:`_blank`,rel:`noopener noreferrer`},`issue`),s(` 反馈。也欢迎加入我们的 QQ 交流群一起讨论。`)])],-1)]),_:1}),u[61]||=c(`输入：
:::: demo markdown title="公告板" desc="公告板代码示例"
\`\`\`md
::: center
**QQ 交流群：** [792882761](https://qm.qq.com/q/FbPPoOIscE)
{width="618" height="616" style="width: 200px"}
您在使用过程中遇到任何问题，欢迎通过 [issue](https://github.com/pengzhanbo/vuepress-theme-plume/issues/new/choose) 反馈。也欢迎加入我们的 QQ 交流群一起讨论。
:::
\`\`\`
::::输出：
`,4),i(p,{type:`markdown`,title:`公告板`,desc:`公告板代码示例`},{code:e(()=>[...u[46]||=[l(`div`,{class:`language-md`,"data-highlighter":`shiki`,"data-ext":`md`,style:{"--shiki-light":`#393a34`,"--shiki-dark":`#dbd7caee`,"--shiki-light-bg":`#ffffff`,"--shiki-dark-bg":`#121212`}},[l(`pre`,{class:`shiki shiki-themes vitesse-light vitesse-dark vp-code`},[l(`code`,{class:`language-md`},[l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#393A34`,"--shiki-dark":`#DBD7CAEE`}},`::: center`)]),s(` `),l(`span`,{class:`line`}),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-light-font-weight":`bold`,"--shiki-dark":`#666666`,"--shiki-dark-font-weight":`bold`}},`**`),l(`span`,{style:{"--shiki-light":`#393A34`,"--shiki-light-font-weight":`bold`,"--shiki-dark":`#DBD7CAEE`,"--shiki-dark-font-weight":`bold`}},`QQ 交流群：`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-light-font-weight":`bold`,"--shiki-dark":`#666666`,"--shiki-dark-font-weight":`bold`}},`**`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` [`),l(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`792882761`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`](`),l(`span`,{style:{"--shiki-light":`#393A3490`,"--shiki-light-text-decoration":`underline`,"--shiki-dark":`#DEDCD590`,"--shiki-dark-text-decoration":`underline`}},`https://qm.qq.com/q/FbPPoOIscE`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`)`)]),s(` `),l(`span`,{class:`line`}),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`,l(`span`,{style:{"--shiki-light":`#393A3490`,"--shiki-light-text-decoration":`underline`,"--shiki-dark":`#DEDCD590`,"--shiki-dark-text-decoration":`underline`}},`/images/qq_qrcode.png`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`)`),l(`span`,{style:{"--shiki-light":`#393A34`,"--shiki-dark":`#DBD7CAEE`}},`{width="618" height="616" style="width: 200px"}`)]),s(` `),l(`span`,{class:`line`}),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#393A34`,"--shiki-dark":`#DBD7CAEE`}},`您在使用过程中遇到任何问题，欢迎通过 `),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`[`),l(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`issue`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`](`),l(`span`,{style:{"--shiki-light":`#393A3490`,"--shiki-light-text-decoration":`underline`,"--shiki-dark":`#DEDCD590`,"--shiki-dark-text-decoration":`underline`}},`https://github.com/pengzhanbo/vuepress-theme-plume/issues/new/choose`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`)`),l(`span`,{style:{"--shiki-light":`#393A34`,"--shiki-dark":`#DBD7CAEE`}},` 反馈。也欢迎加入我们的 QQ 交流群一起讨论。`)]),s(` `),l(`span`,{class:`line`}),s(` `),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#393A34`,"--shiki-dark":`#DBD7CAEE`}},`:::`)])])])],-1)]]),default:e(()=>[u[47]||=l(`div`,{style:{"text-align":`center`}},[l(`p`,null,[l(`strong`,null,`QQ 交流群：`),s(),l(`a`,{href:`https://qm.qq.com/q/FbPPoOIscE`,target:`_blank`,rel:`noopener noreferrer`},`792882761`)]),l(`p`,null,[l(`img`,{src:`/images/qq_qrcode.png`,alt:`QQ qr_code`,width:`618`,height:`616`,style:{width:`200px`}})]),l(`p`,null,[s(`您在使用过程中遇到任何问题，欢迎通过 `),l(`a`,{href:`https://github.com/pengzhanbo/vuepress-theme-plume/issues/new/choose`,target:`_blank`,rel:`noopener noreferrer`},`issue`),s(` 反馈。也欢迎加入我们的 QQ 交流群一起讨论。`)])],-1)]),_:1})])}}});export{j as _pageData,M as default};