gitea-yuany3721/vuepress-theme-plume
1
0
Fork 1
mirror of https://github.com/pengzhanbo/vuepress-theme-plume.git synced 2026-04-23 10:58:13 +08:00
Code Issues Packages Projects Releases Wiki Activity
vuepress-theme-plume/assets/frontend-mlPBvtbi.js

494 lines
225 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import{$ as e,B as t,C as n,P as r,_ as i,_t as a,f as o,g as s,h as c,l,lt as u,y as d,zt as f}from"./runtime-core.esm-bundler-CZvn3YaB.js";import{A as p}from"./dist-CMy7OcvW.js";import{t as m}from"./plugin-vue_export-helper-CxTVcLa7.js";import"./qq_qrcode-4bHpuuDT.js";var h=u({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:`$("#message").text("So Awesome!");
const datetime = $("#datetime");
setInterval(() => {
datetime.text(dayjs().format("YYYY-MM-DD HH:mm:ss"));
}, 1e3);
`,css:`#app {
font-size: 2em;
text-align: center;
}`,html:`<div id="app">
<h3>vuepress-theme-plume</h3>
<p id="message"></p>
<datetime id="datetime"></datetime>
</div>`}),g=u({jsLib:[],cssLib:[],script:`const a = "So Awesome!";
const app = document.querySelector("#app");
app.appendChild(document.createElement("small")).textContent = a;
`,css:`#app {
font-size: 2em;
text-align: center;
}`,html:`<div id="app">
<h3>vuepress-theme-plume</h3>
</div>`}),_=u({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:`$("#message").text("So Awesome!");
const datetime = $("#datetime");
setInterval(() => {
datetime.text(dayjs().format("YYYY-MM-DD HH:mm:ss"));
}, 1e3);
`,css:`#app {
font-size: 2em;
text-align: center;
}`,html:`<div id="app">
<h3>vuepress-theme-plume</h3>
<p id="message"></p>
<datetime id="datetime"></datetime>
</div>`}),v=u({jsLib:[],cssLib:[],script:`const a = "So Awesome!";
const app = document.querySelector("#app");
app.appendChild(document.createElement("small")).textContent = a;
`,css:`#app {
font-size: 2em;
text-align: center;
}`,html:`<div id="app">
<h3>vuepress-theme-plume</h3>
</div>`}),y={class:`counter`},b=m(d({__name:`guide-repl-frontend-DemoContainer307`,setup(e){let t=u(0);return(e,n)=>(r(),o(`div`,y,[l(`p`,null,`计数器：`+f(t.value),1),l(`button`,{type:`button`,class:`btn`,onClick:n[0]||=e=>t.value+=1},` + 1 `)]))}}),[[`__scopeId`,`data-v-efe97c22`]]),x={style:{display:`flex`,gap:`16px`}},S=m(d({__name:`Toggle`,setup(e){let[t,n]=p();return(e,i)=>(r(),o(`div`,null,[l(`p`,null,`Value: `+f(a(t)?`ON`:`OFF`),1),l(`div`,x,[l(`button`,{class:`btn`,onClick:i[0]||=e=>a(n)()},` Toggle `),l(`button`,{class:`btn`,onClick:i[1]||=e=>t.value=!0},` Set On `),l(`button`,{class:`btn`,onClick:i[2]||=e=>t.value=!1},` Set Off `)])]))}}),[[`__scopeId`,`data-v-5eb83cf8`]]),C={btn:`_btn_9kspd_1`},w=d({setup(){let e=u(0);return()=>n(`div`,{class:`counter`},[n(`p`,`计数器：${e.value}`),n(`button`,{type:`button`,class:C.btn,onClick:()=>e.value+=1},`+ 1`)])}}),T={class:`counter`},E=m(d({__name:`Counter`,setup(e){let t=u(0);return(e,n)=>(r(),o(`div`,T,[l(`p`,null,` 计数器：`+f(t.value),1),l(`button`,{type:`button`,class:`btn`,onClick:n[0]||=e=>t.value+=1},` + 1 `)]))}}),[[`__scopeId`,`data-v-d9836355`]]),D={class:`code-block-title`,"data-title":`.vuepress/config.ts`},O={class:`code-block-title-bar`},k={class:`title`},A={class:`hint-container details`},j=JSON.parse(`{"path":"/guide/repl/frontend/","title":"前端演示 | 指南","lang":"zh-CN","frontmatter":{"title":"前端演示","icon":"icon-park-outline:html-five","createTime":"2025/01/08 21:34:26","permalink":"/guide/repl/frontend/","description":"旧的前端代码演示 已弃用，请迁移至此新的方案。 旧的方案由 vuepress-plugin-md-enhance 提供，感谢在过去 提供的代码演示的支持，在 vuepress-plugin-md-enhance 中代码演示功能也将迁移至 vuepress/ecosystem， 详情请查看 vuepress/ecosystem#293 。 为什么要重新设...","head":[["script",{"type":"application/ld+json"},"{\\"@context\\":\\"https://schema.org\\",\\"@type\\":\\"Article\\",\\"headline\\":\\"前端演示\\",\\"image\\":[\\"https://theme-plume.vuejs.press/images/qq_qrcode.png\\",\\"https://theme-plume.vuejs.press/images/qq_qrcode.png\\"],\\"dateModified\\":\\"2026-03-08T13:55:27.000Z\\",\\"author\\":[]}"],["meta",{"property":"og:url","content":"https://theme-plume.vuejs.press/guide/repl/frontend/"}],["meta",{"property":"og:site_name","content":"Plume 主题"}],["meta",{"property":"og:title","content":"前端演示"}],["meta",{"property":"og:description","content":"旧的前端代码演示 已弃用，请迁移至此新的方案。 旧的方案由 vuepress-plugin-md-enhance 提供，感谢在过去 提供的代码演示的支持，在 vuepress-plugin-md-enhance 中代码演示功能也将迁移至 vuepress/ecosystem， 详情请查看 vuepress/ecosystem#293 。 为什么要重新设..."}],["meta",{"property":"og:type","content":"article"}],["meta",{"property":"og:image","content":"https://theme-plume.vuejs.press/images/qq_qrcode.png"}],["meta",{"property":"og:locale","content":"zh-CN"}],["meta",{"property":"og:locale:alternate","content":"en-US"}],["meta",{"property":"og:updated_time","content":"2026-03-08T13:55:27.000Z"}],["meta",{"property":"article:modified_time","content":"2026-03-08T13:55:27.000Z"}],["link",{"rel":"alternate","hreflang":"en-us","href":"https://theme-plume.vuejs.press/en/guide/repl/frontend/"}]]},"readingTime":{"minutes":10.39,"words":3117},"git":{"createdTime":1736479043000,"updatedTime":1772978127000,"contributors":[{"name":"pengzhanbo","username":"pengzhanbo","email":"volodymyr@foxmail.com","commits":9,"avatar":"https://avatars.githubusercontent.com/pengzhanbo?v=4","url":"https://github.com/pengzhanbo"}],"changelog":[{"hash":"97a5ba20c3eb976864d8a9ec7342a061bb73c03b","time":1772978127000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"docs: fix typo"},{"hash":"9b9f8f3f77f8ec801e99e9aad8555bab2244dc63","time":1772696051000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"style: lint fix"},{"hash":"4d2361a7046214fe0f4e4af01831107fd00e38ad","time":1759849989000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"feat(theme)!: add collections support (#704)"},{"hash":"338334f4796d04801b3175fbd633128905b73ce5","time":1750330126000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"feat!: use new chart plugin and remove md-enhance (#621)"},{"hash":"73ed8dc9c544be19318db4e36379f08c4a91a39b","time":1745034035000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"feat(theme): add badge support for navbar and sidebar (#559)"},{"hash":"6fd6c0c25008880469d5eda1aa06482a563a4bb8","time":1743264724000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"feat: improve <code>demo vue</code> 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 <code>normal demo</code> sandbox (#448)"},{"hash":"a9f6bd0a0c04b617abfd23ebcd248a52cf4382d9","time":1736479043000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"feat(plugin-md-power): add <code>demo</code> 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('<div class="hint-container important"><p class="hint-container-title">旧的前端代码演示 已弃用，请迁移至此新的方案。</p><p>旧的方案由 <a href="https://plugin-md-enhance.vuejs.press/zh/" target="_blank" rel="noopener noreferrer">vuepress-plugin-md-enhance</a> 提供，感谢在过去 提供的代码演示的支持，在 <code>vuepress-plugin-md-enhance</code> 中代码演示功能也将迁移至 <a href="https://github.com/vuepress/ecosystem" target="_blank" rel="noopener noreferrer">vuepress/ecosystem</a>， 详情请查看 <a href="https://github.com/vuepress/ecosystem/pull/293" target="_blank" rel="noopener noreferrer">vuepress/ecosystem#293</a> 。</p></div><details class="hint-container details"><summary>为什么要重新设计？</summary><p>前端代码演示是一个很有用的功能，但是在旧的方案中，所实现的功能与实际使用场景预期不符。</p><p>旧的方案中，比如 <code>vue-demo</code> 仅能支持一些简单的 vue 组件演示，且不能直接导入项目中的依赖，仅能通过 加载外部脚本支持更多功能，且并没提供对 <code>vue sfc</code> 的完全支持，仅能进行简单的代码演示。</p><p>而且对脚本代码的编译是在浏览器运行时，先从 CDN 请求加载 <code>babel</code>，完成后再通过 <code>babel</code> 进行转换， 这需要额外的等待时间完成，同时对于企业内部的项目，在内网环境中无法请求外部资源，导致演示无法正常展示。</p><p>在新的方案中，所有的演示代码均是在 nodejs 运行时进行编译转换，因此在浏览器运行时可直接展示演示代码，无需额外的等待时间。 且得益于 nodejs 强大的能力，可以完全支持 <code>vue sfc</code> 的完整功能，且可以直接导入项目中的依赖，让你的演示更加丰富。 更符合实际的使用场景。</p></details><h2 id="概述" tabindex="-1"><a class="header-anchor" href="#概述"><span>概述</span></a></h2><p>此功能支持在 页面中 嵌入 代码演示 功能。前端代码演示由两个主要区域组成： <mark>渲染区</mark> 和 <mark>代码区</mark> 。</p><p>其中，<strong>渲染区</strong> 用于展示代码的执行结果，包括 UI 渲染和 交互；<strong>代码区</strong> 用于展示源代码，默认是折叠的。</p><p>主题提供了 三种不同的 前端代码演示支持：</p><ul><li><mark>vue 组件演示</mark>： 支持 <code>vue</code> 组件的演示，像编写一个 <code>vue</code> 组件一样编写你的演示代码，可以用于演示如 组件库、<code>composables-api</code> 等外部依赖。</li><li><mark>markdown 演示</mark>：支持 <code>markdown</code> 的演示。</li><li><mark>普通代码演示</mark> ：支持原生的 <code>HTML</code> + <code>JS/TS</code> + <code>CSS/Less/Sass/Stylus</code> 的代码演示，像编写一个网页一样编写你的演示代码。</li></ul><p>主题还提供了 两种不同的使用方式编写演示代码:</p><ul><li><p>嵌入演示代码文件：</p><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;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">demo type</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">](</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;">url</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span></code></pre></div><p>可以通过简单的嵌入语法，从文件中导入演示代码。</p></li><li><p>demo 容器内联演示代码:</p><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;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: demo type</span></span>\n<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> [lang]</span></span>\n<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">code</span></span>\n<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span></span>\n<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span></code></pre></div><p>直接在 markdown 文件中编写演示代码，使用 <code>demo</code> 容器包裹即可。</p></li></ul><h2 id="配置" tabindex="-1"><a class="header-anchor" href="#配置"><span>配置</span></a></h2>',10),l(`p`,null,[u[1]||=s(`前端代码演示 由 `,-1),i(d,{href:`../../config/plugins/markdown-power.md`},{default:e(()=>[...u[0]||=[s(`vuepress-plugin-md-power`,-1)]]),_:1}),u[2]||=s(` 提供支持。`,-1)]),u[49]||=l(`p`,null,`前端 代码演示 默认不启用，你可以通过配置来启用它。`,-1),l(`div`,D,[l(`div`,O,[l(`span`,k,[i(f,{provider:`iconify`,name:`vscode-icons:file-type-typescript`}),u[3]||=s(`.vuepress/config.ts`,-1)])]),u[4]||=c(`<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;"><pre class="shiki shiki-themes vitesse-light vitesse-dark has-diff vp-code"><code class="language-ts"><span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">export</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> default</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> defineUserConfig</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">({</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> theme</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">plumeTheme</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">({</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> markdown</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: {</span></span>
<span class="line diff add"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> demo</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">true</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">, </span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> },</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> })</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">})</span></span></code></pre></div>`,1)]),u[50]||=c(`<h2 id="语言支持" tabindex="-1"><a class="header-anchor" href="#语言支持"><span>语言支持</span></a></h2><p>代码演示支持以下 语言：</p><ul><li>javascript</li><li>typescript</li><li>html</li><li>css</li><li>less</li><li>sass</li><li>stylus</li></ul><p>对于 css 预处理语言，你需要在项目中安装对应的预处理器，如 <code>less</code> 、 <code>sass</code> 、 <code>stylus</code> 等。</p><h2 id="嵌入语法" tabindex="-1"><a class="header-anchor" href="#嵌入语法"><span>嵌入语法</span></a></h2><p>不同的代码演示均使用相同的嵌入语法，你可以快速掌握它们的使用方法。</p><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;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">&lt;!-- 语法 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">demo</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">](</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;">url</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">demo [type]</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">](</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;">url</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">demo [type] title=&quot;&quot; desc=&quot;&quot; expanded code-setting=&quot;&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">](</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;">url</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span></code></pre></div><p><code>@[demo](url)</code> 是一个固定的语法格式。</p><p><code>[type]</code> 表示类型，支持 三个不同的值：</p><ul><li><code>normal</code>: 普通代码演示类型。当不传入 <code>[type]</code> 参数时，默认为 <code>normal</code> 类型。</li><li><code>vue</code>: vue 组件演示类型。</li><li><code>markdown</code>: markdown 演示类型。</li></ul><p><code>url</code> 表示演示代码文件的路径，可以是相对路径或绝对路径，</p>`,11),l(`ul`,null,[u[10]||=l(`li`,null,[s(`相对路径，以 `),l(`code`,null,`./`),s(` 或 `),l(`code`,null,`../`),s(` 开头，表示相对于当前的 markdown 文件路径。`)],-1),l(`li`,null,[u[6]||=s(`绝对路径，以 `,-1),u[7]||=l(`code`,null,`/`,-1),u[8]||=s(` 开头，表示从 `,-1),i(d,{href:`../quick-start/project-structure.md#%E6%96%87%E6%A1%A3%E6%BA%90%E7%9B%AE%E5%BD%95`},{default:e(()=>[...u[5]||=[s(`vuepress 源目录路径`,-1)]]),_:1}),u[9]||=s(` 开始。`,-1)])]),u[51]||=c(`<div class="language-md line-numbers-mode" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">&lt;!-- 普通代码演示 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">demo</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">](</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;">./demo/normal.html</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">demo normal</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">](</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;">./demo/normal.html</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">demo</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">](</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;">/.vuepress/demo/normal.html</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">&lt;!-- vue 组件演示 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">demo vue</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">](</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;">./demo/Counter.vue</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">demo vue</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">](</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;">./demo/Counter.ts</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">demo</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">](</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;">/.vuepress/demo/Counter.vue</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">&lt;!-- markdown 演示 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">demo markdown</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">](</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;">./demo/example.md</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">demo markdown</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">](</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;">/.vuepress/demo/example.md</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>其它额外参数：</p><ul><li><p><code>title=&quot;xxx&quot;</code> ：演示标题</p></li><li><p><code>desc=&quot;xxx&quot;</code>：演示描述</p></li><li><p><code>expanded</code>：展开代码区域</p></li><li><p><code>code-setting=&quot;xxx&quot;</code>：代码设置，值将被拼接在 <code> \`\`\` [lang]</code> 之后，用于给代码块添加配置。</p><p><code>code-setting=&quot;:lines-number&quot;</code>,则会在代码块后面添加 <code>:lines-number</code>，使代码块支持显示行号。</p><p><code>code-setting=&quot;:collapsed-lines=10&quot;</code>,则会在代码块后面添加 <code>:collapsed-lines=10</code>，使代码块从第 10 行开始折叠。</p></li></ul><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;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">demo vue expanded title=&quot;标题&quot; desc=&quot;描述&quot; code-setting=&quot;:collapsed-lines=10&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">](</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;">./demo/Counter.vue</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span></code></pre></div><h2 id="demo-容器内联演示" tabindex="-1"><a class="header-anchor" href="#demo-容器内联演示"><span>demo 容器内联演示</span></a></h2><p>demo 容器内联演示 使用 <code>demo</code> 容器包裹演示代码，可以在 markdown 文件中快速地编写演示代码，如下：</p><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;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: demo </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">type</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">]</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> title=&quot;&quot; desc=&quot;&quot; expanded</span></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">&lt;!-- 代码块 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span></code></pre></div><p>所有参数与 <code>@[demo](url)</code> 语法相同。</p><div class="language-md line-numbers-mode" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">&lt;!-- 普通代码演示 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: demo</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`\`\`</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">html</span></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">&lt;!-- html 代码 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`\`\`</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`\`\`</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> js</span></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">// js 代码</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`\`\`</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`\`\`</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> css</span></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">/* css 代码 */</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`\`\`</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">&lt;!-- vue 组件演示 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: demo vue</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`\`\`</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> vue</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">&lt;!-- vue 代码 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`\`\`</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">&lt;!-- markdown 演示 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: demo markdown</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`\`\`</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> md</span></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">&lt;!-- markdown 代码 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`\`\`</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>还可以在 <code>::: demo</code> 容器中 使用 <code>::: code-tabs</code> 容器包裹代码块，以获得更好的交互效果。</p><div class="language-md line-numbers-mode" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::: demo</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: code-tabs</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@tab HTML</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`\`\`</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">html</span></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">&lt;!-- html 代码 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`\`\`</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@tab javascript</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`\`\`</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> js</span></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">// js 代码</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`\`\`</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@tab css</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`\`\`</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> css</span></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">/* css 代码 */</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`\`\`</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::::</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>当期望使用 Typescript 或 <code>Less/Sass/Stylus</code> 时，通过修改 <code> \`\`\` [lang]</code> 的值即可：</p><div class="language-md line-numbers-mode" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::: demo</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: code-tabs</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@tab HTML</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`\`\`</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">html</span></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">&lt;!-- html 代码 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`\`\`</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@tab Typescript</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`\`\`</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> ts</span></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">// ts 代码</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`\`\`</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@tab Scss</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`\`\`</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> scss</span></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">/* scss 代码 */</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`\`\`</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::::</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="vue-组件演示" tabindex="-1"><a class="header-anchor" href="#vue-组件演示"><span>vue 组件演示</span></a></h2><p>vue 组件演示 是一个很强大的功能，对于演示代码不做任何限制，这甚至完全取决于 <code>bundler</code> 对于 vue 的支持。 你还可以直接在演示代码中导入项目中安装的依赖，就像你在写一个 vue 项目的组件一样。</p><p>因此，你可以直接使用它来为 你的组件库 提供演示示例，或者为你的 <code>composables-api</code> 提供演示示例。</p><h3 id="嵌入语法-1" tabindex="-1"><a class="header-anchor" href="#嵌入语法-1"><span>嵌入语法</span></a></h3><p>你可以直接使用以下方式在页面中嵌入一个 vue 组件演示:</p><p><strong>输入：</strong></p><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;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">demo vue title=&quot;计数器&quot; desc=&quot;点击 +1 按钮，计数器自增 1&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">](</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;">./demo/Counter.vue</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span></code></pre></div><details class="hint-container details"><summary>查看 <code>./demo/Counter.vue</code> 代码</summary><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;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-vue"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">script</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> setup</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> lang</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">ts</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">import</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> ref</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> from</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> &#39;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">vue</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const </span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">count</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> ref</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;">0</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">script</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">template</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> &lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">div</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> class</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">counter</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> &lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">p</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 计数器：{{ count }}</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> &lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">p</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> &lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">button</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> type</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">button</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> class</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">btn</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> @click</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">count += 1</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> + 1</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> &lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">button</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> &lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">div</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">template</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">style</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> scoped</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">btn</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> border</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 1</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">px</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;"> solid</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> var</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">--vp-c-divider</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> border-radius</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 4</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">px</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">}</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">style</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><p><strong>输出：</strong></p>`,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`}},`</`),l(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`script`),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`}},` </`),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":`#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`}},` </`),l(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`button`),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`}},`template`),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(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`style`),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(`<hr><p>也可以嵌入一个 <code>.ts</code> 编写的 vue 组件：</p><p><strong>输入：</strong></p><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;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">demo vue title=&quot;计数器&quot; desc=&quot;点击 +1 按钮，计数器自增 1&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">](</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;">./demo/Counter.ts</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span></code></pre></div>`,4),l(`details`,A,[u[16]||=l(`summary`,null,[s(`查看 `),l(`code`,null,`./demo/Counter.ts`),s(` 代码`)],-1),i(m,{id:`259`,data:[{id:`Counter.ts`},{id:`Counter.module.css`}]},{title0:e(({value:e,isActive:t})=>[i(f,{provider:`iconify`,name:`vscode-icons:file-type-typescript`}),u[12]||=l(`span`,null,`Counter.ts`,-1)]),title1:e(({value:e,isActive:t})=>[i(f,{provider:`iconify`,name:`vscode-icons:file-type-css`}),u[13]||=l(`span`,null,`Counter.module.css`,-1)]),tab0:e(({value:e,isActive:t})=>[...u[14]||=[l(`div`,{class:`language-ts line-numbers-mode`,"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":`#1E754F`,"--shiki-dark":`#4D9375`}},`import`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` {`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` defineComponent`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`,`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` h`),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`},[l(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`import`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` styles`),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`}},`./Counter.module.css`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`'`)]),s(`
`),l(`span`,{class:`line`}),s(`
`),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`export`),l(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},` default`),l(`span`,{style:{"--shiki-light":`#59873A`,"--shiki-dark":`#80A665`}},` defineComponent`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`({`)]),s(`
`),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#59873A`,"--shiki-dark":`#80A665`}},` setup`),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`}},`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":`#1E754F`,"--shiki-dark":`#4D9375`}},` return`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` () => `),l(`span`,{style:{"--shiki-light":`#59873A`,"--shiki-dark":`#80A665`}},`h`),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`}},`div`),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":`#998418`,"--shiki-dark":`#B8A965`}},` 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`}},` }, [`)]),s(`
`),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#59873A`,"--shiki-dark":`#80A665`}},` h`),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`}},`p`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`'`),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`}},`计数器：`),l(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},"${"),l(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`count`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`.`),l(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`value`),l(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`}`),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`}},` h`),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":`#999999`,"--shiki-dark":`#666666`}},`, {`)]),s(`
`),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#998418`,"--shiki-dark":`#B8A965`}},` 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":`#999999`,"--shiki-dark":`#666666`}},`,`)]),s(`
`),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#998418`,"--shiki-dark":`#B8A965`}},` class`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`: `),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},`styles`),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":`#59873A`,"--shiki-dark":`#80A665`}},` onClick`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`: () => `),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},`count`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`.`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},`value`),l(`span`,{style:{"--shiki-light":`#AB5959`,"--shiki-dark":`#CB7676`}},` +=`),l(`span`,{style:{"--shiki-light":`#2F798A`,"--shiki-dark":`#4C9A91`}},` 1`),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":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`'`),l(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`+ 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":`#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`})])],-1)]]),tab1:e(({value:e,isActive:t})=>[...u[15]||=[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`}},`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`}},`}`)])])])],-1)]]),_:1})]),u[53]||=l(`p`,null,[l(`strong`,null,`输出：`)],-1),i(p,{type:`vue`,title:`计数器`,desc:`点击 +1 按钮，计数器自增 1`},{code:e(()=>[...u[17]||=[l(`div`,{class:`language-ts line-numbers-mode`,"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":`#1E754F`,"--shiki-dark":`#4D9375`}},`import`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` {`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` defineComponent`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`,`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` h`),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`},[l(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`import`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},` styles`),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`}},`./Counter.module.css`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`'`)]),s(`
`),l(`span`,{class:`line`}),s(`
`),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`export`),l(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},` default`),l(`span`,{style:{"--shiki-light":`#59873A`,"--shiki-dark":`#80A665`}},` defineComponent`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`({`)]),s(`
`),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#59873A`,"--shiki-dark":`#80A665`}},` setup`),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`}},`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":`#1E754F`,"--shiki-dark":`#4D9375`}},` return`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},` () => `),l(`span`,{style:{"--shiki-light":`#59873A`,"--shiki-dark":`#80A665`}},`h`),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`}},`div`),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":`#998418`,"--shiki-dark":`#B8A965`}},` 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`}},` }, [`)]),s(`
`),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#59873A`,"--shiki-dark":`#80A665`}},` h`),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`}},`p`),l(`span`,{style:{"--shiki-light":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`'`),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`}},`计数器：`),l(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},"${"),l(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`count`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`.`),l(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`value`),l(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`}`),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`}},` h`),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":`#999999`,"--shiki-dark":`#666666`}},`, {`)]),s(`
`),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#998418`,"--shiki-dark":`#B8A965`}},` 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":`#999999`,"--shiki-dark":`#666666`}},`,`)]),s(`
`),l(`span`,{class:`line`},[l(`span`,{style:{"--shiki-light":`#998418`,"--shiki-dark":`#B8A965`}},` class`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`: `),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},`styles`),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":`#59873A`,"--shiki-dark":`#80A665`}},` onClick`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`: () => `),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},`count`),l(`span`,{style:{"--shiki-light":`#999999`,"--shiki-dark":`#666666`}},`.`),l(`span`,{style:{"--shiki-light":`#B07D48`,"--shiki-dark":`#BD976A`}},`value`),l(`span`,{style:{"--shiki-light":`#AB5959`,"--shiki-dark":`#CB7676`}},` +=`),l(`span`,{style:{"--shiki-light":`#2F798A`,"--shiki-dark":`#4C9A91`}},` 1`),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":`#B5695977`,"--shiki-dark":`#C98A7D77`}},`'`),l(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},`+ 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":`#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`})])],-1)]]),default:e(()=>[i(a(w))]),_:1}),u[54]||=c(`<div class="hint-container info"><p class="hint-container-title">对于 <code>.js/.ts</code> 编写的组件，请使用 <code>css module</code> 来编写样式以实现样式隔离</p></div><hr><p>可以在演示代码中导入外部依赖， 以导入 <code>@vueuse/core</code> 中的 <code>useToggle()</code> 为例:</p><p><strong>输入：</strong></p><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;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">demo vue title=&quot;useToggle&quot; desc=&quot;useToggle() 演示&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">](</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;">./demo/Toggle.vue</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span></code></pre></div><details class="hint-container details"><summary>./demo/Toggle.vue</summary><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;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-vue"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">script</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> setup</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> lang</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">ts</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">import</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> useToggle</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> from</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> &#39;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">@vueuse/core</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">value</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> toggle</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">]</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> useToggle</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">()</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">script</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">template</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> &lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">div</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> &lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">p</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Value: {{ value ? &#39;ON&#39; : &#39;OFF&#39; }}</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">p</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> &lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">div</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> style</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">display: flex;gap: 16px;</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> &lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">button</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> class</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">btn</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> @click</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">toggle()</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Toggle</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> &lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">button</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> &lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">button</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> class</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">btn</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> @click</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">value = true</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Set On</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> &lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">button</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> &lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">button</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> class</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">btn</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> @click</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">value = false</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> Set Off</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> &lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">button</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> &lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">div</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> &lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">div</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">template</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">style</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> scoped</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">btn</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> border</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 1</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">px</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;"> solid</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> var</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">--vp-c-divider</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> border-radius</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 4</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">px</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">}</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">style</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><p><strong>输出：</strong></p>`,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`}},`</`),l(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`script`),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`}},`</`),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":`#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`}},` </`),l(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`button`),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`}},` </`),l(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`button`),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`}},` </`),l(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`button`),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`}},`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`}},`template`),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(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`style`),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(`<h3 id="容器语法" tabindex="-1"><a class="header-anchor" href="#容器语法"><span>容器语法</span></a></h3><p>在 markdown 文件中使用 <code>demo</code> 容器包裹演示代码，可以快速地编写演示代码，如下：</p><p><strong>输入：</strong></p><details class="hint-container details"><summary>展开查看完整代码</summary><div class="language-md line-numbers-mode" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: demo vue title=&quot;计数器&quot; desc=&quot;点击 +1 按钮，计数器自增 1&quot;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`\`\`</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">vue</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">&lt;script setup lang=&quot;ts&quot;&gt;</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">import { ref } from &#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">const count = ref(0)</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">&lt;/script&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">&lt;template&gt;</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> &lt;div class=&quot;counter&quot;&gt;</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> &lt;p&gt;计数器：{{ count }}&lt;/p&gt;</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> &lt;button type=&quot;button&quot; class=&quot;btn&quot; @click=&quot;count += 1&quot;&gt;</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> + 1</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> &lt;/button&gt;</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> &lt;/div&gt;</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">&lt;/template&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">&lt;style scoped&gt;</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">.btn {</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> border: 1px solid var(--vp-c-divider);</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> border-radius: 4px;</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">}</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">&lt;/style&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`\`\`</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><p><strong>输出：</strong></p>`,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`}},`</`),l(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`script`),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`}},`</`),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":`#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`}},` </`),l(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`button`),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`}},`template`),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(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`style`),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(`<div class="hint-container warning"><p class="hint-container-title">注意</p><p>vue demo 容器语法虽然也支持使用 <code>.js/ts + css</code> 的方式来嵌入演示代码， 但主题不推荐这样做。因为样式无法被隔离，这可能导致样式污染。</p><details class="hint-container details"><summary>参考示例</summary><div class="language-md line-numbers-mode" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::: demo vue title=&quot;标题&quot; desc=&quot;描述&quot;</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: code-tabs</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@tab Counter.ts</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`\`\`</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">ts</span></span>
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">import</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> defineComponent</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> ref</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> from</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> &#39;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">vue</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">export</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> default</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> defineComponent</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">({</span></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> // code</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">})</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`\`\`</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@tab Counter.css</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`\`\`</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">css</span></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">/* css code */</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`\`\`</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::::</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details></div><h2 id="普通代码演示" tabindex="-1"><a class="header-anchor" href="#普通代码演示"><span>普通代码演示</span></a></h2><p>普通代码演示支持 <code>html</code> 、 <code>css/less/sass/stylus</code> 、 <code>js/ts</code> 语言。</p><p>适合于相对简单的代码演示，比如 一个样式渲染效果，一个交互效果，一个功能 等。</p><p>普通代码演示还支持跳转到 <code>codePen</code> 和 <code>jsFiddle</code> 中查看。</p><p>同时，也支持通过 外部链接 的方式引入 第三方的库，比如 <code>jQuery</code> ， <code>dayjs</code> 等。</p><div class="hint-container warning"><p class="hint-container-title">不建议过于复杂的演示。</p></div><h3 id="嵌入语法-2" tabindex="-1"><a class="header-anchor" href="#嵌入语法-2"><span>嵌入语法</span></a></h3><p>使用嵌入语法时，对于导入的 代码演示文件，使用 <code>.html</code> 作为文件后缀。在 <code>.html</code> 文件中， 你可以像编写一个 HTML 页面一样编写 演示代码：</p><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-html"><span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">&lt;!-- html 代码 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">div</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> id</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">app</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 演示内容</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">div</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">&lt;!-- 脚本内容，使用 lang 属性设置语言, 默认为 js --&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">script</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> lang</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">ts</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">script</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">&lt;!-- 样式内容，使用 lang 属性设置语言, 默认为 css --&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">style</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> lang</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">css</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">style</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">&lt;!-- 可选的配置文件 json 格式 --&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">script</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> type</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">config</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">{</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> &quot;jsLib&quot;: [],</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> &quot;cssLib&quot;: []</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">}</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">script</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>每一个区域的内容都是可选的。但请注意，不支持存在多个相同的区域。区域的顺序无要求。 除了 <code>&lt;script&gt;</code> 和 <code>&lt;style&gt;</code> 之外的内容，都被认为是 HTML 代码。</p><p>你可以在 <code>&lt;script type=&quot;config&quot;&gt;&lt;/script&gt;</code> 内使用 <code>json</code> 格式声明要加载的其他依赖资源。</p><p>比如，加载 <code>jQuery</code>， 以及 <code>normalize.css</code>:</p><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-html"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">div</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">xxxx</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">div</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">script</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> type</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">config</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">{</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> &quot;jsLib&quot;: [</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> &quot;https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js&quot;</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> ],</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> &quot;cssLib&quot;: [</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> &quot;https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css&quot;</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> ]</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">}</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">script</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><hr><p>一个常规的示例：</p><p><strong>输入：</strong></p><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;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">demo title=&quot;示例&quot; desc=&quot;这是一个常规演示&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">](</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;">./demo/normal.html</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span></code></pre></div><details class="hint-container details"><summary>查看 <code>./demo/normal.html</code>代码</summary><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-html"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">div</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> id</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">app</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> &lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">h3</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">vuepress-theme-plume</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">h3</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">div</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">script</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> lang</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">ts</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> a</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> &#39;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">So Awesome!</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</span></span>
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> app</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> document</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">querySelector</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">#app</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">app</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">appendChild</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">document</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">createElement</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">small</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)).</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">textContent</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> a</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">script</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">style</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> lang</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">css</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">#</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">app</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> font-size</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 2</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">em</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> text-align</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;"> center</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">}</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">style</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><p><strong>输出：</strong></p>`,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`}},`</`),l(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`h3`),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`}},`>`)])])])],-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(`<hr><p>引入 <code>jQuery</code> , <code>dayjs</code> 和 <code>normalize.css</code> 的示例:</p><p><strong>输入：</strong></p><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;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">demo title=&quot;示例&quot; desc=&quot;这是一个常规演示&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">](</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;">./demo/normal-lib.html</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span></code></pre></div><details class="hint-container details"><summary>查看 <code>./demo/normal-lib.html</code>代码</summary><div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-html"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">div</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> id</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">app</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> &lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">h3</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">vuepress-theme-plume</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">h3</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> &lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">p</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> id</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">message</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">p</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> &lt;</span><span style="--shiki-light:#B31D28;--shiki-dark:#FDAEB7;">datetime</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> id</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">datetime</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;&lt;/</span><span style="--shiki-light:#B31D28;--shiki-dark:#FDAEB7;">datetime</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">div</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">script</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">$</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">#message</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">).</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">text</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">So Awesome!</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span>
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> datetime</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> $</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">#datetime</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span>
<span class="line"><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">setInterval</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(()</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =&gt;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> datetime</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">text</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">dayjs</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">().</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">format</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">YYYY-MM-DD HH:mm:ss</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">))</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">},</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 1000</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">script</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">style</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> lang</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">css</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">#</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">app</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> font-size</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 2</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">em</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> text-align</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;"> center</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">}</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">style</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">script</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> type</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">config</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">{</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> &quot;jsLib&quot;: [</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> &quot;https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js&quot;,</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> &quot;https://cdn.jsdelivr.net/npm/dayjs@1.11.13/dayjs.min.js&quot;</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> ],</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> &quot;cssLib&quot;: [&quot;https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css&quot;]</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">}</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">script</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><p><strong>输出：</strong></p>`,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`}},`</`),l(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`h3`),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`}},`></`),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":`#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`}},`></`),l(`span`,{style:{"--shiki-light":`#B31D28`,"--shiki-dark":`#FDAEB7`}},`datetime`),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`}},`>`)])])])],-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('<h3 id="容器语法-1" tabindex="-1"><a class="header-anchor" href="#容器语法-1"><span>容器语法</span></a></h3><p>在 markdown 文件中使用 demo 容器包裹演示代码，可以快速地编写演示代码，如下：</p><details class="hint-container details"><summary>展开查看完整示例代码</summary><div class="language-md line-numbers-mode" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: demo title=&quot;示例&quot; desc=&quot;描述&quot; expanded</span></span>\n<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">json</span></span>\n<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">{</span></span>\n<span class="line"><span style="--shiki-light:#99841877;--shiki-dark:#B8A96577;"> &quot;</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">jsLib</span><span style="--shiki-light:#99841877;--shiki-dark:#B8A96577;">&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> [],</span></span>\n<span class="line"><span style="--shiki-light:#99841877;--shiki-dark:#B8A96577;"> &quot;</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">cssLib</span><span style="--shiki-light:#99841877;--shiki-dark:#B8A96577;">&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> []</span></span>\n<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">}</span></span>\n<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span></span>\n<span class="line"></span>\n<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">html</span></span>\n<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">&lt;!-- html 代码 --&gt;</span></span>\n<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span></span>\n<span class="line"></span>\n<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">js</span></span>\n<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">// js 代码</span></span>\n<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span></span>\n<span class="line"></span>\n<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">css</span></span>\n<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">/* css 代码 */</span></span>\n<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span></span>\n<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><p>还可以在 <code>::: demo</code> 中包裹 <code>::: code-tabs</code> 以获得更好的代码块展示效果：</p><details class="hint-container details"><summary>展开查看完整示例代码</summary><div class="language-md line-numbers-mode" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::: demo title=&quot;示例&quot; desc=&quot;描述&quot; expanded</span></span>\n<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">json</span></span>\n<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">{</span></span>\n<span class="line"><span style="--shiki-light:#99841877;--shiki-dark:#B8A96577;"> &quot;</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">jsLib</span><span style="--shiki-light:#99841877;--shiki-dark:#B8A96577;">&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> [],</span></span>\n<span class="line"><span style="--shiki-light:#99841877;--shiki-dark:#B8A96577;"> &quot;</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">cssLib</span><span style="--shiki-light:#99841877;--shiki-dark:#B8A96577;">&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> []</span></span>\n<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">}</span></span>\n<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span></span>\n<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: code-tabs</span></span>\n<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@tab HTML</span></span>\n<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">html</span></span>\n<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">&lt;!-- html 代码 --&gt;</span></span>\n<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span></span>\n<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@tab Javascript</span></span>\n<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">js</span></span>\n<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">// js 代码</span></span>\n<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span></span>\n<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@tab CSS</span></span>\n<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">css</span></span>\n<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">/* css 代码 */</span></span>\n<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span></span>\n<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span>\n<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::::</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><hr><p>一个常规的 容器示例：</p><p><strong>输入：</strong></p><details class="hint-container details"><summary>展开查看完整示例代码</summary><div class="language-md line-numbers-mode" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::: demo title=&quot;常规示例&quot; desc=&quot;一个常规示例&quot;</span></span>\n<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: code-tabs</span></span>\n<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@tab HTML</span></span>\n<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">html</span></span>\n<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">div</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> id</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">app</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>\n<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> &lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">h3</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">vuepress-theme-plume</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">h3</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>\n<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">div</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>\n<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span></span>\n<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@tab Javascript</span></span>\n<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">js</span></span>\n<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> a</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> &#39;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">So Awesome!</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</span></span>\n<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> app</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> document</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">querySelector</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">#app</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span>\n<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">app</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">appendChild</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">document</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">createElement</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">small</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)).</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">textContent</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> a</span></span>\n<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span></span>\n<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@tab CSS</span></span>\n<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">css</span></span>\n<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">#</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">app</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>\n<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> font-size</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 2</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">em</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>\n<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> text-align</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;"> center</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>\n<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">}</span></span>\n<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">```</span></span>\n<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span>\n<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::::</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><p><strong>输出：</strong></p>',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`}},`</`),l(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`h3`),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`}},`>`)])])])],-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(`<hr><p>引入 jQuery , dayjs 和 normalize.css 的示例:</p><p><strong>输入：</strong></p><details class="hint-container details"><summary>展开查看完整示例代码</summary><div class="language-md line-numbers-mode" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::: demo title=&quot;常规示例&quot; desc=&quot;一个常规示例&quot;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`\`\`</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">json</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">{</span></span>
<span class="line"><span style="--shiki-light:#99841877;--shiki-dark:#B8A96577;"> &quot;</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">jsLib</span><span style="--shiki-light:#99841877;--shiki-dark:#B8A96577;">&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> [</span></span>
<span class="line"><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> &quot;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span></span>
<span class="line"><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> &quot;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">https://cdn.jsdelivr.net/npm/dayjs@1.11.13/dayjs.min.js</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> ],</span></span>
<span class="line"><span style="--shiki-light:#99841877;--shiki-dark:#B8A96577;"> &quot;</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">cssLib</span><span style="--shiki-light:#99841877;--shiki-dark:#B8A96577;">&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> [</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">]</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">}</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`\`\`</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: code-tabs</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@tab HTML</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`\`\`</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">html</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">div</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> id</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">app</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> &lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">h3</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">vuepress-theme-plume</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">h3</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> &lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">p</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> id</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">message</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">p</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> &lt;</span><span style="--shiki-light:#B31D28;--shiki-dark:#FDAEB7;">datetime</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> id</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">datetime</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;&lt;/</span><span style="--shiki-light:#B31D28;--shiki-dark:#FDAEB7;">datetime</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">div</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`\`\`</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@tab Javascript</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`\`\`</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">js</span></span>
<span class="line"><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">$</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">#message</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">).</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">text</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">So Awesome!</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span>
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> datetime</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> $</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">#datetime</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span>
<span class="line"><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">setInterval</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(()</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =&gt;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> datetime</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">text</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">dayjs</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">().</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">format</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">YYYY-MM-DD HH:mm:ss</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">))</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">},</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 1000</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`\`\`</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@tab CSS</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`\`\`</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">css</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">#</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">app</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> font-size</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 2</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">em</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> text-align</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;"> center</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">}</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`\`\`</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::::</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><p><strong>输出：</strong></p>`,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`}},`</`),l(`span`,{style:{"--shiki-light":`#1E754F`,"--shiki-dark":`#4D9375`}},`h3`),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`}},`></`),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":`#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`}},`></`),l(`span`,{style:{"--shiki-light":`#B31D28`,"--shiki-dark":`#FDAEB7`}},`datetime`),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`}},`>`)])])])],-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(`<h2 id="markdown-演示" tabindex="-1"><a class="header-anchor" href="#markdown-演示"><span>Markdown 演示</span></a></h2><p>在页面中演示 markdown 源代码 和渲染结果。</p><h3 id="嵌入语法-3" tabindex="-1"><a class="header-anchor" href="#嵌入语法-3"><span>嵌入语法</span></a></h3><p><strong>输入：</strong></p><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;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">demo markdown title=&quot;公告板&quot; desc=&quot;公告板代码示例&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">](</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;">/.vuepress/bulletin.md</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span></code></pre></div><details class="hint-container details"><summary>展开查看 <code>/.vuepress/bulletin.md</code> 代码</summary><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;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: center</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-light-font-weight:bold;--shiki-dark:#666666;--shiki-dark-font-weight:bold;">**</span><span style="--shiki-light:#393A34;--shiki-light-font-weight:bold;--shiki-dark:#DBD7CAEE;--shiki-dark-font-weight:bold;">QQ 交流群：</span><span style="--shiki-light:#999999;--shiki-light-font-weight:bold;--shiki-dark:#666666;--shiki-dark-font-weight:bold;">**</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> [</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">792882761</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">](</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;">https://qm.qq.com/q/FbPPoOIscE</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">![</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">QQ qr_code</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">](</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;">/images/qq_qrcode.png</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">{width=&quot;618&quot; height=&quot;616&quot; style=&quot;width: 200px&quot;}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">您在使用过程中遇到任何问题，欢迎通过 </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">issue</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">](</span><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</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 反馈。也欢迎加入我们的 QQ 交流群一起讨论。</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span></code></pre></div></details><p><strong>输出：</strong></p>`,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":`#B56959`,"--shiki-dark":`#C98A7D`}},`QQ qr_code`),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(`<h3 id="容器语法-2" tabindex="-1"><a class="header-anchor" href="#容器语法-2"><span>容器语法</span></a></h3><p><strong>输入：</strong></p><details class="hint-container details"><summary>展开查看完整代码</summary><div class="language-md line-numbers-mode" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::: demo markdown title=&quot;公告板&quot; desc=&quot;公告板代码示例&quot;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`\`\`</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">md</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::: center</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-light-font-weight:bold;--shiki-dark:#666666;--shiki-dark-font-weight:bold;">**</span><span style="--shiki-light:#393A34;--shiki-light-font-weight:bold;--shiki-dark:#DBD7CAEE;--shiki-dark-font-weight:bold;">QQ 交流群：</span><span style="--shiki-light:#999999;--shiki-light-font-weight:bold;--shiki-dark:#666666;--shiki-dark-font-weight:bold;">**</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> [</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">792882761</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">](</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;">https://qm.qq.com/q/FbPPoOIscE</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">![</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">QQ qr_code</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">](</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;">/images/qq_qrcode.png</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">{width=&quot;618&quot; height=&quot;616&quot; style=&quot;width: 200px&quot;}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">您在使用过程中遇到任何问题，欢迎通过 </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">issue</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">](</span><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</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 反馈。也欢迎加入我们的 QQ 交流群一起讨论。</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">\`\`\`</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">::::</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><p><strong>输出：</strong></p>`,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":`#B56959`,"--shiki-dark":`#C98A7D`}},`QQ qr_code`),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};
Reference in New Issue View Git Blame Copy Permalink