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-B2_aU-dE.js

496 lines
224 KiB
JavaScript
Raw Blame History

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:`en-guide-repl-frontend-DemoContainer307`,setup(e){let t=u(0);return(e,n)=>(r(),o(`div`,y,[l(`p`,null,`Counter: `+f(t.value),1),l(`button`,{type:`button`,class:`btn`,onClick:n[0]||=e=>t.value+=1},` + 1 `)]))}}),[[`__scopeId`,`data-v-326617d7`]]),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-7ea333dd`]]),C={btn:`_btn_9kspd_1`},w=d({setup(){let e=u(0);return()=>n(`div`,{class:`counter`},[n(`p`,`Counter: ${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,` Counter: `+f(t.value),1),l(`button`,{type:`button`,class:`btn`,onClick:n[0]||=e=>t.value+=1},` + 1 `)]))}}),[[`__scopeId`,`data-v-59f57219`]]),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":"/en/guide/repl/frontend/","title":"Frontend Demo | Guide","lang":"en-US","frontmatter":{"title":"Frontend Demo","icon":"icon-park-outline:html-five","createTime":"2025/01/08 21:34:26","permalink":"/en/guide/repl/frontend/","description":"Legacy Frontend Code Demo Deprecated - Please Migrate to New Solution The legacy solution was provided by vuepress-plugin-md-enhance. We appreciate its support for code demos in...","head":[["script",{"type":"application/ld+json"},"{\\"@context\\":\\"https://schema.org\\",\\"@type\\":\\"Article\\",\\"headline\\":\\"Frontend Demo\\",\\"image\\":[\\"https://theme-plume.vuejs.press/images/qq_qrcode.png\\",\\"https://theme-plume.vuejs.press/images/qq_qrcode.png\\"],\\"dateModified\\":\\"2026-03-05T07:34:11.000Z\\",\\"author\\":[]}"],["meta",{"property":"og:url","content":"https://theme-plume.vuejs.press/en/guide/repl/frontend/"}],["meta",{"property":"og:site_name","content":"Plume Theme"}],["meta",{"property":"og:title","content":"Frontend Demo"}],["meta",{"property":"og:description","content":"Legacy Frontend Code Demo Deprecated - Please Migrate to New Solution The legacy solution was provided by vuepress-plugin-md-enhance. We appreciate its support for code demos in..."}],["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":"en-US"}],["meta",{"property":"og:locale:alternate","content":"zh-CN"}],["meta",{"property":"og:updated_time","content":"2026-03-05T07:34:11.000Z"}],["meta",{"property":"article:modified_time","content":"2026-03-05T07:34:11.000Z"}],["link",{"rel":"alternate","hreflang":"zh-cn","href":"https://theme-plume.vuejs.press/guide/repl/frontend/"}]]},"readingTime":{"minutes":7.45,"words":2234},"git":{"createdTime":1759995965000,"updatedTime":1772696051000,"contributors":[{"name":"pengzhanbo","username":"pengzhanbo","email":"volodymyr@foxmail.com","commits":2,"avatar":"https://avatars.githubusercontent.com/pengzhanbo?v=4","url":"https://github.com/pengzhanbo"}],"changelog":[{"hash":"9b9f8f3f77f8ec801e99e9aad8555bab2244dc63","time":1772696051000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"style: lint fix"},{"hash":"385059f214cb07fc9a098859e889432fb81f998b","time":1759995965000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"docs: update en docs (#708)"}]},"autoDesc":true,"filePathRelative":"en/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">Legacy Frontend Code Demo Deprecated - Please Migrate to New Solution</p><p>The legacy solution was provided by <a href="https://plugin-md-enhance.vuejs.press/zh/" target="_blank" rel="noopener noreferrer">vuepress-plugin-md-enhance</a>. We appreciate its support for code demos in the past. The code demo functionality in <code>vuepress-plugin-md-enhance</code> will be migrated to <a href="https://github.com/vuepress/ecosystem" target="_blank" rel="noopener noreferrer">vuepress/ecosystem</a>. For details, please refer to <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>Why Redesign?</summary><p>Frontend code demos are a highly useful feature, but the legacy implementation did not align with actual usage scenario expectations.</p><p>In the legacy solution, for example, <code>vue-demo</code> only supported simple Vue component demonstrations and could not directly import dependencies from the project. It relied on loading external scripts for additional functionality and did not provide full support for Vue SFC, being limited to simple code demonstrations.</p><p>Furthermore, script code compilation occurred in the browser runtime. It required loading <code>babel</code> from a CDN first, then performing the transformation via <code>babel</code>, which introduced additional waiting time. Additionally, for internal enterprise projects within an intranet environment that cannot access external resources, the demos failed to display properly.</p><p>In the new solution, all demo code is compiled and transformed during the Node.js runtime. Therefore, demo code can be displayed directly in the browser runtime without extra waiting time. Leveraging Node.js&#39;s powerful capabilities, it fully supports all features of Vue SFC and allows direct import of project dependencies, enabling richer demonstrations that better match real-world usage scenarios.</p></details><h2 id="overview" tabindex="-1"><a class="header-anchor" href="#overview"><span>Overview</span></a></h2><p>This feature supports embedding code demonstration functionality within pages. A frontend code demo consists of two main areas: <mark>Render Area</mark> and <mark>Code Area</mark>.</p><p>The <strong>Render Area</strong> displays the execution results of the code, including UI rendering and interactions. The <strong>Code Area</strong> displays the source code and is collapsed by default.</p><p>The theme provides support for three different types of frontend code demos:</p><ul><li><mark>Vue Component Demo</mark>: Supports demonstrations of <code>Vue</code> components. Write your demo code as you would a <code>Vue</code> component. It can be used to demonstrate external dependencies like component libraries or <code>Composables API</code>.</li><li><mark>Markdown Demo</mark>: Supports demonstrations of <code>Markdown</code>.</li><li><mark>Normal Code Demo</mark>: Supports native <code>HTML</code> + <code>JS/TS</code> + <code>CSS/Less/Sass/Stylus</code> code demos. Write your demo code as you would a web page.</li></ul><p>The theme also provides two different methods for writing demo code:</p><ul><li><p>Embed Demo Code Files:</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>Use simple embedding syntax to import demo code from files.</p></li><li><p>Inline Demo Code within Demo Container:</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>Write demo code directly within the markdown file, wrapped in a <code>demo</code> container.</p></li></ul><h2 id="configuration" tabindex="-1"><a class="header-anchor" href="#configuration"><span>Configuration</span></a></h2>',10),l(`p`,null,[u[1]||=s(`Frontend code demos are powered by `,-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,`Frontend code demos are disabled by default. You can enable them via configuration.`,-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="language-support" tabindex="-1"><a class="header-anchor" href="#language-support"><span>Language Support</span></a></h2><p>Code demos support the following languages:</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>For CSS preprocessor languages, you need to install the corresponding preprocessor in your project, such as <code>less</code>, <code>sass</code>, or <code>stylus</code>.</p><h2 id="embed-syntax" tabindex="-1"><a class="header-anchor" href="#embed-syntax"><span>Embed Syntax</span></a></h2><p>Different code demos use the same embed syntax, allowing you to quickly grasp their usage.</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;!-- Syntax --&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> is a fixed syntax format.</p><p><code>[type]</code> indicates the type and supports three different values:</p><ul><li><code>normal</code>: Normal code demo type. This is the default type when the <code>[type]</code> parameter is omitted.</li><li><code>vue</code>: Vue component demo type.</li><li><code>markdown</code>: Markdown demo type.</li></ul><p><code>url</code> indicates the path to the demo code file, which can be relative or absolute.</p>`,11),l(`ul`,null,[u[10]||=l(`li`,null,[s(`Relative paths start with `),l(`code`,null,`./`),s(` or `),l(`code`,null,`../`),s(` and are relative to the current markdown file's path.`)],-1),l(`li`,null,[u[6]||=s(`Absolute paths start with `,-1),u[7]||=l(`code`,null,`/`,-1),u[8]||=s(` and are resolved from the `,-1),i(d,{href:`../quick-start/project-structure.md#document-source-directory`},{default:e(()=>[...u[5]||=[s(`VuePress source directory path`,-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;!-- Normal Code Demo --&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 Component Demo --&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 Demo --&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>Additional parameters:</p><ul><li><p><code>title=&quot;xxx&quot;</code>: Demo title.</p></li><li><p><code>desc=&quot;xxx&quot;</code>: Demo description.</p></li><li><p><code>expanded</code>: Expand the code area.</p></li><li><p><code>code-setting=&quot;xxx&quot;</code>: Code settings. The value will be appended after \`\`\` [lang]\` and is used to add configurations to the code block.</p><p><code>code-setting=&quot;:lines-number&quot;</code> will add <code>:lines-number</code> after the code block, enabling line numbers.</p><p><code>code-setting=&quot;:collapsed-lines=10&quot;</code> will add <code>:collapsed-lines=10</code> after the code block, causing the code block to be collapsed starting from line 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;Title&quot; desc=&quot;Description&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-container-inline-demo" tabindex="-1"><a class="header-anchor" href="#demo-container-inline-demo"><span>Demo Container Inline Demo</span></a></h2><p>Demo container inline demos use the <code>demo</code> container to wrap the demo code, allowing quick writing of demo code within the markdown file:</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;!-- Code Block --&gt;</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">:::</span></span></code></pre></div><p>All parameters are the same as the <code>@[demo](url)</code> syntax.</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;!-- Normal Code Demo --&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 code --&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 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 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>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">&lt;!-- Vue Component Demo --&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 code --&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 Demo --&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 code --&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>You can also wrap code blocks with the <code>::: code-tabs</code> container within the <code>::: demo</code> container for better interactive presentation.</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 code --&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 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;">@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 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><p>When using TypeScript or <code>Less/Sass/Stylus</code>, simply modify the value of <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 code --&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 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;">@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 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><h2 id="vue-component-demo" tabindex="-1"><a class="header-anchor" href="#vue-component-demo"><span>Vue Component Demo</span></a></h2><p>Vue component demo is a powerful feature with no restrictions on the demo code—it ultimately depends on the <code>bundler</code>&#39;s support for Vue. You can directly import dependencies installed in your project within the demo code, just as you would when writing a component in a Vue project.</p><p>Therefore, you can use it directly to provide demonstration examples for your component library or for your <code>Composables API</code>.</p><h3 id="embed-syntax-1" tabindex="-1"><a class="header-anchor" href="#embed-syntax-1"><span>Embed Syntax</span></a></h3><p>You can directly embed a Vue component demo in a page using the following method:</p><p><strong>Input:</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;Counter&quot; desc=&quot;Click the +1 button to increment the counter by 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>View <code>./demo/Counter.vue</code> 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;"> Counter: {{ 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>Output:</strong></p>`,22),i(p,{type:`vue`,title:`Counter`,desc:`Click the +1 button to increment the counter by 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`}},` Counter: {{ 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>You can also embed a Vue component written in <code>.ts</code>:</p><p><strong>Input:</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;Counter&quot; desc=&quot;Click the +1 button to increment the counter by 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(`View `),l(`code`,null,`./demo/Counter.ts`),s(` Code`)],-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`}},`Counter: `),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,`Output:`)],-1),i(p,{type:`vue`,title:`Counter`,desc:`Click the +1 button to increment the counter by 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`}},`Counter: `),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">For components written in <code>.js/.ts</code>, use <code>CSS Module</code> to write styles for style isolation.</p></div><hr><p>You can import external dependencies in the demo code. Example using <code>useToggle()</code> from <code>@vueuse/core</code>:</p><p><strong>Input:</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() Demo&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>Output:</strong></p>`,7),i(p,{type:`vue`,title:`useToggle`,desc:`useToggle() Demo`},{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="container-syntax" tabindex="-1"><a class="header-anchor" href="#container-syntax"><span>Container Syntax</span></a></h3><p>Using the <code>demo</code> container to wrap demo code in a markdown file allows for quick demo code writing:</p><p><strong>Input:</strong></p><details class="hint-container details"><summary>Expand to view full code</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;Counter&quot; desc=&quot;Click the +1 button to increment the counter by 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;Counter: {{ 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>Output:</strong></p>`,5),i(p,{type:`vue`,title:`Counter`,desc:`Click the +1 button to increment the counter by 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`}},`Counter: {{ 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">Warning</p><p>The Vue demo container syntax also supports embedding demo code using the <code>.js/ts + css</code> approach, but this is not recommended by the theme. Styles cannot be isolated, which may lead to style pollution.</p><details class="hint-container details"><summary>Reference Example</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;Title&quot; desc=&quot;Description&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="normal-code-demo" tabindex="-1"><a class="header-anchor" href="#normal-code-demo"><span>Normal Code Demo</span></a></h2><p>Normal code demos support <code>html</code>, <code>css/less/sass/stylus</code>, and <code>js/ts</code> languages.</p><p>They are suitable for relatively simple code demonstrations, such as a style rendering effect, an interaction effect, or a functionality.</p><p>Normal code demos also support jumping to <code>CodePen</code> and <code>jsFiddle</code> for viewing.</p><p>Additionally, they support importing third-party libraries via external links, such as <code>jQuery</code> or <code>dayjs</code>.</p><div class="hint-container warning"><p class="hint-container-title">Overly complex demonstrations are not recommended.</p></div><h3 id="embed-syntax-2" tabindex="-1"><a class="header-anchor" href="#embed-syntax-2"><span>Embed Syntax</span></a></h3><p>When using the embed syntax, use <code>.html</code> as the file suffix for the imported demo code file. In the <code>.html</code> file, you can write the demo code as you would an HTML page:</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 code --&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;"> Demo Content</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;!-- Script content, use lang attribute to set language, defaults to 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;!-- Style content, use lang attribute to set language, defaults to 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;!-- Optional configuration file in json format --&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>Each section is optional. However, note that multiple identical sections are not supported. The order of sections does not matter. Content outside of <code>&lt;script&gt;</code> and <code>&lt;style&gt;</code> is considered HTML code.</p><p>You can declare additional dependency resources to load using JSON format within <code>&lt;script type=&quot;config&quot;&gt;&lt;/script&gt;</code>.</p><p>For example, loading <code>jQuery</code> and <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>A conventional example:</p><p><strong>Input:</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;Example&quot; desc=&quot;This is a conventional demo&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>View <code>./demo/normal.html</code> 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>Output:</strong></p>`,20),i(y,{config:a(v),title:`Example`,desc:`This is a conventional demo`},{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>Example introducing <code>jQuery</code>, <code>dayjs</code>, and <code>normalize.css</code>:</p><p><strong>Input:</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;Example&quot; desc=&quot;This is a conventional demo&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>View <code>./demo/normal-lib.html</code> 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>Output:</strong></p>`,6),i(y,{config:a(_),title:`Example`,desc:`This is a conventional demo`},{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="container-syntax-1" tabindex="-1"><a class="header-anchor" href="#container-syntax-1"><span>Container Syntax</span></a></h3><p>Using the demo container to wrap demo code in a markdown file allows for quick demo code writing:</p><details class="hint-container details"><summary>Expand to view full example code</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;Example&quot; desc=&quot;Description&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 code --&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 code</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 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 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>You can also wrap <code>::: code-tabs</code> within <code>::: demo</code> for better code block presentation:</p><details class="hint-container details"><summary>Expand to view full example code</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;Example&quot; desc=&quot;Description&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 code --&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 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;">@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 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>\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>A conventional container example:</p><p><strong>Input:</strong></p><details class="hint-container details"><summary>Expand to view full example code</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;Conventional Example&quot; desc=&quot;A conventional example&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>Output:</strong></p>',10),i(y,{config:a(g),title:`Conventional Example`,desc:`A conventional example`},{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>Example introducing jQuery, dayjs, and normalize.css:</p><p><strong>Input:</strong></p><details class="hint-container details"><summary>Expand to view full example code</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;Conventional Example&quot; desc=&quot;A conventional example&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>Output:</strong></p>`,5),i(y,{config:a(h),title:`Conventional Example`,desc:`A conventional example`},{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-demo" tabindex="-1"><a class="header-anchor" href="#markdown-demo"><span>Markdown Demo</span></a></h2><p>Demonstrate markdown source code and rendering results within a page.</p><h3 id="embed-syntax-3" tabindex="-1"><a class="header-anchor" href="#embed-syntax-3"><span>Embed Syntax</span></a></h3><p><strong>Input:</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;Bulletin Board&quot; desc=&quot;Bulletin Board Code Example&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>Expand to view <code>/.vuepress/bulletin.md</code> 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>Output:</strong></p>`,7),i(p,{type:`markdown`,title:`Bulletin Board`,desc:`Bulletin Board Code Example`},{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="container-syntax-2" tabindex="-1"><a class="header-anchor" href="#container-syntax-2"><span>Container Syntax</span></a></h3><p><strong>Input:</strong></p><details class="hint-container details"><summary>Expand to view full code</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;Bulletin Board&quot; desc=&quot;Bulletin Board Code Example&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 Group:</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;">If you encounter any issues during use, please feel free to provide feedback via </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;">. You are also welcome to join our QQ group for discussion.</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>Output:</strong></p>`,4),i(p,{type:`markdown`,title:`Bulletin Board`,desc:`Bulletin Board Code Example`},{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 Group:`),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`}},`If you encounter any issues during use, please feel free to provide feedback via `),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`}},`. You are also welcome to join our QQ group for discussion.`)]),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 Group:`),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(`If you encounter any issues during use, please feel free to provide feedback via `),l(`a`,{href:`https://github.com/pengzhanbo/vuepress-theme-plume/issues/new/choose`,target:`_blank`,rel:`noopener noreferrer`},`issue`),s(`. You are also welcome to join our QQ group for discussion.`)])],-1)]),_:1})])}}});export{j as _pageData,M as default};
Reference in New Issue View Git Blame Copy Permalink