# Coding on Infusion

https://heydon.github.io/infusion/patterns/coding/ Recent content in Coding on Infusion Hugo -- gohugo.io en-us

# Code blocks

https://heydon.github.io/infusion/patterns/coding/code-blocks/ Mon, 01 Jan 0001 00:00:00 +0000

https://heydon.github.io/infusion/patterns/coding/code-blocks/
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.

# CodePen embedding

https://heydon.github.io/infusion/patterns/coding/codepen-embedding/ Mon, 01 Jan 0001 00:00:00 +0000

https://heydon.github.io/infusion/patterns/coding/codepen-embedding/
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:

# Writing inline demos

https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/ Mon, 01 Jan 0001 00:00:00 +0000

https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/
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.

# Color palettes

https://heydon.github.io/infusion/patterns/coding/color-palettes/ Mon, 01 Jan 0001 00:00:00 +0000

https://heydon.github.io/infusion/patterns/coding/color-palettes/
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:

# Tested using...

https://heydon.github.io/infusion/patterns/coding/tested/ Mon, 01 Jan 0001 00:00:00 +0000

https://heydon.github.io/infusion/patterns/coding/tested/
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. &#x7b;{% tested using="Firefox Android + NVDA, Chrome, Safari iOS + Voiceover, Edge" %}} This outputs: