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…


```html
<button aria-pressed="false">toggle me</button>
```

… will result in this:

<button aria-pressed="false">toggle me</button>

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.

Annotated HTML

Since the structure of HTML is critical to interoperable web interfaces, Infusion offers the ability to highlight and annotate specific HTML elements and attributes using the html shortcode.

Take an accessible dialog. You may wish to point out key attributes that make that dialog support assistive technologies:


<div role="dialog" aria-labelledby="dialog-heading">
  <button aria-label="close">x</button>
  <h2 id="dialog-heading">Confirmation</h2>
  <p>Press <strong>Okay</strong> to confirm or <strong>Cancel</strong></p>
  <button>Okay</button>
  <button>Cancel</button>
</div>

You mark out the highlighted areas with double parentheses like so:


{{<html>}}
<div ((role="dialog")) ((aria-labelledby="dialog-heading"))>
  <button ((aria-label="close"))>x</button>
  <h2 ((id="dialog-heading"))>Confirmation</h2>
  <p>Press Okay to confirm or Cancel</p>
  <button>Okay</button>
  <button>Cancel</button>
</div>
{{</html>}}

Better still, if you include numbered="true", each highlight is enumerated so you can reference it directly in the ensuing text.


<div role="dialog" aria-labelledby="dialog-heading">
  <button aria-label="close">x</button>
  <h2 id="dialog-heading">Confirmation</h2>
  <p>Press <strong>Okay</strong> to confirm or <strong>Cancel</strong></p>
  <button>Okay</button>
  <button>Cancel</button>
</div>

You just include numbered="true" on the opening shortcode tag:


{{<html numbered="true">}}
<div ((role="dialog")) ((aria-labelledby="dialog-heading"))>
  <button ((aria-label="close"))>x</button>
  <h2 ((id="dialog-heading"))>Confirmation</h2>
  <p>Press Okay to confirm or Cancel</p>
  <button>Okay</button>
  <button>Cancel</button>
</div>
{{</html>}}