View source for Widget: Katacoda

<noinclude>
This widget allows you to add an embedded Katacoda course to your wiki page.

== Using this widget ==
To use this widget, take the course number and plug into into the #widget parser syntax as the data-katacoda-id parameter.

Example #widget syntax:
<pre>
{{#widget:Katacoda|divid=myScenario|scenario=docker/deploying-first-container}}
</pre>

Resulting in this embedded code:
<pre>
<p class="katacoda-caption><script src="//katacoda.com/embed.js"></script></p>
<div id="myScenario" data-katacoda-id="docker/deploying-first-container" data-katacoda-color="004d7f" style="height: 600px; padding-top: 0px;"></div>
</pre>

These are the available parameters:
* scenario - mandatory; the Katacoda scenario ID (including username and scenario name)
* divid - optional; unique ID for the div containing your Katacoda scenario; defaults to value of the scenario parameter
* height - optional; height for the div containing your Katacoda scenario; defaults to 600px
<!--
* caption - optional; caption preceding Katacoda div; you can define the style separately
* color - optional; hex value passed to Katacoda; defaults to 004d7f
* padding - optional; top padding for the div containing your Katacoda scenario; defaults to 0px
-->

== Copy to your site ==
To use this widget on your site, just install the [https://www.mediawiki.org/wiki/Extension:Widgets MediaWiki Widgets extension] and the copy [{{fullurl:{{FULLPAGENAME}}|action=edit}} full source code] of this page to your wiki, as an article called '''{{FULLPAGENAME}}'''.
</noinclude>

<includeonly><p class="katacoda-caption"><!--{$caption|escape:'html'}--><script src="//katacoda.com/embed.js"></script></p><div id="<!--{$divid|escape:'html'|default:$scenario}-->" data-katacoda-id="<!--{$scenario|escape:'html'}-->" data-katacoda-color="<!--{$color|escape:'html'|default:'004d7f'}-->" style="height: <!--{$height|escape:'html'|default:'600px'}-->; padding-top: <!--{$padding|escape:'html'|default:'0px'}-->;"></div></includeonly>