CodePen 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.

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:

Infusion also supports the ability to write inline demos directly in markdown files. See Writing inline demos .