index.md

title	linkTitle	nav_weight	featured	pinned	date	draft	series	categories	tags	authors	images
JSFiddle	JSFiddle	1000	false	false	2023-04-02 10:45:02 +0800	false	Docs	Shortcode	Code Editor JSFiddle CSS HTML JS JavaScript	HugoMods

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

Usage

{{</* jsfiddle [user] [id] */>}}

Parameters

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	light or dark.
	tabs	string		js,html,css,result	Tabs separated by comma.

Examples

It's recommended using the [ratio]({{< relref "bootstrap/ratio" >}}) shortcode to wrap JSFiddle frame if you're using Bootstrap.

{{</* bs/ratio 21x9 */>}}
  {{</* jsfiddle razonyang 6cp7xof1 */>}}
{{</* /bs/ratio */>}}

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

JSFiddle with Custom Tabs

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

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

JSFiddle with Dark Theme

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

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

JSFiddle with Custom Tabs and Dark Theme

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

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