Code Block

Text

Overview

A multi-line code sample: ink ground, paper text, 1rem mono at weight 500 and 1.6 leading, radius and a faint accent edge.

Syntax colors, all on ink (#16161A):

Live example

<dialog id="demo" aria-labelledby="demo-title">
  <h2 id="demo-title">A modal dialog</h2>
  <button type="button" command="close" commandfor="demo">
    Close dialog
  </button>
</dialog>

Usage

• Plain text and punctuation: paper or #FFF9F5, 17.29:1 or better.
• Comments: #FFFFFF in italic, 18.04:1.
• Attribute names and numbers: #F4D58D, 12.67:1.
• Functions and types: #B3DFE0, 12.50:1.
• Tags and keywords: #FFCBBD, 12.48:1.
• Strings and class names: #DDD2ED, 12.47:1.
• Invalid code: #FFC8DC, 12.50:1.

• Pass the code as a string. Long lines scroll inside the block, which takes focus (tabindex="0") so a keyboard user can scroll it.
• The copy button is an icon-only button: its name comes from copyLabel ("Copy code").
• Keep it under about 20 lines.

Accessibility

This section is still in progress.

Related

This section is still in progress.

References

This section is still in progress.