Code block

A code block is a component that contains 2 or more lines of read-only code. The code in a code block can be copied to the clipboard.

Important note: to format code exactly as it is, you should use String.raw`your code here`.

Using String.raw`` will keep all the special characters like \n or \t.

Examples

Basic

apiVersion: helm.openshift.io/v1beta1/
kind: HelmChartRepository
metadata:
name: azure-sample-repo0oooo00ooo
spec:
connectionConfig:
url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs

Expandable

apiVersion: helm.openshift.io/v1beta1/
kind: HelmChartRepository
metadata:
name: azure-sample-repospec:
connectionConfig:
url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs

Props

CodeBlock

*required
Name	Type	Default	Description
actions	React.ReactNode	null	Actions in the code block header. Should be wrapped with CodeBlockAction.
children	React.ReactNode	null	Content rendered inside the code block
className	string		Additional classes passed to the code block wrapper

CodeBlockAction

*required
Name	Type	Default	Description
children	React.ReactNode	null	Content rendered inside the code block action
className	string		Additional classes passed to the code block action

CodeBlockCode

*required
Name	Type	Default	Description
children	React.ReactNode	null	Code rendered inside the code block
className	string		Additional classes passed to the code block pre wrapper
codeClassName	string		Additional classes passed to the code block code

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v5-c-code-block	--pf-v5-c-code-block--BackgroundColor	#f0f0f0
--pf-v5-c-code-block--BackgroundColor --pf-v5-global--BackgroundColor--200 $pf-v5-global--BackgroundColor--200 $pf-v5-color-black-200 #f0f0f0
	.pf-v5-c-code-block	--pf-v5-c-code-block__header--BorderBottomWidth	1px
--pf-v5-c-code-block__header--BorderBottomWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px
	.pf-v5-c-code-block	--pf-v5-c-code-block__header--BorderBottomColor	#d2d2d2
--pf-v5-c-code-block__header--BorderBottomColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2
	.pf-v5-c-code-block	--pf-v5-c-code-block__content--PaddingTop	1rem
--pf-v5-c-code-block__content--PaddingTop --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-code-block	--pf-v5-c-code-block__content--PaddingRight	1rem
--pf-v5-c-code-block__content--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-code-block	--pf-v5-c-code-block__content--PaddingBottom	1rem
--pf-v5-c-code-block__content--PaddingBottom --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-code-block	--pf-v5-c-code-block__content--PaddingLeft	1rem
--pf-v5-c-code-block__content--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-code-block	--pf-v5-c-code-block__pre--FontFamily	'"RedHatMono", "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace'
--pf-v5-c-code-block__pre--FontFamily --pf-v5-global--FontFamily--monospace $pf-v5-global--FontFamily--monospace '"RedHatMono", "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace'
	.pf-v5-c-code-block	--pf-v5-c-code-block__pre--FontSize	0.875rem
--pf-v5-c-code-block__pre--FontSize --pf-v5-global--FontSize--sm $pf-v5-global--FontSize--sm pf-font-prem(14px) 0.875rem

View source on GitHub