Skip to main content Home About the Design SystemRoadmap OverviewDesignersDevelopers OverviewColorGridIconographyInteractionsSpacingTypography Overview Global colorBox shadowTypographyBorderOpacitySpaceLengthIconBreakpointsMedia queries All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button group Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Menu dropdown Navigation link Navigation (primary) Navigation (secondary) Navigation (vertical) Pagination PopoverPlanned Progress stepper Readtime Scheme toggle Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed OverviewColor PalettesCustomizingDevelopers All PatternsAccordionCall to ActionCardFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTabsTagTile All Personalization PatternsAnnouncement FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers Design/code status Release notes Get support

Code block

OverviewStyleGuidelinesCodeAccessibilityDemos
ImportingUsagerh-code-blockImportingUsagerh-code-block

Importing

Add rh-code-block to your page with this import statement:

<script type="module">
  import '@rhds/elements/rh-code-block/rh-code-block.js';
</script>
Copy to Clipboard Wrap lines

To learn more about installing RHDS elements on your site using an import map read our getting started docs.

Lightdom CSS

This element requires you to load "Lightdom CSS" stylesheets for styling deeply slotted elements.

Note

Replace /path/to/ with path to the CSS file, whether local or CDN.

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

Usage 

<meta itemprop="description" content="Basic code block displaying an HTML snippet with line numbers.">
<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>

<script type="module">
  import '@rhds/elements/rh-code-block/rh-code-block.js';
</script>
Copy to Clipboard Wrap lines

The content of code-block snippets must be contained within a non-executable <script> tag. By "non-executable", we mean that the script element must have a type attribute which is not module, importmap javascript, or any of the executable javascript mimetypes. With the exception of javascript, use the correct mime type for your content, e.g. text/html for HTML content.

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

Warning

When slotting HTML content into the code-block, if that HTML content contains a </script> end tag, you must escape it.

One approach to escaping script tags that is to close the containing <script type="text/html"> within the sample's closing script tag, then immediately open a new sample script tag containing the rest of the snippet. Another method is to insert a zero-width-joiner (or some other unusual unicode character) in the closing script tag, and use javascript to remove it before copying the content to the clipboard. Each method has benefits and drawbacks.

<rh-code-block>
  <script type="text/html">
<p>Script tags in HTML must be escaped</p>
<script>console.log('Success!');<</script><script type="text/html">/script>
  </script>
</rh-code-block>

To add javascript content, use the text/sample-javascript type.

<rh-code-block>
  <script type="text/sample-javascript">
  import '@rhds/elements/rh-code-block/rh-code-block.js';
  </script>
</rh-code-block>

Copy Button

Add the value copy to the actions attribute, and a helpful copy button will appear next to the code content. You may listen for the copy event and modify its content property to change the text copied to the clipboard. For example, to remove a shell prompt ($ ) from the copied text, use this listener function:

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

A code block provides formatted display of code snippets for documentation. Authors SHOULD provide a <script type="text/..."> or <pre> as slot content and MUST NOT use executable script types. SHOULD be paired with a heading so screen reader users understand context. Keyboard users Tab to action buttons and activate with Enter or Space.

Slots 6

Slot Name Summary Description
[default]

A non-executable script tag containing the sample content. JavaScript samples should use the type text/sample-javascript. HTML samples containing script tags must escape the closing </script> tag. Can also be a <pre> tag. Screen reader users will hear the code as plain text; ensure the surrounding context provides a label or heading.
Note: [default] unnamed slots do not have a slot="name" attribute.
action-label-copy

Tooltip content for the copy action button. Provides the accessible label read by screen readers when the copy button receives focus.
action-label-wrap

Tooltip content for the wrap action button. Provides the accessible label read by screen readers when the wrap button receives focus.
show-more

text content for the expandable toggle button when the code block is collapsed.
show-less

text content for the expandable toggle button when the code block is expanded.
legend

<dl> element containing rh-badges in the <dt> and legend text in the <dd> elements

Attributes 9

Attribute DOM Property Description Type Default
actions actions

Space- or comma-separated list of code block action buttons to display, containing either 'copy', 'wrap', or both. 'copy' adds a button that copies the text content to the clipboard. 'wrap' adds a button that toggles line wrap.

