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 Select Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed OverviewColor PalettesCustomizingDevelopers All PatternsAccordionAlertCall 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 read-only code viewer for formatted snippets that allows syntax highlighting, line numbers, and copy/wrap actions. Source must be in a <script type="text/sample-..."> or <pre> child. The code region is keyboard-scrollable; screen readers announce it via ARIA as a scrollable area. Authors should avoid nesting interactive elements inside the code slot.

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

Space- or comma-separated list of action buttons to display. Accepts 'copy', 'wrap', or both (e.g. "copy wrap"). 'copy' adds a clipboard button; 'wrap' adds a word-wrap toggle. Defaults to [] (no actions shown). Labels can be overridden via the action-label-copy and action-label-wrap slots for internationalization. The active-state element must have hidden data-code-block-state="active".

<rh-code-block 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-copy" hidden data-code-block-state="failed">Copy failed!</span>
<span slot="action-label-wrap">Toggle word wrap</span>
<span slot="action-label-wrap" hidden data-code-block-state="active">Toggle overflow</span>
</rh-code-block>

Controls how syntax highlighting is applied. Accepts 'client' or 'prerendered'. When 'client', Prism.js is loaded on-demand and highlights source from <script> children. When 'prerendered', RHDS token colors are applied to existing Prism class names in child <pre> elements. Defaults to undefined (no highlighting).

Specifies the Prism.js grammar for client-side highlighting. Requires highlighting="client". Accepts 'html' | 'css' | 'javascript' | 'typescript' | 'bash' | 'ruby' | 'yaml' | 'json'. Defaults to undefined. When omitted, no syntax coloring is applied.

When true, reduces internal padding for tighter layouts. Defaults to false.

When true, strips common leading whitespace from source lines before rendering. Defaults to false.

When true, allows the user to vertically resize the code area by dragging. Defaults to false.

When true, the code block expands to its full height without scroll truncation. Defaults to false.

When true, long lines wrap instead of scrolling horizontally. Defaults to false.

Controls line-number visibility. Accepts 'hidden' or 'visible'. When 'hidden', the gutter column is removed. Defaults to undefined (visible).

 View source on GitHub

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