PatternFly

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-repo

Props

CodeBlock

*required
NameTypeDefaultDescription
actionsReact.ReactNodenullActions in the code block header. Should be wrapped with CodeBlockAction.
childrenReact.ReactNodenullContent rendered inside the code block
classNamestringAdditional classes passed to the code block wrapper

CodeBlockAction

*required
NameTypeDefaultDescription
childrenReact.ReactNodenullContent rendered inside the code block action
classNamestringAdditional classes passed to the code block action

CodeBlockCode

*required
NameTypeDefaultDescription
childrenReact.ReactNodenullCode rendered inside the code block
classNamestringAdditional classes passed to the code block pre wrapper
codeClassNamestringAdditional classes passed to the code block code

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v5-c-code-block--pf-v5-c-code-block--BackgroundColor
#f0f0f0
.pf-v5-c-code-block--pf-v5-c-code-block__header--BorderBottomWidth
1px
.pf-v5-c-code-block--pf-v5-c-code-block__header--BorderBottomColor
#d2d2d2
.pf-v5-c-code-block--pf-v5-c-code-block__content--PaddingTop
1rem
.pf-v5-c-code-block--pf-v5-c-code-block__content--PaddingRight
1rem
.pf-v5-c-code-block--pf-v5-c-code-block__content--PaddingBottom
1rem
.pf-v5-c-code-block--pf-v5-c-code-block__content--PaddingLeft
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--pf-v5-c-code-block__pre--FontSize
0.875rem

View source on GitHub