3.0 KiB
+++ title = "Code blocks" weight = 1 +++
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…
{{}}
<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.
{{% note %}}
To preserve the wrapping inside code blocks, horizontal scrolling is implemented. To make sure scrolling is keyboard accessible, code blocks are focusable. An aria-label is provided to identify the code block to screen reader users.
{{% /note %}}
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:
{{<html>}}
Confirmation
Press Okay to confirm or Cancel
Okay CancelYou 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 enumberated so you can reference it directly in the ensuing text.
{{<html numbered="true">}}
Confirmation
Press Okay to confirm or Cancel
Okay CancelYou 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>}} {{}}