Browser docs

JSFiddle

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

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

Usage

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

Parameters

PositionNameTypeRequiredDefaultDescription
#0userstringYYour fiddle user ID.
#1idstringYYou fiddle ID/hash.
themestringlightlight or dark.
tabsstringjs,html,css,resultTabs separated by comma.

Examples

It’s recommended using the ratio shortcode to wrap JSFiddle frame if you’re using Bootstrap.

1{{< bs/ratio 21x9 >}}
2  {{< jsfiddle razonyang 6cp7xof1 >}}
3{{< /bs/ratio >}}

JSFiddle with Custom Tabs

1{{< bs/ratio 21x9 >}}
2  {{< jsfiddle user=razonyang id=6cp7xof1 tabs=html,css,result >}}
3{{< /bs/ratio >}}

JSFiddle with Dark Theme

1{{< bs/ratio 21x9 >}}
2  {{< jsfiddle user=razonyang id=6cp7xof1 theme=dark >}}
3{{< /bs/ratio >}}

JSFiddle with Custom Tabs and Dark Theme

1{{< bs/ratio 21x9 >}}
2  {{< jsfiddle user=razonyang id=6cp7xof1 tabs=html,css,result theme=dark >}}
3{{< /bs/ratio >}}