Code block

OverviewStyleGuidelinesCodeAccessibilityDemos
  1. Usage
  2. Sizes
  3. Content
  4. Responsive design
  5. Best practices
  1. Usage
  2. Sizes
  3. Content
  4. Responsive design
  5. Best practices

Usage

Use a code block to highlight code text only, no other styles should be included.

When to use a code block

If a block of code text needs to be highlighted separate from paragraphs or other elements, use a code block.

Sizes

A code block container can adhere to the width of content within or be fixed width.

Image of fluid width and fixed width code block sizes with text labels below

Content

The length of code text and the number of lines can change the width and height of a code block.

Image of two code blocks; one code block is fluid width showing only one line and the other code block is fixed width showing 10 lines

Responsive design

Large breakpoints

Image of code blocks on desktop and tablet breakpoints

Small breakpoints

Container spacing and code text size reduces as breakpoints get smaller.

Image of code blocks on large and small mobile breakpoints

Best practices

Font family

Code block text using Red Hat Mono

Use --rh-font-family-code.

 Code block text using Red Hat Text

Do not use a different font family token than --rh-font-family-code.

Customizing

Code block using default styling

Use the available options for customizing code block. (Adjusting syntax highlighting is ok.)

 Code block with white background and black border

Do not change the code block styling, especially if it will look like other text containers on the same page.
Edit this page on GitHub