cupper-hugo-theme/content/patterns/coding/code-blocks.md

27 lines
976 B
Markdown
Raw Normal View History

2017-06-28 17:46:25 +02:00
+++
title = "Code blocks"
2017-07-04 12:17:09 +02:00
weight = 1
2017-06-28 17:46:25 +02:00
+++
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…
{{<codeBlock>}}
```html
&lt;button aria-pressed="false">toggle me&lt;/button>
```
{{</codeBlock>}}
&hellip; will result in this:
```html
<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.
2017-08-15 10:55:30 +02:00
{{% 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 %}}