Content display / The visual dictionary
Code block.
A distinct region displaying preformatted source text.
Also calledcode snippetpreformatted block
01
UI illustrationSee it in context
TypeScript
const greeting = "Hello";
console.log(greeting);02
What it is
A code block preserves indentation and line breaks so a reader can understand syntax. Language labeling and copy controls are useful, but excessive decoration should not obscure the code.
When to use it
Use for readable multi-line code examples.
Know the difference
A code block displays source; a code editor accepts and manipulates source.
03
Across platforms
WebiPadOSmacOSWindowsLinux
iPadOS · macOS
Use the native platform presentation and terminology; adapt density and interaction to touch, pointer, remote, or spatial input rather than copying a phone-sized view.
Web · Windows · Linux
Use semantic content structures on the web. Touch, pointer, and remote layouts need different target spacing even when the same information is shown.
04
Go to the source
Primary documentation for the pattern and its platform conventions.