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
OverviewStatusWhen to useStatus checklistOverviewStatusWhen to useStatus checklist

Overview

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.

import '@rhds/elements/rh-code-block/rh-code-block.js';
 
<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>
 
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 = () => (
  <meta itemprop="description" content="Basic code block displaying an HTML snippet with line numbers." />
  <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>
);

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>

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.

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

When set, the code block displays with compact spacing

When set, the code block source code will be dedented

When set, the code block is resizable

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

When set, lines in the code snippet wrap

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

Status

When to use

  • Visually separate and highlight code text from other elements on the page

Status checklist

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