Allows to easily embed Fiddles using a small shortcode.

Sheikh Heera

WP Fiddle

Users can insert JSFiddle in to a post/page of their blog via a button on the editor or shortcode.

Willington Vega

<p>Allows to easily embed Fiddles using a small shortcode.</p>
<h3>Usage:</h3>
<pre><code>[jsfiddle url="https://jsfiddle.net/wvega/UupFu/" height="300px" include="result,html,js,css" font-color="39464E" menu-background-color="FFFFFF" code-background-color="f3f5f6" accent-color="1C90F3"]
</code></pre>
<ul>
<li>All attributes are optional.</li>
<li><code>url</code> is the URL of the fiddle you want to embed, with or without trailing slash.</li>
<li><code>include</code> can be any combination of <code>result, html, js and css</code>, separated by commas; the tabs in the embedded fiddle will follow the order specified with the <code>include</code> attribute.</li>
<li><code>font-color</code> is the color used for the name of the tabs.</li>
<li><code>menu-background-color</code> is the color used for the background of the tabs.</li>
<li><code>code-background-color</code> is the color used for the background of the area where the code and results are shown.</li>
<li><code>accent-color</code> is the color of the indicator shown below the active tab.</li>
</ul>
<h3>Result:</h3>
<pre><code><iframe style="width: 100%; height: 300px" src="https://jsfiddle.net/wvega/UupFu/embedded/result,html,js,css/?fontColor=39464E&menuColor=FFFFFF&bodyColor=f3f5f6&accentColor=1C90F3"></iframe>
</code></pre>


Alternatives to JSFiddle Shortcode

Top alternatives