<description>Markdown already supports code samples both inline (using single backticks like `some code here`) and in blocks. Infusion will syntax highlight HTML, CSS, and JavaScript if you provide the correct language in the formulation of the block.
So, this&hellip;
```html &lt;button aria-pressed="false"toggle me&lt;/button ``` &hellip; will result in this:
&lt;button aria-pressed=&quot;false&quot;&gt;toggle me&lt;/button&gt; Note that the syntax highlighting uses a greyscale theme. Infusion is careful not to use color as part of its own design, because these colors may clash with those of the design being illustrated and discussed.</description>
<description>Sometimes just pictures of the pattern you&rsquo;re documenting aren&rsquo;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&rsquo;s ID.
&#x7b;{% codePen VpVNKW %}} This will embed the identified codePen into the content wherever you placed the shortcode, with the result view showing by default:</description>
<description>There are some issues with CodePen embedding, like them not working offline. They also come with CodePen branding, which will clash with the pattern you&rsquo;re trying to illustrate.
Infusion offers another option: a special demo shortcode that allows you to write HTML, CSS, and JavaScript directly into the markdown file. The outputted demo is encapsulated using Shadow DOM, so you don&rsquo;t have to worry about broken styles and global JS.</description>
<description>There&rsquo;s no reason why your Infusion-powered pattern library has to be all about functionality. You can include style guide-like information such as color palettes too. The colors shortcode makes it easy to exhibit colors and their values together. Just supply a comma-separated list of CSS color values.
&#x7b;{% colors "#111111, #cccccc, #ffffff" %}} The result is a one row strip showing each color supplied in order. The colors for Infusion are greyscale:</description>
<description>When you&rsquo;re an inclusive designer, it&rsquo;s pertinent to do some testing. Following specs is one thing, but you need to verify that your component works okay for users.
Infusion provided a tested shortcode that let&rsquo;s you show which browsers and assistive technologies you&rsquo;ve tried your design out in. Here&rsquo;s an example. Note the commas and &ldquo;+&rdquo; signs.
