CodePen
Add support for CodePen, a online code editor for testing your JavaScript, CSS, HTML.
Donate
Become a backer or sponsor to support our work.
On this page
Sponsors
Syntax
1{{< codepen [user] [id] >}}
Parameters
user
| Position | Name | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
#0 | user | string | ✓ | - | - | - |
User ID.
id
| Position | Name | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
#1 | id | string | ✓ | - | - | - |
Pen ID.
theme
| Position | Name | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
| - | theme | string | - | - | - | - |
Theme.
Available options: light, dark.
defaultTabs
| Position | Name | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
| - | defaultTabs | string | - | html,result | - | - |
The default comma-separated tabs.
Available options: js, html, css, result.
height
| Position | Name | Type | Required | Default | Since | Example |
|---|---|---|---|---|---|---|
| - | height | number | - | 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