Code block

Overview

Style

Guidelines

Code

Accessibility

Demos

Code block

Actions I18n

Actions

Below The Fold

Callout Badges

Callout Prerendered

Client Side Highlighting

Color Context

Copy Cancel

Copy Modify

Hide Line Numbers

Prerendered Prism Highlighting

Resizable

Sizes

Thousands Line Numbers Full Height

Thousands Line Numbers

Thousands

Code block

Actions I18n

Actions

Below The Fold

Callout Badges

Callout Prerendered

Client Side Highlighting

Color Context

Copy Cancel

Copy Modify

Hide Line Numbers

Prerendered Prism Highlighting

Resizable

Sizes

Thousands Line Numbers Full Height

Thousands Line Numbers

Thousands

Code block

import '@rhds/elements/rh-code-block/rh-code-block.js';

<rh-code-block>
<script type="text/html"><!DOCTYPE html>
<title>Title</title>
<style>body {width: 500px;}</style>
<script type="application/javascript">
  function $init() {return true;}
<</script><script type="text/html">/script>
<body>
  <p checked class="title" id="title">Title</p>
  <!-- here goes the rest of the page -->
</body></script>
</rh-code-block>

import { CodeBlock } from "@rhds/elements/react/rh-code-block/rh-code-block.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <CodeBlock>
    <script type="text/html"><!DOCTYPE html>
  <title>Title</title>
  <style>body {width: 500px;}</style>
  <script type="application/javascript">
    function $init() {return true;}
  <</script>
    <script type="text/html">/script>
  <body>
    <p checked class="title" id="title">Title</p>
    <!-- here goes the rest of the page -->
  </body></script>
  </CodeBlock>
);

Actions I18n

import '@rhds/elements/rh-button/rh-button.js';
import '@rhds/elements/rh-code-block/rh-code-block.js';
import '@rhds/elements/rh-tooltip/rh-tooltip.js';

rh-code-block {
  margin-block-end: var(--rh-space-lg, 16px);
}

<rh-code-block actions="wrap copy">
  <span slot="action-label-copy">העתק</span>
  <span slot="action-label-copy" hidden="" data-code-block-state="active">הועתק!</span>
  <span slot="action-label-wrap">לעבור לגלישת שורות</span>
  <span slot="action-label-wrap" hidden="" data-code-block-state="active">לעבור להצפת שורות</span>
