CodePen

On this page

Donate

Please check out the tutorial to start using Hugo modules.

This shortcode add support for CodePen, a online code editor for testing your JavaScript, CSS, HTML.

Usage

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

Position	Name	Type	Required	Default	Description
`#0`	`user`	string	Y		Your fiddle user ID.
`#1`	`id`	string	Y		You fiddle ID/hash.
	`theme`	string			`light` or `dark`.
	`defaultTabs`	string		`html,result`	Default tabs separated by comma, `js`, `html`, `css` and `result`.
	`height`	number	`300`	Frame height.

1{{< codepen razonyang YzWGJNQ >}}

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

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

1{{< bs/ratio 21x9 >}}
2  {{< codepen user=razonyang id=YzWGJNQ defaultTabs=js,result theme=dark >}}
3{{< /bs/ratio >}}