hugopoi
/
cupper-hugo-theme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
cupper-hugo-theme/content/patterns/coding/code-blocks.md

3.1 KiB
Raw Blame History

+++ 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>}}

x

Confirmation

Press Okay to confirm or Cancel

Okay Cancel
{{</html>}}

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.

{{<html numbered="true">}}

x

Confirmation

Press Okay to confirm or Cancel

Okay Cancel
{{</html>}}

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>}} {{}}

{{% note %}} As you may have noticed, using specified highlights with the html shortcode sacrifices syntax highlighting. {{% /note %}}