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":"/guide/code/code-pen/","title":"Code Pen | 指南","lang":"zh-CN","frontmatter":{"title":"Code Pen","icon":"mingcute:codepen-line","createTime":"2024/04/04 10:41:58","permalink":"/guide/code/code-pen/","description":"主题支持在 Markdown 文件中嵌入 CodePen。 配置 此功能默认不启用，你可以在配置文件中启用它。 .vuepress/config.ts 语法 简单语法： 更多选项支持： preview: 是否渲染为预览模式 editable: 是否可编辑 tab: 默认显示的标签， 默认为 result，多个使用 , 分隔 theme: 主题， 可选值...","head":[["script",{"type":"application/ld+json"},"{\\"@context\\":\\"https://schema.org\\",\\"@type\\":\\"Article\\",\\"headline\\":\\"Code Pen\\",\\"image\\":[\\"\\"],\\"dateModified\\":\\"2025-10-07T15:13:09.000Z\\",\\"author\\":[]}"],["meta",{"property":"og:url","content":"https://theme-plume.vuejs.press/guide/code/code-pen/"}],["meta",{"property":"og:site_name","content":"Plume 主题"}],["meta",{"property":"og:title","content":"Code Pen"}],["meta",{"property":"og:description","content":"主题支持在 Markdown 文件中嵌入 CodePen。 配置 此功能默认不启用，你可以在配置文件中启用它。 .vuepress/config.ts 语法 简单语法： 更多选项支持： preview: 是否渲染为预览模式 editable: 是否可编辑 tab: 默认显示的标签， 默认为 result，多个使用 , 分隔 theme: 主题， 可选值..."}],["meta",{"property":"og:type","content":"article"}],["meta",{"property":"og:locale","content":"zh-CN"}],["meta",{"property":"og:locale:alternate","content":"en-US"}],["meta",{"property":"og:updated_time","content":"2025-10-07T15:13:09.000Z"}],["meta",{"property":"article:modified_time","content":"2025-10-07T15:13:09.000Z"}],["link",{"rel":"alternate","hreflang":"en-us","href":"https://theme-plume.vuejs.press/en/guide/code/code-pen/"}]]},"readingTime":{"minutes":0.74,"words":222},"git":{"createdTime":1712247346000,"updatedTime":1759849989000,"contributors":[{"name":"pengzhanbo","username":"pengzhanbo","email":"volodymyr@foxmail.com","commits":4,"avatar":"https://avatars.githubusercontent.com/pengzhanbo?v=4","url":"https://github.com/pengzhanbo"}],"changelog":[{"hash":"4d2361a7046214fe0f4e4af01831107fd00e38ad","time":1759849989000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"feat(theme)!: add collections support (#704)"},{"hash":"0fd6cac57412002f4d72dc10378789b529adc357","time":1742063370000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"refactor(theme): improve types and flat config (#524)"},{"hash":"b600e20ba975a55464bd75290ff02cfc66b8f52a","time":1714322245000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"docs: update docs"},{"hash":"4349ab023ca3762f521c33a04301aae39b6c102d","time":1712247346000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"docs: update doc"}]},"autoDesc":true,"filePathRelative":"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(`主题支持在 Markdown 文件中嵌入 `),o(`a`,{href:`https://codepen.io/`,target:`_blank`,rel:`noopener noreferrer`},`CodePen`),i(`。`)],-1),c[3]||=o(`h2`,{id:`配置`,tabindex:`-1`},[o(`a`,{class:`header-anchor`,href:`#配置`},[o(`span`,null,`配置`)])],-1),c[4]||=o(`p`,null,`此功能默认不启用，你可以在配置文件中启用它。`,-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(`
export default defineUserConfig({
  theme: plumeTheme({
    markdown: {
      codepen: true, 
    },
  })
})
`,1)]),c[5]||=a(`

语法

简单语法：

@[codepen](user/slash)

更多选项支持：

@[codepen preview editable tab="css,result" theme="dark" height="500px" width="100%"](user/slash)

示例

输入：

@[codepen](leimapapa/RwOZQOW)

输出：

`,10),n(_,{title:`Code Pen`,tab:`result`,width:`100%`,height:`400px`,user:`leimapapa`,slash:`RwOZQOW`}),c[6]||=a(`

预览模式：

输入：

@[codepen preview](leimapapa/RwOZQOW)

输出：

`,4),n(_,{title:`Code Pen`,tab:`result`,width:`100%`,height:`400px`,user:`leimapapa`,slash:`RwOZQOW`,preview:``}),c[7]||=a(`

编辑模式：

输入：

@[codepen editable tab="html,result"](leimapapa/RwOZQOW)

输出：

`,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};