Code block
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](../code-block-sizes.png)
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](../code-block-content.png)
Responsive design
Large breakpoints
![Image of code blocks on desktop and tablet breakpoints](../code-block-breakpoints-large.png)
Small breakpoints
Container spacing and code text size reduces as breakpoints get smaller.
![Image of code blocks on large and small mobile breakpoints](../code-block-breakpoints-small.png)
Best practices
Different font
Do not use a different font than --rh-font-family-code
.
![Image of a code block showing the Red Hat Text font used for code text which is incorrect usage](../code-block-best-practice-1.png)
Different styling
Do not change any of the code block styling.
![Image of a code block showing different styles which is incorrect usage](../code-block-best-practice-2.png)
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.