To override the default labels, e.g. for purposes of internationalization, use the action-label-copy and action-label-wrap slots. Each slot may receive two elements, one for the action's default state (e.g. "Copy to clipboard"), and one for the actions alternative state, e.g. "Copied!". The active-state element must have the attributes hidden data-code-block-state="active"

html``` Copy to Clipboard Toggle word wrap 
</figure>
 
('copy' | 'wrap')[]
 
[]
highlighting highlighting

When set to "client", <rh-code-block> will automatically highlight the source using Prism.js When set to "Prerendered", <rh-code-block> will apply supported RHDS styles to children with prismjs classnames in the element's root.

 
'client' | 'prerendered'
 
unknown
language language

When set along with highlighting="client", this grammar will be used to highlight source code

 
'html' | 'css' | 'javascript' | 'typescript' | 'bash' | 'ruby' | 'yaml' | 'json'
 
unknown
compact compact

When set, the code block displays with compact spacing

 
boolean
 
false
dedent dedent

When set, the code block source code will be dedented

 
boolean
 
false
resizable resizable

When set, the code block is resizable

 
boolean
 
false
full-height fullHeight

When set, the code block occupies it's full height, without scrolling

 
boolean
 
false
wrap wrap

When set, lines in the code snippet wrap

 
boolean
 
false
line-numbers lineNumbers

When set to hidden, the code block's line numbers are hidden

 
'hidden' | 'visible'
 
unknown

Methods 2

Method Name Description
fromAttribute()
toAttribute()

Events 1

Event Name Description
copy

Fired when the user clicks the copy action button or activates it with Enter/Space. The event's content field (string) contains the text to copy. Listeners MAY modify event.content to alter the copied text (e.g. to strip a shell prompt). Call event.preventDefault() to cancel the copy.

CSS Shadow Parts 0

None

CSS Custom Properties 2

CSS Property Description Default
--rh-code-block-callout-size

Overrides the size of callout badge icons using the --rh-size-icon-02 design token

 var(--rh-size-icon-02, 24px)
--rh-code-block-border-block-start-width

Overrides the top border width, using the --rh-border-width-sm design token by default

 var(--rh-border-width-sm, 1px)

Design Tokens 46

Token Description Copy
--rh-size-icon-02

24px icon box
--rh-color-surface-light

Secondary surface (light theme)
--rh-length-2xl

32px length token
--rh-color-surface-lighter

Tertiary surface (light theme)
--rh-color-surface-dark

Tertiary surface (dark theme)
--rh-space-2xl

32px spacer
--rh-color-blue-10

Alert - Info background
--rh-color-gray-40

Subtle icon (hover state)
--rh-color-gray-20

Secondary surface (light theme)
--rh-color-gray-95

Primary surface (dark theme) or primary text (light theme)
--rh-color-red-10
--rh-color-purple-50
--rh-color-teal-20
--rh-color-red-40

Light brand red
--rh-color-teal-60
--rh-color-yellow-60
--rh-color-blue-40

Alert - Info accent
--rh-color-blue-60

Inline link hover (light theme)
--rh-color-orange-40

Label - Filled (Orange) accent color
--rh-color-red-60

Dark brand red
--rh-color-yellow-40

Alert - Warning accent
--rh-color-purple-30
--rh-color-orange-60
--rh-color-green-40
--rh-size-icon-06

64px icon box
--rh-font-family-code

Code font family
--rh-color-text-secondary

Line number text uses the secondary text design token for reduced emphasis
--rh-font-weight-code-regular

Regular font weight
--rh-border-width-sm

Separator width between line numbers and code content

1px border width; Example: Secondary CTA or Button
--rh-color-border-subtle
--rh-line-height-code

Line height for code
--rh-border-radius-default

3px border radius; Example: Card
--rh-space-xs

4px spacer
--rh-color-text-primary
--rh-font-family-body-text

Body text font family
--rh-font-size-body-text-sm

14px font size
--rh-font-weight-body-text-regular

Regular font weight
--rh-line-height-body-text

Line height for body text
--rh-color-icon-secondary

Expand chevron uses the secondary icon design token
--rh-font-size-code-sm

14px font size
--rh-space-sm

6px spacer
--rh-font-size-code-md

16px font size
--rh-space-3xl

48px spacer
--rh-space-4xl

64px spacer
--rh-space-lg

16px spacer
--rh-space-md

8px spacer
Edit this page on GitHub
© 2026 Red Hat Deploys by Netlify