CodePen

Embed CodePen projects into VitePress pages.

Installation

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

Usage

vitepress-tuck Mode Recommended

.vitepress/config.ts

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

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

Learn more about vitepress-tuck

Native Mode

.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

Syntax

Basic Usage

@[codepen](user/slash)

With Options

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

Attribute Reference

Attribute	Type	Default	Description
title	string	-	Title
user	string	-	CodePen username (parsed from link)
slash	string	-	Pen identifier (parsed from link)
tab	string	'result'	Default tab to display
theme	string	-	Theme
preview	boolean	false	Preview mode
editable	boolean	false	Editable mode
width	string	'100%'	Width
height	string	-	Height

Example

@[codepen](leimapapa/RwOZQOW)