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 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 

<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 applies special formatting to sections of code.

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.
Note: [default] unnamed slots do not have a slot="name" attribute.
action-label-copy

Tooltip content for the copy action button
action-label-wrap

Tooltip content for the wrap action button
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 requests to copy the code block text. Modify the event.content field to change the copied text (e.g. to remove a prompt from a shell command)

CSS Shadow Parts 0

None

CSS Custom Properties 2

CSS Property Description Default
--rh-code-block-callout-size var(--rh-size-icon-02, 24px)
--rh-code-block-border-block-start-width var(--rh-border-width-sm, 1px)

Design Tokens 44

Token Description Copy
--rh-length-3xl

48px length token
--rh-color-surface
--rh-size-icon-02

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

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

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

24px 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-border-radius-default

3px border radius; Example: Card
--rh-size-icon-06

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

Code font family
--rh-color-text-secondary
--rh-font-weight-code-regular

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

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

Line height for code
--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
--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