Browser docs

CodePen

Hugo Modules Authors April 2, 2023 1 min read Shortcode Docs Code Editor CodePen CSS HTML JS JavaScript
On this page

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

Usage

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

Parameters

PositionNameTypeRequiredDefaultDescription
#0userstringYYour fiddle user ID.
#1idstringYYou fiddle ID/hash.
themestringlight or dark.
defaultTabsstringhtml,resultDefault tabs separated by comma, js, html, css and result.
heightnumber300Frame height.

Examples

1{{< codepen razonyang YzWGJNQ >}}

CodePen with Custom Default Tabs

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

CodePen with Light Theme

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

CodePen with Custom Default Tabs and Dark Theme

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