Live demo — this example is server-driven; run the showcase locally for the interactive version.

Code block

A monospace, preformatted display for code or shell commands. Optionally include a copy-to-clipboard button in the header. For interactive editing see Code editor.

Examples

Basic

Plain code block — just the content. Multi-line YAML, JSON, shell, etc.

apiVersion: v1
kind: Pod
metadata:
  name: example
spec:
  containers:
    - name: nginx
      image: nginx:1.25

With copy

Copy-to-clipboard button in the header. Icon swaps to a check for 2 seconds after copying.

curl -X POST https://api.example.com/v1/projects \
  -H "Authorization: Bearer $TOKEN" \
  -d '{"name": "my-project"}'

Expandable

Long code collapses behind a detached expandable-section; Show more reveals the tail inside the block.

apiVersion: helm.openshift.io/v1beta1/
kind: HelmChartRepository
metadata:
name: azure-sample-repo
spec:
connectionConfig:
url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs

Documentation

Code block props

Parameters accepted by {#include components/data-display/code-block ... /}. Model mode: pass codeBlock=<CodeBlock> built in Java instead — the Java tab on each example shows the builder. Code text goes in the slot.

* required
Name	Type	Description
* `id`	String	DOM id.
`copyButton`	boolean	Shows the copy-to-clipboard button in the header.
slot `content`	Qute block	Code text (whitespace preserved).

Usage

HTML-escape content. The content slot renders as <code>; escape angle brackets and ampersands to render literally.

Code block vs. inline. Code block is multi-line / paragraph-level. For inline snippets use a plain <code class="ws-code"> or Clipboard copy with inline=true.

Edit code-block.html on GitHub