<script type="text/css">#content {
  display: block;
  background-color: var(--rh-color-surface-lighter, #f2f2f2);
  border: var(--rh-border-width-sm, 1px) solid var(--rh-color-border-subtle-on-light, #c7c7c7);
  border-block-start-width: var( --rh-code-block-border-block-start-width, var(--rh-border-width-sm, 1px));
  font-family: var(--rh-font-family-code, RedHatMono, "Red Hat Mono", "Courier New", Courier, monospace);
  color: var(--rh-color-text-primary-on-light, #151515);
  padding: var(--rh-space-xl, 24px);
  height: calc(100% - 2 * var(--rh-space-xl, 24px));
  border-radius: var(--rh-border-radius-default, 3px);
  max-width: 1000px;
  max-height: 640px;
  overflow-y: auto;
}</script>
</rh-code-block>

import { CodeBlock } from "@rhds/elements/react/rh-code-block/rh-code-block.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <CodeBlock actions="wrap copy">
    <span slot="action-label-copy">העתק</span>
    <span slot="action-label-copy" hidden data-code-block-state="active">הועתק!</span>
    <span slot="action-label-wrap">לעבור לגלישת שורות</span>
    <span slot="action-label-wrap" hidden data-code-block-state="active">לעבור להצפת שורות</span>
    <script type="text/css">#content {
    display: block;
    background-color: var(--rh-color-surface-lighter, #f2f2f2);
    border: var(--rh-border-width-sm, 1px) solid var(--rh-color-border-subtle-on-light, #c7c7c7);
    border-block-start-width: var( --rh-code-block-border-block-start-width, var(--rh-border-width-sm, 1px));
    font-family: var(--rh-font-family-code, RedHatMono, "Red Hat Mono", "Courier New", Courier, monospace);
    color: var(--rh-color-text-primary-on-light, #151515);
    padding: var(--rh-space-xl, 24px);
    height: calc(100% - 2 * var(--rh-space-xl, 24px));
    border-radius: var(--rh-border-radius-default, 3px);
    max-width: 1000px;
    max-height: 640px;
    overflow-y: auto;
  }</script>
  </CodeBlock>
);

Actions

import '@rhds/elements/rh-button/rh-button.js';
import '@rhds/elements/rh-code-block/rh-code-block.js';

rh-code-block {
  margin-block-end: var(--rh-space-lg, 16px);
}

<rh-code-block actions="wrap copy">
<script type="text/css">#content {
  display: block;
  background-color: var(--rh-color-surface-lighter, #f2f2f2);
  border: var(--rh-border-width-sm, 1px) solid var(--rh-color-border-subtle-on-light, #c7c7c7);
  border-block-start-width: var( --rh-code-block-border-block-start-width, var(--rh-border-width-sm, 1px));
  font-family: var(--rh-font-family-code, RedHatMono, "Red Hat Mono", "Courier New", Courier, monospace);
  color: var(--rh-color-text-primary-on-light, #151515);
  padding: var(--rh-space-xl, 24px);
  height: calc(100% - 2 * var(--rh-space-xl, 24px));
  border-radius: var(--rh-border-radius-default, 3px);
  max-width: 1000px;
  max-height: 640px;
  overflow-y: auto;
}</script>
</rh-code-block>

import { CodeBlock } from "@rhds/elements/react/rh-code-block/rh-code-block.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <CodeBlock actions="wrap copy">
    <script type="text/css">#content {
    display: block;
    background-color: var(--rh-color-surface-lighter, #f2f2f2);
    border: var(--rh-border-width-sm, 1px) solid var(--rh-color-border-subtle-on-light, #c7c7c7);
    border-block-start-width: var( --rh-code-block-border-block-start-width, var(--rh-border-width-sm, 1px));
    font-family: var(--rh-font-family-code, RedHatMono, "Red Hat Mono", "Courier New", Courier, monospace);
    color: var(--rh-color-text-primary-on-light, #151515);
    padding: var(--rh-space-xl, 24px);
    height: calc(100% - 2 * var(--rh-space-xl, 24px));
    border-radius: var(--rh-border-radius-default, 3px);
    max-width: 1000px;
    max-height: 640px;
    overflow-y: auto;
  }</script>
  </CodeBlock>
);

Below The Fold

import '@rhds/elements/rh-code-block/rh-code-block.js';
import { RhAlert } from '@rhds/elements/rh-alert/rh-alert.js'
import { html } from 'lit';
RhAlert.toast({
  persistent: true,
  state: 'info',
  message: html`
    <dl>
      <dt>1st code block:</dt>
      <dd><em>Pending</em></dd>
      <dt>2nd code block:</dt>
      <dd><em>Pending</em></dd>
    </dl>
  `,
});

const [fst, snd] = document.querySelectorAll('rh-code-block');
const [fstP, sndP] = document.querySelectorAll('rh-alert dd em');

addEventListener('scroll', function() {
  fstP.textContent = fst.shadowRoot.querySelectorAll('#line-numbers li').length ? 'Computed' : 'Pending'
  sndP.textContent = snd.shadowRoot.querySelectorAll('#line-numbers li').length ? 'Computed' : 'Pending'
}, { passive: true });

.tall-as-screen {
  padding: var(--rh-length-lg);
  min-height: calc(100vh + 500px);
}
rh-alert dl {
  display: grid;
  font-family: var(--rh-font-family-code);
  grid-template-columns: auto auto;
  gap: var(--rh-space-md);
}

<section class="tall-as-screen">
  <p>Expect line numbers to not be calculated until just before code block scrolls into view</p>
  <p>Expect line numbers to appear without flash when scrolling down to view codeblock</p>
  <p><strong>Scroll down to view code block</strong></p>
</section>

<rh-code-block>
<script type="text/html"><!DOCTYPE html>
<title>Title</title>
<style>body {width: 500px;}</style>
<script type="application/javascript">
  function $init() {return true;}
<</script><script type="text/html">/script>
<body>
  <p checked class="title" id="title">Title</p>
  <!-- here goes the rest of the page -->
</body></script>
</rh-code-block>

<section class="tall-as-screen">
  <p>Expect only the first code block to have computed line numbers</p>
  <p>Expect second block's line numbers to compute only just before it scrolls into view</p>
  <p><strong>Scroll down to view code block</strong></p>
</section>

<rh-code-block>
<script type="text/html"><!DOCTYPE html>
<title>Title</title>
<style>body {width: 500px;}</style>
<script type="application/javascript">
  function $init() {return true;}
<</script><script type="text/html">/script>
<body>
  <p checked class="title" id="title">Title</p>
  <!-- here goes the rest of the page -->
</body></script>
</rh-code-block>

import { CodeBlock } from "@rhds/elements/react/rh-code-block/rh-code-block.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <section className="tall-as-screen">
    <p>Expect line numbers to not be calculated until just before code block scrolls into view</p>
    <p>Expect line numbers to appear without flash when scrolling down to view codeblock</p>
    <p><strong>Scroll down to view code block</strong></p>
  </section>
  <CodeBlock>
    <script type="text/html"><!DOCTYPE html>
  <title>Title</title>
  <style>body {width: 500px;}</style>
  <script type="application/javascript">
    function $init() {return true;}
  <</script>
    <script type="text/html">/script>
  <body>
    <p checked class="title" id="title">Title</p>
    <!-- here goes the rest of the page -->
  </body></script>
  </CodeBlock>
  <section className="tall-as-screen">
    <p>Expect only the first code block to have computed line numbers</p>
    <p>Expect second block's line numbers to compute only just before it scrolls into view</p>
    <p><strong>Scroll down to view code block</strong></p>
  </section>
  <CodeBlock>
    <script type="text/html"><!DOCTYPE html>
  <title>Title</title>
  <style>body {width: 500px;}</style>
  <script type="application/javascript">
    function $init() {return true;}
  <</script>
    <script type="text/html">/script>
  <body>
    <p checked class="title" id="title">Title</p>
    <!-- here goes the rest of the page -->
  </body></script>
  </CodeBlock>
);

Callout Badges

import '@rhds/elements/rh-code-block/rh-code-block.js';
import '@rhds/elements/rh-badge/rh-badge.js';

<rh-code-block>
  <script type="text/html"><p>Script tags in HTML must be escaped</p></script>
  <rh-badge state="info">1</rh-badge>
  <script type="text/html">
<p>other tags do not need to be escaped</p>
<marquee>Callouts can be placed </script><rh-badge state="info">2</rh-badge><script type="text/html">inline</marquee>
</script>
  <dl slot="legend">
    <dt><rh-badge state="info">1</rh-badge></dt>
    <dd>Postfix callout</dd>
    <dt><rh-badge state="info">2</rh-badge></dt>
    <dd>Inline callout</dd>
  </dl>
</rh-code-block>

<link rel="stylesheet" href="../rh-code-block-lightdom.css">

import { Badge } from "@rhds/elements/react/rh-badge/rh-badge.js";
import { CodeBlock } from "@rhds/elements/react/rh-code-block/rh-code-block.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <CodeBlock>
    <script type="text/html"><p>Script tags in HTML must be escaped</p></script>
    <Badge state="info">1</Badge>
    <script type="text/html"><p>other tags do not need to be escaped</p>
  <marquee>Callouts can be placed</script>
    <Badge state="info">2</Badge>
    <script type="text/html">inline</marquee></script>
    <dl slot="legend">
      <dt>
        <Badge state="info">1</Badge>
      </dt>
      <dd>Postfix callout</dd>
      <dt>
        <Badge state="info">2</Badge>
      </dt>
      <dd>Inline callout</dd>
    </dl>
  </CodeBlock>
  <link rel="stylesheet" href="../rh-code-block-lightdom.css" />
);

Callout Prerendered

import '@rhds/elements/rh-code-block/rh-code-block.js';
import '@rhds/elements/rh-badge/rh-badge.js';

<rh-code-block highlighting="prerendered" actions="copy wrap">
  <pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam eleifend elit sed est egestas, a sollicitudin mauris
tincidunt. Pellentesque vel dapibus risus. Nullam aliquam</code></pre><rh-badge state="info">1</rh-badge><pre class="language-html"><code class="language-html">
felis orci, eget cursus mi lacinia quis. Vivamus at felis sem.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>rh-cta</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>footer<span class="token punctuation">"</span></span> <span class="token attr-name">priority</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Call to action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>rh-cta</span><span class="token punctuation">&gt;</span></span></code></pre>
</rh-code-block>

import { Badge } from "@rhds/elements/react/rh-badge/rh-badge.js";
import { CodeBlock } from "@rhds/elements/react/rh-code-block/rh-code-block.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <CodeBlock highlighting="prerendered" actions="copy wrap">
    <pre className="language-html">
      <code className="language-html">
        <span className="token tag">
<span className="token tag"><span className="token punctuation"><</span>p</span>
<span className="token punctuation">></span>
        </span>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Nullam eleifend elit sed est egestas, a sollicitudin mauris
  tincidunt. Pellentesque vel dapibus risus. Nullam aliquam
      </code>
    </pre>
    <Badge state="info">1</Badge>
    <pre className="language-html">
      <code className="language-html">
        felis orci, eget cursus mi lacinia quis. Vivamus at felis sem.
        <span className="token tag">
<span className="token tag"><span className="token punctuation"></</span>p</span>
<span className="token punctuation">></span>
        </span>
        <span className="token tag">
<span className="token tag"><span className="token punctuation"><</span>rh-cta</span>
<span className="token attr-name">slot</span>
<span className="token attr-value">
  <span className="token punctuation attr-equals">=</span>
  <span className="token punctuation">"</span>
  footer
  <span className="token punctuation">"</span>
</span>
<span className="token attr-name">priority</span>
<span className="token attr-value">
  <span className="token punctuation attr-equals">=</span>
  <span className="token punctuation">"</span>
  primary
  <span className="token punctuation">"</span>
</span>
<span className="token punctuation">></span>
        </span>
        <span className="token tag">
<span className="token tag"><span className="token punctuation"><</span>a</span>
<span className="token attr-name">href</span>
<span className="token attr-value">
  <span className="token punctuation attr-equals">=</span>
  <span className="token punctuation">"</span>
  #
  <span className="token punctuation">"</span>
</span>
<span className="token punctuation">></span>
        </span>
        Call to action
        <span className="token tag">
<span className="token tag"><span className="token punctuation"></</span>a</span>
<span className="token punctuation">></span>
        </span>
        <span className="token tag">
<span className="token tag"><span className="token punctuation"></</span>rh-cta</span>
<span className="token punctuation">></span>
        </span>
      </code>
    </pre>
  </CodeBlock>
);

Client Side Highlighting

import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';
import '@rhds/elements/rh-code-block/rh-code-block.js';

rh-context-demo::part(demo) {
  display: grid;
  gap: var(--rh-space-sm, 6px);
}

<rh-context-demo>
  <rh-code-block dedent="" language="html" highlighting="client">
    <script type="text/html">
      <!DOCTYPE html>
      <html lang="en">
        <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Cards Galore!</title>
        </head>
        <body>
<main>
  <rh-card>
    <h2 slot="header">Card</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
       Nullam eleifend elit sed est egestas, a sollicitudin mauris
       tincidunt. Pellentesque vel dapibus risus. Nullam aliquam
       felis orci, eget cursus mi lacinia quis. Vivamus at felis sem.</p>
    <rh-cta slot="footer" priority="primary">
      <a href="#">Call to action</a>
    </rh-cta>
  </rh-card>
</main>
        </body>
      </html>
    </script>
  </rh-code-block>

  <rh-code-block dedent="" language="css" highlighting="client">
    <script type="text/css">
      rh-card.avatar-card {
        width: 360px;
        &::part(body) {
margin-block-start: var(--rh-space-lg, 16px);
        }

        & p {
margin-block-start: 0;
        }

        & h4 {
font-weight: var(--rh-font-weight-heading-regular, 300);
font-size: var(--rh-font-size-body-text-md, 1rem);
font-family: var(--rh-font-family-body-text);
line-height: var(--rh-line-height-body-text, 1.5);
        }
      }
    </script>
  </rh-code-block>

  <rh-code-block dedent="" language="yaml" highlighting="client">
    <script type="text/yaml">
      extends:
        - stylelint-config-standard
        - '@stylistic/stylelint-config'

      plugins:
        - ./node_modules/@rhds/tokens/plugins/stylelint.js
        - '@stylistic/stylelint-plugin'

      rules:
        rhds/token-values: true
        rhds/no-unknown-token-name:
- true
- allowed:
  - --rh-icon-size
    </script>
  </rh-code-block>
</rh-context-demo>

import { CodeBlock } from "@rhds/elements/react/rh-code-block/rh-code-block.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <rh-context-demo>
    <CodeBlock dedent language="html" highlighting="client">
      <script type="text/html"><!DOCTYPE html>
        <html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Cards Galore!</title>
</head>
<body>
  <main>
    <rh-card>
      <h2 slot="header">Card</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
         Nullam eleifend elit sed est egestas, a sollicitudin mauris
         tincidunt. Pellentesque vel dapibus risus. Nullam aliquam
         felis orci, eget cursus mi lacinia quis. Vivamus at felis sem.</p>
      <rh-cta slot="footer" priority="primary">
        <a href="#">Call to action</a>
      </rh-cta>
    </rh-card>
  </main>
</body>
        </html></script>
    </CodeBlock>
    <CodeBlock dedent language="css" highlighting="client">
      <script type="text/css">rh-card.avatar-card {
width: 360px;
&::part(body) {
  margin-block-start: var(--rh-space-lg, 16px);
}
  
& p {
  margin-block-start: 0;
}
  
& h4 {
  font-weight: var(--rh-font-weight-heading-regular, 300);
  font-size: var(--rh-font-size-body-text-md, 1rem);
  font-family: var(--rh-font-family-body-text);
  line-height: var(--rh-line-height-body-text, 1.5);
}
        }</script>
    </CodeBlock>
    <CodeBlock dedent language="yaml" highlighting="client">
      <script type="text/yaml">extends:
- stylelint-config-standard
- '@stylistic/stylelint-config'
  
        plugins:
- ./node_modules/@rhds/tokens/plugins/stylelint.js
- '@stylistic/stylelint-plugin'
  
        rules:
rhds/token-values: true
rhds/no-unknown-token-name:
  - true
  - allowed:
    - --rh-icon-size</script>
    </CodeBlock>
  </rh-context-demo>
);

Color Context

import '@rhds/elements/rh-code-block/rh-code-block.js';
import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';

<rh-context-demo>

<rh-code-block actions="wrap copy">
  <span slot="action-label-copy">Copy to Clipboard</span>
  <span slot="action-label-copy" hidden="" data-code-block-state="active">Copied!</span>
  <span slot="action-label-wrap">Toggle word wrap</span>
  <span slot="action-label-wrap" hidden="" data-code-block-state="active">Toggle overflow</span>
  <script type="text/text">Error: Error creating network Load Balancer: AccessDenied: User: arn:aws:sts::970xxxxxxxxx:assumed-role/ManagedOpenShift-Installer-Role/163xxxxxxxxxxxxxxxx is not authorized to perform: iam:CreateServiceLinkedRole on resource: arn:aws:iam::970xxxxxxxxx:role/aws-service-role/elasticloadbalancing.amazonaws.com/ AWSServiceRoleForElasticLoadBalancing
Error: Error creating network Load Balancer: AccessDenied: User: arn:aws:sts::970xxxxxxxxx:assumed-role/ManagedOpenShift-Installer-Role/163xxxxxxxxxxxxxxxx is not authorized to perform: iam:CreateServiceLinkedRole on resource: arn:aws:iam::970xxxxxxxxx:role/aws-service-role/elasticloadbalancing.amazonaws.com/ AWSServiceRoleForElasticLoadBalancing
Error: Error creating network Load Balancer: AccessDenied: User: arn:aws:sts::970xxxxxxxxx:assumed-role/ManagedOpenShift-Installer-Role/163xxxxxxxxxxxxxxxx is not authorized to perform: iam:CreateServiceLinkedRole on resource: arn:aws:iam::970xxxxxxxxx:role/aws-service-role/elasticloadbalancing.amazonaws.com/ AWSServiceRoleForElasticLoadBalancing
Error: Error creating network Load Balancer: AccessDenied: User: arn:aws:sts::970xxxxxxxxx:assumed-role/ManagedOpenShift-Installer-Role/163xxxxxxxxxxxxxxxx is not authorized to perform: iam:CreateServiceLinkedRole on resource: arn:aws:iam::970xxxxxxxxx:role/aws-service-role/elasticloadbalancing.amazonaws.com/ AWSServiceRoleForElasticLoadBalancing
Error: Error creating network Load Balancer: AccessDenied: User: arn:aws:sts::970xxxxxxxxx:assumed-role/ManagedOpenShift-Installer-Role/163xxxxxxxxxxxxxxxx is not authorized to perform: iam:CreateServiceLinkedRole on resource: arn:aws:iam::970xxxxxxxxx:role/aws-service-role/elasticloadbalancing.amazonaws.com/ AWSServiceRoleForElasticLoadBalancing
Error: Error creating network Load Balancer: AccessDenied: User: arn:aws:sts::970xxxxxxxxx:assumed-role/ManagedOpenShift-Installer-Role/163xxxxxxxxxxxxxxxx is not authorized to perform: iam:CreateServiceLinkedRole on resource: arn:aws:iam::970xxxxxxxxx:role/aws-service-role/elasticloadbalancing.amazonaws.com/ AWSServiceRoleForElasticLoadBalancing</script>

</rh-code-block>

</rh-context-demo>

import { CodeBlock } from "@rhds/elements/react/rh-code-block/rh-code-block.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <rh-context-demo>
    <CodeBlock actions="wrap copy">
      <span slot="action-label-copy">Copy to Clipboard</span>
      <span slot="action-label-copy" hidden data-code-block-state="active">Copied!</span>
      <span slot="action-label-wrap">Toggle word wrap</span>
      <span slot="action-label-wrap" hidden data-code-block-state="active">Toggle overflow</span>
      <script type="text/text">Error: Error creating network Load Balancer: AccessDenied: User: arn:aws:sts::970xxxxxxxxx:assumed-role/ManagedOpenShift-Installer-Role/163xxxxxxxxxxxxxxxx is not authorized to perform: iam:CreateServiceLinkedRole on resource: arn:aws:iam::970xxxxxxxxx:role/aws-service-role/elasticloadbalancing.amazonaws.com/ AWSServiceRoleForElasticLoadBalancing
  Error: Error creating network Load Balancer: AccessDenied: User: arn:aws:sts::970xxxxxxxxx:assumed-role/ManagedOpenShift-Installer-Role/163xxxxxxxxxxxxxxxx is not authorized to perform: iam:CreateServiceLinkedRole on resource: arn:aws:iam::970xxxxxxxxx:role/aws-service-role/elasticloadbalancing.amazonaws.com/ AWSServiceRoleForElasticLoadBalancing
  Error: Error creating network Load Balancer: AccessDenied: User: arn:aws:sts::970xxxxxxxxx:assumed-role/ManagedOpenShift-Installer-Role/163xxxxxxxxxxxxxxxx is not authorized to perform: iam:CreateServiceLinkedRole on resource: arn:aws:iam::970xxxxxxxxx:role/aws-service-role/elasticloadbalancing.amazonaws.com/ AWSServiceRoleForElasticLoadBalancing
  Error: Error creating network Load Balancer: AccessDenied: User: arn:aws:sts::970xxxxxxxxx:assumed-role/ManagedOpenShift-Installer-Role/163xxxxxxxxxxxxxxxx is not authorized to perform: iam:CreateServiceLinkedRole on resource: arn:aws:iam::970xxxxxxxxx:role/aws-service-role/elasticloadbalancing.amazonaws.com/ AWSServiceRoleForElasticLoadBalancing
  Error: Error creating network Load Balancer: AccessDenied: User: arn:aws:sts::970xxxxxxxxx:assumed-role/ManagedOpenShift-Installer-Role/163xxxxxxxxxxxxxxxx is not authorized to perform: iam:CreateServiceLinkedRole on resource: arn:aws:iam::970xxxxxxxxx:role/aws-service-role/elasticloadbalancing.amazonaws.com/ AWSServiceRoleForElasticLoadBalancing
  Error: Error creating network Load Balancer: AccessDenied: User: arn:aws:sts::970xxxxxxxxx:assumed-role/ManagedOpenShift-Installer-Role/163xxxxxxxxxxxxxxxx is not authorized to perform: iam:CreateServiceLinkedRole on resource: arn:aws:iam::970xxxxxxxxx:role/aws-service-role/elasticloadbalancing.amazonaws.com/ AWSServiceRoleForElasticLoadBalancing</script>
    </CodeBlock>
  </rh-context-demo>
);

Copy Cancel

import {RhCodeBlockCopyEvent} from '@rhds/elements/rh-code-block/rh-code-block.js';

document.body.addEventListener('copy', function(event) {
  if (event instanceof RhCodeBlockCopyEvent) {
    // prevent copy
    event.preventDefault();
  }
});

<rh-code-block highlighting="prerendered" language="bash" actions="copy">
  <pre class="language-shell-session" tabindex="0"><code class="language-shell-session"><span class="token command"><span class="token shell-symbol important">$</span> <span class="token bash language-bash"><span class="token keyword">for</span> <span class="token for-or-select variable">node</span> <span class="token keyword">in</span> <span class="token variable"><span class="token variable">$(</span>oc get nodes <span class="token parameter variable">-o</span> <span class="token assign-left variable">jsonpath</span><span class="token operator">=</span><span class="token string">'{.items[*].metadata.name}'</span><span class="token variable">)</span></span><span class="token punctuation">;</span> <span class="token keyword">do</span> <span class="token builtin class-name">echo</span> <span class="token variable">${node}</span> <span class="token punctuation">;</span> oc adm cordon <span class="token variable">${node}</span> <span class="token punctuation">;</span> <span class="token keyword">done</span></span></span></code></pre>
</rh-code-block>

import { CodeBlock } from "@rhds/elements/react/rh-code-block/rh-code-block.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <CodeBlock highlighting="prerendered" language="bash" actions="copy">
    <pre className="language-shell-session" tabindex="0">
      <code className="language-shell-session">
        <span className="token command">
<span className="token shell-symbol important">$</span>
<span className="token bash language-bash">
  <span className="token keyword">for</span>
  <span className="token for-or-select variable">node</span>
  <span className="token keyword">in</span>
  <span className="token variable">
    <span className="token variable">$(</span>
    oc get nodes
    <span className="token parameter variable">-o</span>
    <span className="token assign-left variable">jsonpath</span>
    <span className="token operator">=</span>
    <span className="token string">'{.items[*].metadata.name}'</span>
    <span className="token variable">)</span>
  </span>
  <span className="token punctuation">;</span>
  <span className="token keyword">do</span>
  <span className="token builtin class-name">echo</span>
  <span className="token variable">${node}</span>
  <span className="token punctuation">;</span>
  oc adm cordon
  <span className="token variable">${node}</span>
  <span className="token punctuation">;</span>
  <span className="token keyword">done</span>
</span>
        </span>
      </code>
    </pre>
  </CodeBlock>
);

Copy Modify

import {RhCodeBlockCopyEvent} from '@rhds/elements/rh-code-block/rh-code-block.js';

document.body.addEventListener('copy', function(event) {
  if (event instanceof RhCodeBlockCopyEvent) {
    // remove prompt and surrounding whitespace from the start of the string
    event.content = event.content.replace(/^\s*\$|#\s*/, '');
  }
});

<rh-code-block highlighting="prerendered" language="bash" actions="copy">
  <pre class="language-shell-session" tabindex="0"><code class="language-shell-session"><span class="token command"><span class="token shell-symbol important">$</span> <span class="token bash language-bash"><span class="token keyword">for</span> <span class="token for-or-select variable">node</span> <span class="token keyword">in</span> <span class="token variable"><span class="token variable">$(</span>oc get nodes <span class="token parameter variable">-o</span> <span class="token assign-left variable">jsonpath</span><span class="token operator">=</span><span class="token string">'{.items[*].metadata.name}'</span><span class="token variable">)</span></span><span class="token punctuation">;</span> <span class="token keyword">do</span> <span class="token builtin class-name">echo</span> <span class="token variable">${node}</span> <span class="token punctuation">;</span> oc adm cordon <span class="token variable">${node}</span> <span class="token punctuation">;</span> <span class="token keyword">done</span></span></span></code></pre>
</rh-code-block>

<label>Paste your results here:<br><textarea></textarea></label>

import { CodeBlock } from "@rhds/elements/react/rh-code-block/rh-code-block.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <CodeBlock highlighting="prerendered" language="bash" actions="copy">
    <pre className="language-shell-session" tabindex="0">
      <code className="language-shell-session">
        <span className="token command">
<span className="token shell-symbol important">$</span>
<span className="token bash language-bash">
  <span className="token keyword">for</span>
  <span className="token for-or-select variable">node</span>
  <span className="token keyword">in</span>
  <span className="token variable">
    <span className="token variable">$(</span>
    oc get nodes
    <span className="token parameter variable">-o</span>
    <span className="token assign-left variable">jsonpath</span>
    <span className="token operator">=</span>
    <span className="token string">'{.items[*].metadata.name}'</span>
    <span className="token variable">)</span>
  </span>
  <span className="token punctuation">;</span>
  <span className="token keyword">do</span>
  <span className="token builtin class-name">echo</span>
  <span className="token variable">${node}</span>
  <span className="token punctuation">;</span>
  oc adm cordon
  <span className="token variable">${node}</span>
  <span className="token punctuation">;</span>
  <span className="token keyword">done</span>
</span>
        </span>
      </code>
    </pre>
  </CodeBlock>
  <label>
    Paste your results here:
    <br />
    <textarea />
  </label>
);

Hide Line Numbers

import '@rhds/elements/rh-code-block/rh-code-block.js';

<rh-code-block line-numbers="hidden">
<script type="text/html"><!DOCTYPE html>
<title>Title</title>
<style>body {width: 500px;}</style>
<script type="application/javascript">
  function $init() {return true;}
<</script><script type="text/html">/script>
<body>
  <p checked class="title" id="title">Title</p>
  <!-- here goes the rest of the page -->
</body></script>
</rh-code-block>

import { CodeBlock } from "@rhds/elements/react/rh-code-block/rh-code-block.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <CodeBlock line-numbers="hidden">
    <script type="text/html"><!DOCTYPE html>
  <title>Title</title>
  <style>body {width: 500px;}</style>
  <script type="application/javascript">
    function $init() {return true;}
  <</script>
    <script type="text/html">/script>
  <body>
    <p checked class="title" id="title">Title</p>
    <!-- here goes the rest of the page -->
  </body></script>
  </CodeBlock>
);

Prerendered Prism Highlighting

import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';
import '@rhds/elements/rh-code-block/rh-code-block.js';

rh-context-demo::part(demo) {
  display: grid;
  gap: var(--rh-space-sm, 6px);
}

<rh-context-demo>
  <rh-code-block highlighting="prerendered" actions="copy wrap">
  <span slot="action-label-copy">Copy to Clipboard</span>
  <span slot="action-label-copy" hidden="" data-code-block-state="active">Copied!</span>
  <span slot="action-label-wrap">Toggle word wrap</span>
  <span slot="action-label-wrap" hidden="" data-code-block-state="active">Toggle overflow</span>
    <pre class="language-html"><code class="language-html"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Cards Galore!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>main</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>rh-card</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>header<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Card<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Nullam eleifend elit sed est egestas, a sollicitudin mauris
 tincidunt. Pellentesque vel dapibus risus. Nullam aliquam
 felis orci, eget cursus mi lacinia quis. Vivamus at felis sem.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>rh-cta</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>footer<span class="token punctuation">"</span></span> <span class="token attr-name">priority</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Call to action<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>rh-cta</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>rh-card</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>main</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span></code></pre>
  </rh-code-block>

  <rh-code-block highlighting="prerendered" actions="copy wrap">
  <span slot="action-label-copy">Copy to Clipboard</span>
  <span slot="action-label-copy" hidden="" data-code-block-state="active">Copied!</span>
  <span slot="action-label-wrap">Toggle word wrap</span>
  <span slot="action-label-wrap" hidden="" data-code-block-state="active">Toggle overflow</span>
    <pre class="language-css"><code class="language-css"><span class="token selector">rh-card.avatar-card</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 360px<span class="token punctuation">;</span>
  <span class="token selector">&amp;::part(body)</span> <span class="token punctuation">{</span>
    <span class="token property">margin-block-start</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--rh-space-lg<span class="token punctuation">,</span> 16px<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token selector">&amp; p</span> <span class="token punctuation">{</span>
    <span class="token property">margin-block-start</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token selector">&amp; h4</span> <span class="token punctuation">{</span>
    <span class="token property">font-weight</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--rh-font-weight-heading-regular<span class="token punctuation">,</span> 300<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--rh-font-size-body-text-md<span class="token punctuation">,</span> 1rem<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--rh-font-family-body-text<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">line-height</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--rh-line-height-body-text<span class="token punctuation">,</span> 1.5<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre>
  </rh-code-block>

  <rh-code-block highlighting="prerendered" actions="copy wrap">
  <span slot="action-label-copy">Copy to Clipboard</span>
  <span slot="action-label-copy" hidden="" data-code-block-state="active">Copied!</span>
  <span slot="action-label-wrap">Toggle word wrap</span>
  <span slot="action-label-wrap" hidden="" data-code-block-state="active">Toggle overflow</span>
    <pre class="language-yaml"><code class="language-yaml"><span class="token key atrule">extends</span><span class="token punctuation">:</span>
  <span class="token punctuation">-</span> stylelint<span class="token punctuation">-</span>config<span class="token punctuation">-</span>standard
  <span class="token punctuation">-</span> <span class="token string">'@stylistic/stylelint-config'</span>

<span class="token key atrule">plugins</span><span class="token punctuation">:</span>
  <span class="token punctuation">-</span> ./node_modules/@rhds/tokens/plugins/stylelint.js
  <span class="token punctuation">-</span> <span class="token string">'@stylistic/stylelint-plugin'</span>

<span class="token key atrule">rules</span><span class="token punctuation">:</span>
  <span class="token key atrule">rhds/token-values</span><span class="token punctuation">:</span> <span class="token boolean important">true</span>
  <span class="token key atrule">rhds/no-unknown-token-name</span><span class="token punctuation">:</span>
    <span class="token punctuation">-</span> <span class="token boolean important">true</span>
    <span class="token punctuation">-</span> <span class="token key atrule">allowed</span><span class="token punctuation">:</span>
      <span class="token punctuation">-</span> <span class="token punctuation">-</span><span class="token punctuation">-</span>rh<span class="token punctuation">-</span>icon<span class="token punctuation">-</span>size</code></pre>
  </rh-code-block>
</rh-context-demo>

import { CodeBlock } from "@rhds/elements/react/rh-code-block/rh-code-block.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <rh-context-demo>
    <CodeBlock highlighting="prerendered" actions="copy wrap">
      <span slot="action-label-copy">Copy to Clipboard</span>
      <span slot="action-label-copy" hidden data-code-block-state="active">Copied!</span>
      <span slot="action-label-wrap">Toggle word wrap</span>
      <span slot="action-label-wrap" hidden data-code-block-state="active">Toggle overflow</span>
      <pre className="language-html">
        <code className="language-html">
<span className="token doctype">
  <span className="token punctuation"><!</span>
  <span className="token doctype-tag">DOCTYPE</span>
  <span className="token name">html</span>
  <span className="token punctuation">></span>
</span>
<span className="token tag">
  <span className="token tag"><span className="token punctuation"><</span>html</span>
  <span className="token attr-name">lang</span>
  <span className="token attr-value">
    <span className="token punctuation attr-equals">=</span>
    <span className="token punctuation">"</span>
    en
    <span className="token punctuation">"</span>
  </span>
  <span className="token punctuation">></span>
</span>
<span className="token tag">
  <span className="token tag"><span className="token punctuation"><</span>head</span>
  <span className="token punctuation">></span>
</span>
<span className="token tag">
  <span className="token tag"><span className="token punctuation"><</span>meta</span>
  <span className="token attr-name">charset</span>
  <span className="token attr-value">
    <span className="token punctuation attr-equals">=</span>
    <span className="token punctuation">"</span>
    utf-8
    <span className="token punctuation">"</span>
  </span>
  <span className="token punctuation">></span>
</span>
<span className="token tag">
  <span className="token tag"><span className="token punctuation"><</span>meta</span>
  <span className="token attr-name">name</span>
  <span className="token attr-value">
    <span className="token punctuation attr-equals">=</span>
    <span className="token punctuation">"</span>
    viewport
    <span className="token punctuation">"</span>
  </span>
  <span className="token attr-name">content</span>
  <span className="token attr-value">
    <span className="token punctuation attr-equals">=</span>
    <span className="token punctuation">"</span>
    width=device-width
    <span className="token punctuation">"</span>
  </span>
  <span className="token punctuation">></span>
</span>
<span className="token tag">
  <span className="token tag"><span className="token punctuation"><</span>title</span>
  <span className="token punctuation">></span>
</span>
Cards Galore!
<span className="token tag">
  <span className="token tag"><span className="token punctuation"></</span>title</span>
  <span className="token punctuation">></span>
</span>
<span className="token tag">
  <span className="token tag"><span className="token punctuation"></</span>head</span>
  <span className="token punctuation">></span>
</span>
<span className="token tag">
  <span className="token tag"><span className="token punctuation"><</span>body</span>
  <span className="token punctuation">></span>
</span>
<span className="token tag">
  <span className="token tag"><span className="token punctuation"><</span>main</span>
  <span className="token punctuation">></span>
</span>
<span className="token tag">
  <span className="token tag"><span className="token punctuation"><</span>rh-card</span>
  <span className="token punctuation">></span>
</span>
<span className="token tag">
  <span className="token tag"><span className="token punctuation"><</span>h2</span>
  <span className="token attr-name">slot</span>
  <span className="token attr-value">
    <span className="token punctuation attr-equals">=</span>
    <span className="token punctuation">"</span>
    header
    <span className="token punctuation">"</span>
  </span>
  <span className="token punctuation">></span>
</span>
Card
<span className="token tag">
  <span className="token tag"><span className="token punctuation"></</span>h2</span>
  <span className="token punctuation">></span>
</span>
<span className="token tag">
  <span className="token tag"><span className="token punctuation"><</span>p</span>
  <span className="token punctuation">></span>
</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   Nullam eleifend elit sed est egestas, a sollicitudin mauris
   tincidunt. Pellentesque vel dapibus risus. Nullam aliquam
   felis orci, eget cursus mi lacinia quis. Vivamus at felis sem.
<span className="token tag">
  <span className="token tag"><span className="token punctuation"></</span>p</span>
  <span className="token punctuation">></span>
</span>
<span className="token tag">
  <span className="token tag"><span className="token punctuation"><</span>rh-cta</span>
  <span className="token attr-name">slot</span>
  <span className="token attr-value">
    <span className="token punctuation attr-equals">=</span>
    <span className="token punctuation">"</span>
    footer
    <span className="token punctuation">"</span>
  </span>
  <span className="token attr-name">priority</span>
  <span className="token attr-value">
    <span className="token punctuation attr-equals">=</span>
    <span className="token punctuation">"</span>
    primary
    <span className="token punctuation">"</span>
  </span>
  <span className="token punctuation">></span>
</span>
<span className="token tag">
  <span className="token tag"><span className="token punctuation"><</span>a</span>
  <span className="token attr-name">href</span>
  <span className="token attr-value">
    <span className="token punctuation attr-equals">=</span>
    <span className="token punctuation">"</span>
    #
    <span className="token punctuation">"</span>
  </span>
  <span className="token punctuation">></span>
</span>
Call to action
<span className="token tag">
  <span className="token tag"><span className="token punctuation"></</span>a</span>
  <span className="token punctuation">></span>
</span>
<span className="token tag">
  <span className="token tag"><span className="token punctuation"></</span>rh-cta</span>
  <span className="token punctuation">></span>
</span>
<span className="token tag">
  <span className="token tag"><span className="token punctuation"></</span>rh-card</span>
  <span className="token punctuation">></span>
</span>
<span className="token tag">
  <span className="token tag"><span className="token punctuation"></</span>main</span>
  <span className="token punctuation">></span>
</span>
<span className="token tag">
  <span className="token tag"><span className="token punctuation"></</span>body</span>
  <span className="token punctuation">></span>
</span>
<span className="token tag">
  <span className="token tag"><span className="token punctuation"></</span>html</span>
  <span className="token punctuation">></span>
</span>
        </code>
      </pre>
    </CodeBlock>
    <CodeBlock highlighting="prerendered" actions="copy wrap">
      <span slot="action-label-copy">Copy to Clipboard</span>
      <span slot="action-label-copy" hidden data-code-block-state="active">Copied!</span>
      <span slot="action-label-wrap">Toggle word wrap</span>
      <span slot="action-label-wrap" hidden data-code-block-state="active">Toggle overflow</span>
      <pre className="language-css">
        <code className="language-css">
<span className="token selector">rh-card.avatar-card</span>
<span className="token punctuation">{</span>
<span className="token property">width</span>
<span className="token punctuation">:</span>
360px
<span className="token punctuation">;</span>
<span className="token selector">&::part(body)</span>
<span className="token punctuation">{</span>
<span className="token property">margin-block-start</span>
<span className="token punctuation">:</span>
<span className="token function">var</span>
<span className="token punctuation">(</span>
--rh-space-lg
<span className="token punctuation">,</span>
16px
<span className="token punctuation">)</span>
<span className="token punctuation">;</span>
<span className="token punctuation">}</span>
<span className="token selector">& p</span>
<span className="token punctuation">{</span>
<span className="token property">margin-block-start</span>
<span className="token punctuation">:</span>
0
<span className="token punctuation">;</span>
<span className="token punctuation">}</span>
<span className="token selector">& h4</span>
<span className="token punctuation">{</span>
<span className="token property">font-weight</span>
<span className="token punctuation">:</span>
<span className="token function">var</span>
<span className="token punctuation">(</span>
--rh-font-weight-heading-regular
<span className="token punctuation">,</span>
300
<span className="token punctuation">)</span>
<span className="token punctuation">;</span>
<span className="token property">font-size</span>
<span className="token punctuation">:</span>
<span className="token function">var</span>
<span className="token punctuation">(</span>
--rh-font-size-body-text-md
<span className="token punctuation">,</span>
1rem
<span className="token punctuation">)</span>
<span className="token punctuation">;</span>
<span className="token property">font-family</span>
<span className="token punctuation">:</span>
<span className="token function">var</span>
<span className="token punctuation">(</span>
--rh-font-family-body-text
<span className="token punctuation">)</span>
<span className="token punctuation">;</span>
<span className="token property">line-height</span>
<span className="token punctuation">:</span>
<span className="token function">var</span>
<span className="token punctuation">(</span>
--rh-line-height-body-text
<span className="token punctuation">,</span>
1.5
<span className="token punctuation">)</span>
<span className="token punctuation">;</span>
<span className="token punctuation">}</span>
<span className="token punctuation">}</span>
        </code>
      </pre>
    </CodeBlock>
    <CodeBlock highlighting="prerendered" actions="copy wrap">
      <span slot="action-label-copy">Copy to Clipboard</span>
      <span slot="action-label-copy" hidden data-code-block-state="active">Copied!</span>
      <span slot="action-label-wrap">Toggle word wrap</span>
      <span slot="action-label-wrap" hidden data-code-block-state="active">Toggle overflow</span>
      <pre className="language-yaml">
        <code className="language-yaml">
<span className="token key atrule">extends</span>
<span className="token punctuation">:</span>
<span className="token punctuation">-</span>
stylelint
<span className="token punctuation">-</span>
config
<span className="token punctuation">-</span>
standard
<span className="token punctuation">-</span>
<span className="token string">'@stylistic/stylelint-config'</span>
<span className="token key atrule">plugins</span>
<span className="token punctuation">:</span>
<span className="token punctuation">-</span>
./node_modules/@rhds/tokens/plugins/stylelint.js
<span className="token punctuation">-</span>
<span className="token string">'@stylistic/stylelint-plugin'</span>
<span className="token key atrule">rules</span>
<span className="token punctuation">:</span>
<span className="token key atrule">rhds/token-values</span>
<span className="token punctuation">:</span>
<span className="token boolean important">true</span>
<span className="token key atrule">rhds/no-unknown-token-name</span>
<span className="token punctuation">:</span>
<span className="token punctuation">-</span>
<span className="token boolean important">true</span>
<span className="token punctuation">-</span>
<span className="token key atrule">allowed</span>
<span className="token punctuation">:</span>
<span className="token punctuation">-</span>
<span className="token punctuation">-</span>
<span className="token punctuation">-</span>
rh
<span className="token punctuation">-</span>
icon
<span className="token punctuation">-</span>
size
        </code>
      </pre>
    </CodeBlock>
  </rh-context-demo>
);

Resizable

import '@rhds/elements/rh-code-block/rh-code-block.js';

<rh-code-block resizable="">
  <script type="text/text">Error: Error creating network Load Balancer: AccessDenied: User: arn:aws:sts::970xxxxxxxxx:assumed-role/ManagedOpenShift-Installer-Role/163xxxxxxxxxxxxxxxx is not authorized to perform: iam:CreateServiceLinkedRole on resource: arn:aws:iam::970xxxxxxxxx:role/aws-service-role/elasticloadbalancing.amazonaws.com/AWSServiceRoleForElasticLoadBalancing</script>
</rh-code-block>

import { CodeBlock } from "@rhds/elements/react/rh-code-block/rh-code-block.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <CodeBlock resizable>
    <script type="text/text">Error: Error creating network Load Balancer: AccessDenied: User: arn:aws:sts::970xxxxxxxxx:assumed-role/ManagedOpenShift-Installer-Role/163xxxxxxxxxxxxxxxx is not authorized to perform: iam:CreateServiceLinkedRole on resource: arn:aws:iam::970xxxxxxxxx:role/aws-service-role/elasticloadbalancing.amazonaws.com/AWSServiceRoleForElasticLoadBalancing</script>
  </CodeBlock>
);

Sizes

import '@rhds/elements/rh-code-block/rh-code-block.js';

rh-code-block {
  margin-block-end: var(--rh-space-lg, 16px);
}

<hgroup>
  <h2>Sizes</h2>
  <h3>Standard</h3>
</hgroup>

<rh-code-block>
  <script type="application/shell">oc apply -f ostoy-microservice-deployment.yaml</script>
</rh-code-block>

<rh-code-block>
  <script type="text/sample">$ podman login -u flozanorht quay.io
Password:
Login Succeeded!
$ skopeo copy docker://registry.access.redhat.com/ubi8/ubi:8.0-122 \
docker://quay.io/flozanorht/ubi:8
...
Writing manifest to image destination
Storing signatures</script>
</rh-code-block>

<h3>Compact</h3>

<rh-code-block compact="">
  <script type="application/shell">oc apply -f ostoy-microservice-deployment.yaml</script>
</rh-code-block>

<rh-code-block compact="">
  <script type="text/sample">$ podman login -u flozanorht quay.io
Password:
Login Succeeded!
$ skopeo copy docker://registry.access.redhat.com/ubi8/ubi:8.0-122 \
docker://quay.io/flozanorht/ubi:8
...
Writing manifest to image destination
Storing signatures</script>
</rh-code-block>

<h3>No fixed width</h3>

<rh-code-block style="width: max-content;">
  <script type="application/shell">oc apply -f ostoy-microservice-deployment.yaml</script>
</rh-code-block>

<rh-code-block style="width: max-content;">
  <script type="text/text">$ podman login -u flozanorht quay.io
Password:
Login Succeeded!
$ skopeo copy docker://registry.access.redhat.com/ubi8/ubi:8.0-122 \
docker://quay.io/flozanorht/ubi:8
...
Writing manifest to image destination
Storing signatures</script>
</rh-code-block>

<h3>Responsive sizes</h3>

<div style="max-width: 564px">
<rh-code-block>
  <rh-code-action slot="actions" action="copy">Copy to Clipboard</rh-code-action>
  <rh-code-action slot="actions" action="wrap">
    Toggle
    <span slot="inactive">line wrap</span>
    <span slot="active">overflow</span>
  </rh-code-action>
  <script type="text/sample">$ podman login -u flozanorht quay.io
Password:
Login Succeeded!
$ skopeo copy docker://registry.access.redhat.com/ubi8/ubi:8.0-122 \
docker://quay.io/flozanorht/ubi:8
...
Writing manifest to image destination
Storing signatures</script>
</rh-code-block>
</div>

<div style="max-width: 328px">
<rh-code-block>
  <rh-code-action slot="actions" action="copy">Copy to Clipboard</rh-code-action>
  <rh-code-action slot="actions" action="wrap">
    Toggle
    <span slot="inactive">line wrap</span>
    <span slot="active">overflow</span>
  </rh-code-action>
  <script type="text/sample">$ podman login -u flozanorht quay.io
Password:
Login Succeeded!
$ skopeo copy docker://registry.access.redhat.com/ubi8/ubi:8.0-122 \
docker://quay.io/flozanorht/ubi:8
...
Writing manifest to image destination
Storing signatures</script>
</rh-code-block>
</div>

import { CodeBlock } from "@rhds/elements/react/rh-code-block/rh-code-block.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <hgroup>
    <h2>Sizes</h2>
    <h3>Standard</h3>
  </hgroup>
  <CodeBlock>
    <script type="application/shell">oc apply -f ostoy-microservice-deployment.yaml</script>
  </CodeBlock>
  <CodeBlock>
    <script type="text/sample">$ podman login -u flozanorht quay.io
  Password:
  Login Succeeded!
  $ skopeo copy docker://registry.access.redhat.com/ubi8/ubi:8.0-122 \
  docker://quay.io/flozanorht/ubi:8
  ...
  Writing manifest to image destination
  Storing signatures</script>
  </CodeBlock>
  <h3>Compact</h3>
  <CodeBlock compact>
    <script type="application/shell">oc apply -f ostoy-microservice-deployment.yaml</script>
  </CodeBlock>
  <CodeBlock compact>
    <script type="text/sample">$ podman login -u flozanorht quay.io
  Password:
  Login Succeeded!
  $ skopeo copy docker://registry.access.redhat.com/ubi8/ubi:8.0-122 \
  docker://quay.io/flozanorht/ubi:8
  ...
  Writing manifest to image destination
  Storing signatures</script>
  </CodeBlock>
  <h3>No fixed width</h3>
  <CodeBlock style="width: max-content;">
    <script type="application/shell">oc apply -f ostoy-microservice-deployment.yaml</script>
  </CodeBlock>
  <CodeBlock style="width: max-content;">
    <script type="text/text">$ podman login -u flozanorht quay.io
  Password:
  Login Succeeded!
  $ skopeo copy docker://registry.access.redhat.com/ubi8/ubi:8.0-122 \
  docker://quay.io/flozanorht/ubi:8
  ...
  Writing manifest to image destination
  Storing signatures</script>
  </CodeBlock>
  <h3>Responsive sizes</h3>
  <div style="max-width: 564px">
    <CodeBlock>
      <rh-code-action slot="actions" action="copy">Copy to Clipboard</rh-code-action>
      <rh-code-action slot="actions" action="wrap">
        Toggle
        <span slot="inactive">line wrap</span>
        <span slot="active">overflow</span>
      </rh-code-action>
      <script type="text/sample">$ podman login -u flozanorht quay.io
  Password:
  Login Succeeded!
  $ skopeo copy docker://registry.access.redhat.com/ubi8/ubi:8.0-122 \
  docker://quay.io/flozanorht/ubi:8
  ...
  Writing manifest to image destination
  Storing signatures</script>
    </CodeBlock>
  </div>
  <div style="max-width: 328px">
    <CodeBlock>
      <rh-code-action slot="actions" action="copy">Copy to Clipboard</rh-code-action>
      <rh-code-action slot="actions" action="wrap">
        Toggle
        <span slot="inactive">line wrap</span>
        <span slot="active">overflow</span>
      </rh-code-action>
      <script type="text/sample">$ podman login -u flozanorht quay.io
  Password:
  Login Succeeded!
  $ skopeo copy docker://registry.access.redhat.com/ubi8/ubi:8.0-122 \
  docker://quay.io/flozanorht/ubi:8
  ...
  Writing manifest to image destination
  Storing signatures</script>
    </CodeBlock>
  </div>
);

Thousands Line Numbers Full Height

This demo loads 1000+ code blocks as full height and with line numbers and wrap action.

View full screen demo

Thousands Line Numbers

This demo loads 1000+ code blocks with line numbers and wrap action.

View full screen demo

Thousands

This demo loads 1000+ code blocks. The code blocks have the line-numbers="hidden" and the actions="copy" attribute. No intersection or resize observers will instantiate.

View full screen demo

Edit this page on GitHub

Code block

Code block

Actions I18n

Actions

Below The Fold

Callout Badges

Callout Prerendered

Client Side Highlighting

Color Context

Copy Cancel

Copy Modify

Hide Line Numbers

Prerendered Prism Highlighting

Resizable

Sizes

Thousands Line Numbers Full Height

Thousands Line Numbers

Thousands

Other libraries

Feedback

Red Hat legal and privacy links

Red Hat legal and privacy links

Code block

Other libraries

Feedback

Related elements or patterns

Red Hat legal and privacy links

Red Hat legal and privacy links