Demo embedding
Sometimes just pictures of the pattern you’re documenting aren’t enough. Interactive patterns benefit from live demos, so that readers can test their functionality.
CodePen
Infusion offers a couple of ways to do this. The first is by embedding CodePen demos into the content. The codePen
shortcode takes just one argument: the codePen’s ID
.
{{% codePen VpVNKW %}}
This will embed the identified codePen into the content wherever you placed the shortcode, with the result view showing by default:
jsBin
You can embed JS Bins just like CodePens, supplying a single id
parameter.
{{% jsBin juwowaq %}}
However, you can also have finer control over which panes are displayed. Use two parameters: one for the id
and another, show
, listing the panes you want to include.
{{% jsBin id="juwowaq" show="css,output" %}}
The options for the show
parameter are:
- html
- css
- js
- console
- output
(Note that, under some circumstances, the html
pane is added whether you select it or not.)
Inline demos
Infusion also supports the ability to write inline demos directly in markdown files. See Writing inline demos.