Code Block

ui-code-block shows code in a bordered, horizontally scrolling block with the language name and a copy button in the top corner. The copy button writes the block's text content to the clipboard with navigator.clipboard.writeText() and shows a check mark for 1.5 seconds. It does not highlight syntax. Slot highlighted markup if you need colours.

Whitespace is preserved, so put the code in a <pre> (or start it right after the opening tag) and escape < as <. A slotted <pre> gets no margin. The block is as wide as its container, so size it with a wrapper.

Preview

index.html

<script type="module" src="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.js"></script>

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Code Block demo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/dist/theme.css">
  <script type="module" src="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.js"></script>
  <style>
    .demo-medium {
      width: min(100%, calc(var(--spacing) * 120));
    }
  </style>
</head>
<body>
  <import-element from="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/components/code-block.html"></import-element>

  <div class="demo-medium">
    <ui-code-block language="html"><pre>&lt;script type="module" src="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.js"&gt;&lt;/script&gt;</pre></ui-code-block>
  </div>
</body>
</html>

Examples

Multi-line code

Preview

index.html

<custom-element name="hello-world">
  <script>
    defineProps({ name: prop.string().default("world") });
  </script>
  <p>Hello, <slot name="@name"></slot>!</p>
</custom-element>

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Code Block demo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/dist/theme.css">
  <script type="module" src="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.js"></script>
  <style>
    .demo-medium {
      width: min(100%, calc(var(--spacing) * 120));
    }
  </style>
</head>
<body>
  <import-element from="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/components/code-block.html"></import-element>

  <div class="demo-medium">
  <ui-code-block language="html"><pre>&lt;custom-element name="hello-world"&gt;
    &lt;script&gt;
      defineProps({ name: prop.string().default("world") });
    &lt;/script&gt;
    &lt;p&gt;Hello, &lt;slot name="@name"&gt;&lt;/slot&gt;!&lt;/p&gt;
  &lt;/custom-element&gt;</pre></ui-code-block>
  </div>
</body>
</html>

In a message

Code blocks fit inside a ui-message next to ghost bubbles for assistant replies.

Preview

index.html

Assistant

Read the JSON body of a response like this:

const response = await fetch("/api/user");
const user = await response.json();

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Code Block demo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/dist/theme.css">
  <script type="module" src="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.js"></script>
  <style>
    .demo-medium {
      width: min(100%, calc(var(--spacing) * 120));
    }
  </style>
</head>
<body>
  <import-element from="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/components/bubble.html"></import-element>
  <import-element from="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/components/code-block.html"></import-element>
  <import-element from="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/components/message.html"></import-element>

  <div class="demo-medium">
    <ui-message>
      <ui-message-header>Assistant</ui-message-header>
      <ui-bubble variant="ghost">Read the JSON body of a response like this:</ui-bubble>
      <ui-code-block language="js"><pre>const response = await fetch("/api/user");
  const user = await response.json();</pre></ui-code-block>
    </ui-message>
  </div>
</body>
</html>

API

Attributes

Attribute	Type	Default	Description
`language`	string		Label shown in the top corner, in upper case. Display only.

Parts

ui-code-block has no child parts. Its default slot takes the code, usually a <pre>. Its trimmed textContent is what the copy button copies.

CSS parts

Part	Description
`code`	The scrolling area around the code (`white-space: pre`).
`bar`	The corner bar with the language label and the copy button.

Accessibility

The copy button is a ui-button with aria-label="Copy code". The check mark that confirms the copy is visual only, and nothing is announced.

Edit this page on GitHub · View as Markdown