Skip to main content Home
About About the Design SystemRoadmap
Get started OverviewDesignersDevelopers
Foundations OverviewColorGridIconographyInteractionsSpacingTypography
Tokens Overview Global colorbox shadowTypographyborderopacityspacelengthIconBreakpointsMedia Queries
Elements All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Navigation (primary) Navigation (secondary) Pagination PopoverPlanned Progress stepsPlanned Site status Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed
Theming OverviewColor PalettesCustomizingDevelopers
Patterns All PatternsCardTabsFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTile
Personalization All Personalization PatternsAnnouncement
Accessibility FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers
Design/code status Release notes Get support

Code block

OverviewStyleGuidelinesCodeAccessibilityDemos
StyleColor schemeVariantsSpaceStyleColor schemeVariantsSpace

Style

A code block displays read-only code-formatted text within a flexible container.

Anatomy

Code block anatomy showing six annotations. See figcaption below for more information.
  1. Line numbers
  2. Code text
  3. Copy button
  4. Wrap button
  5. Expand/collapse
  6. Container

Color scheme

Code block is available for both light and dark color schemes.

Light scheme

Light scheme code block has a gray background and black text

Dark scheme

Dark scheme code block has a dark gray background thats slightly lighter than black and white text

Variants

Line numbers

A code block may or may not show line numbers.

Two code blocks, one with line numbers and one without
Property Light Scheme Dark Scheme
Line numbers text color --rh-color-text-secondary --rh-color-text-secondary
Line numbers border --rh-color-border-subtle --rh-color-border-subtle

Expand or collapse

A code block may expand or collapse to display more or less code. There must be at least 5 lines of code in order to display this feature.

Helpful tip

A code block is always collapsed by default if there are at least 5 lines of code.

 Three code blocks. One short, 3 line code block without an expand button. The next is a collapsed code block that has more than 5 lines with an expand/collapse button. The third is an expanded code block.

Space

Code block has 24px padding around the outer edges, 16px between the line numbers and the code excerpt, 8px around the show more button, and 16px margin top between the code and the show more button.
Edit this page on GitHub
© 2025 Red Hat Deploys by Netlify