Code block

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-v6-c-code-block	--pf-v6-c-code-block--BackgroundColor	(In light theme) #f2f2f2
--pf-v6-c-code-block--BackgroundColor --pf-t--global--background--color--secondary--default --pf-t--global--background--color--200 --pf-t--color--gray--10 #f2f2f2
	.pf-v6-c-code-block	--pf-v6-c-code-block--BorderRadius	16px
--pf-v6-c-code-block--BorderRadius --pf-t--global--border--radius--medium --pf-t--global--border--radius--300 16px
	.pf-v6-c-code-block	--pf-v6-c-code-block__header--BorderBlockEndWidth	1px
--pf-v6-c-code-block__header--BorderBlockEndWidth --pf-t--global--border--width--divider--default --pf-t--global--border--width--100 1px
	.pf-v6-c-code-block	--pf-v6-c-code-block__header--BorderBlockEndColor	(In light theme) #c7c7c7
--pf-v6-c-code-block__header--BorderBlockEndColor --pf-t--global--border--color--default --pf-t--global--border--color--100 --pf-t--color--gray--30 #c7c7c7
	.pf-v6-c-code-block	--pf-v6-c-code-block__header--PaddingBlockStart	0.25rem
--pf-v6-c-code-block__header--PaddingBlockStart --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-code-block	--pf-v6-c-code-block__header--PaddingBlockEnd	0.25rem
--pf-v6-c-code-block__header--PaddingBlockEnd --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-code-block	--pf-v6-c-code-block__header--PaddingInlineEnd	0.5rem
--pf-v6-c-code-block__header--PaddingInlineEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-code-block	--pf-v6-c-code-block__header--PaddingInlineStart	0.5rem
--pf-v6-c-code-block__header--PaddingInlineStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-code-block	--pf-v6-c-code-block__content--PaddingBlockStart	1rem
--pf-v6-c-code-block__content--PaddingBlockStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-code-block	--pf-v6-c-code-block__content--PaddingInlineEnd	1rem
--pf-v6-c-code-block__content--PaddingInlineEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-code-block	--pf-v6-c-code-block__content--PaddingBlockEnd	1rem
--pf-v6-c-code-block__content--PaddingBlockEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-code-block	--pf-v6-c-code-block__content--PaddingInlineStart	1rem
--pf-v6-c-code-block__content--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-code-block	--pf-v6-c-code-block__pre--FontFamily	"Red Hat Mono", "RedHatMono", "Courier New", Courier, monospace
--pf-v6-c-code-block__pre--FontFamily --pf-t--global--font--family--mono --pf-t--global--font--family--300 "Red Hat Mono", "RedHatMono", "Courier New", Courier, monospace
	.pf-v6-c-code-block	--pf-v6-c-code-block__pre--FontSize	0.75rem
--pf-v6-c-code-block__pre--FontSize --pf-t--global--font--size--xs --pf-t--global--font--size--100 0.75rem

View source on GitHub