vuepress-theme-plume/assets/codepen-CMH4-vzB.js

import{B as e,P as t,_ as n,f as r,g as i,h as a,l as o}from"./runtime-core.esm-bundler-CZvn3YaB.js";import{t as s}from"./plugin-vue_export-helper-CxTVcLa7.js";var c=JSON.parse(`{"path":"/en/guide/code/code-pen/","title":"Code Pen | Guide","lang":"en-US","frontmatter":{"title":"Code Pen","icon":"mingcute:codepen-line","createTime":"2025/10/08 10:41:58","permalink":"/en/guide/code/code-pen/","description":"The theme supports embedding CodePen in Markdown files. Configuration This feature is disabled by default. You can enable it in the configuration file. .vuepress/config.ts Synta...","head":[["script",{"type":"application/ld+json"},"{\\"@context\\":\\"https://schema.org\\",\\"@type\\":\\"Article\\",\\"headline\\":\\"Code Pen\\",\\"image\\":[\\"\\"],\\"dateModified\\":\\"2025-10-09T07:46:05.000Z\\",\\"author\\":[]}"],["meta",{"property":"og:url","content":"https://theme-plume.vuejs.press/en/guide/code/code-pen/"}],["meta",{"property":"og:site_name","content":"Plume Theme"}],["meta",{"property":"og:title","content":"Code Pen"}],["meta",{"property":"og:description","content":"The theme supports embedding CodePen in Markdown files. Configuration This feature is disabled by default. You can enable it in the configuration file. .vuepress/config.ts Synta..."}],["meta",{"property":"og:type","content":"article"}],["meta",{"property":"og:locale","content":"en-US"}],["meta",{"property":"og:locale:alternate","content":"zh-CN"}],["meta",{"property":"og:updated_time","content":"2025-10-09T07:46:05.000Z"}],["meta",{"property":"article:modified_time","content":"2025-10-09T07:46:05.000Z"}],["link",{"rel":"alternate","hreflang":"zh-cn","href":"https://theme-plume.vuejs.press/guide/code/code-pen/"}]]},"readingTime":{"minutes":0.57,"words":170},"git":{"createdTime":1759995965000,"updatedTime":1759995965000,"contributors":[{"name":"pengzhanbo","username":"pengzhanbo","email":"volodymyr@foxmail.com","commits":1,"avatar":"https://avatars.githubusercontent.com/pengzhanbo?v=4","url":"https://github.com/pengzhanbo"}],"changelog":[{"hash":"385059f214cb07fc9a098859e889432fb81f998b","time":1759995965000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"docs: update en docs (#708)"}]},"autoDesc":true,"filePathRelative":"en/guide/repl/codepen.md","headers":[],"bulletin":false}`),l={name:`codepen.md`},u={class:`code-block-title`,"data-title":`.vuepress/config.ts`},d={class:`code-block-title-bar`},f={class:`title`};function p(s,c,l,p,m,h){let g=e(`VPIcon`),_=e(`CodePenViewer`);return t(),r(`div`,null,[c[2]||=o(`p`,null,[i(`The theme supports embedding `),o(`a`,{href:`https://codepen.io/`,target:`_blank`,rel:`noopener noreferrer`},`CodePen`),i(` in Markdown files.`)],-1),c[3]||=o(`h2`,{id:`configuration`,tabindex:`-1`},[o(`a`,{class:`header-anchor`,href:`#configuration`},[o(`span`,null,`Configuration`)])],-1),c[4]||=o(`p`,null,`This feature is disabled by default. You can enable it in the configuration file.`,-1),o(`div`,u,[o(`div`,d,[o(`span`,f,[n(g,{provider:`iconify`,name:`vscode-icons:file-type-typescript`}),c[0]||=i(`.vuepress/config.ts`,-1)])]),c[1]||=a(`<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-highlighted 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 highlighted"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">      codepen</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)]),c[5]||=a(`<h2 id="syntax" tabindex="-1"><a class="header-anchor" href="#syntax"><span>Syntax</span></a></h2><p>Basic syntax:</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;">codepen</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;">user/slash</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span></code></pre></div><p>Extended options support:</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;">codepen preview editable tab=&quot;css,result&quot; theme=&quot;dark&quot; height=&quot;500px&quot; width=&quot;100%&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;">user/slash</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span></code></pre></div><ul><li><code>preview</code>: Whether to render in preview mode</li><li><code>editable</code>: Whether the content is editable</li><li><code>tab</code>: Default active tabs, defaults to <code>result</code>, multiple tabs separated by <code>,</code></li><li><code>theme</code>: Theme, options: <code>dark</code> and <code>light</code></li><li><code>height</code>: Container height, defaults to <code>400px</code></li><li><code>width</code>: Container width, defaults to <code>100%</code></li><li><code>user</code>: CodePen username</li><li><code>slash</code>: CodePen pen slug/identifier</li></ul><h2 id="examples" tabindex="-1"><a class="header-anchor" href="#examples"><span>Examples</span></a></h2><p>Input:</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;">codepen</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;">leimapapa/RwOZQOW</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span></code></pre></div><p>Output:</p>`,10),n(_,{title:`Code Pen`,tab:`result`,width:`100%`,height:`400px`,user:`leimapapa`,slash:`RwOZQOW`}),c[6]||=a(`<p><strong>Preview Mode:</strong></p><p>Input:</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;">codepen preview</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;">leimapapa/RwOZQOW</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span></code></pre></div><p>Output:</p>`,4),n(_,{title:`Code Pen`,tab:`result`,width:`100%`,height:`400px`,user:`leimapapa`,slash:`RwOZQOW`,preview:``}),c[7]||=a(`<p><strong>Editable Mode:</strong></p><p>Input:</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;">codepen editable tab=&quot;html,result&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;">leimapapa/RwOZQOW</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span></code></pre></div><p>Output:</p>`,4),n(_,{title:`Code Pen`,tab:`html,result`,width:`100%`,height:`400px`,user:`leimapapa`,slash:`RwOZQOW`,editable:``})])}var m=s(l,[[`render`,p]]);export{c as _pageData,m as default};