<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.
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&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 , 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>Your pattern documentation may need to include commands for installing packages or using CLIs. Infusion offers the cmd shortcode for making code blocks look like terminal commands.
Here&rsquo;s how you write it:
&#x7b;{&lt;cmd}} npm run start &#x7b;{&lt;/cmd}} And here&rsquo;s how it looks:
npm run start The cmd shortcode currently only supports single commands. If you want to show multiple, successive commands use separate cmd blocks.
<description>Representing folder/file structures is simple and accessible in Infusion. Which is just as well, because some components may need to conform to a certain folder structure.
The file tree is described using a markdown nested list structure:
<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 lets 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.
