CodePen

将 CodePen 项目嵌入到 VitePress 页面中。

安装

pnpm

pnpm add vitepress-plugin-codepen

npm

npm install vitepress-plugin-codepen

bun

bun add vitepress-plugin-codepen

deno

deno add vitepress-plugin-codepen

yarn

yarn add vitepress-plugin-codepen

使用

vitepress-tuck 模式 推荐

.vitepress/config.ts

import { defineConfig } from 'vitepress-tuck'
import codepen from 'vitepress-plugin-codepen'

export default defineConfig({
  plugins: [codepen()],
})

查看 vitepress-tuck 了解更多

传统模式

.vitepress/config.ts

import { defineConfig } from 'vitepress'
import { codepenPlugin } from 'vitepress-plugin-codepen'

export default defineConfig({
  markdown: {
    config: (md) => {
      md.use(codepenPlugin)
    },
  },
})

.vitepress/theme/index.ts

import type { Theme } from 'vitepress'
import { enhanceAppWithCodepen } from 'vitepress-plugin-codepen/client'
import DefaultTheme from 'vitepress/theme'

export default {
  extends: DefaultTheme,
  enhanceApp(ctx) {
    enhanceAppWithCodepen(ctx)
  },
} satisfies Theme

语法

基本用法

@[codepen](user/slash)

带配置的用法

@[codepen preview editable title="示例" height="400px" tab="css,result" theme="dark"](leimapapa/RwOZQOW)

属性说明

属性	类型	默认值	说明
title	string	-	标题
user	string	-	CodePen 用户名（从链接解析）
slash	string	-	Pen 标识符（从链接解析）
tab	string	'result'	默认显示的标签页
theme	string	-	主题
preview	boolean	false	预览模式
editable	boolean	false	可编辑模式
width	string	'100%'	宽度
height	string	-	高度

示例

@[codepen](leimapapa/RwOZQOW)