CodePen

Add support for CodePen, a online code editor for testing your JavaScript, CSS, HTML.

Syntax

1{{< codepen [user] [id] >}}

Parameters

user

PositionNameTypeRequiredDefaultSince
#0userstring--

User ID.

id

PositionNameTypeRequiredDefaultSince
#1idstring--

Pen ID.

theme

PositionNameTypeRequiredDefaultSince
-themestring---

Theme.

Available options: light, dark.

defaultTabs

PositionNameTypeRequiredDefaultSince
-defaultTabsstring-html,result-

The default comma-separated tabs.

Available options: js, html, css, result.

height

PositionNameTypeRequiredDefaultSince
-heightnumber-300-

Frame height.

Examples

Source
1{{< codepen razonyang YzWGJNQ >}}
Result

CodePen with Custom Default Tabs

Source
1{{< codepen user=razonyang id=YzWGJNQ defaultTabs=css,result >}}
Result

CodePen with Light Theme

Source
1{{< codepen user=razonyang id=YzWGJNQ theme=light >}}
Result

CodePen with Custom Default Tabs and Dark Theme

Source
1{{< codepen user=razonyang id=YzWGJNQ defaultTabs=js,result theme=dark >}}
Result