PatternFly Elements

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.

Overview

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

Installation

npm install @patternfly/elements

Usage

Basic

Place your code in a script tag with a non-javascript mimetype. JavaScript snippets must use the text/javascript-sample script type. Script text content will be automatically dedented.

To add copy-to-clipboard functionality, be sure to import @patternfly/pf-clipboard and add the pf-clipboard to the action slot.

View HTML Source

<pf-code-block id="basic">
<script type="application/openshift">
apiVersion: helm.openshift.io/v1beta1/
kind: HelmChartRepository
metadata:
name: azure-sample-repo
spec:
connectionConfig:
url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs
</script>
<pf-clipboard slot="actions" copy-from="#basic"></pf-clipboard>
</pf-code-block>

Expandable

If a block of code is long and you'd like to hide some of the code to take us less height on the page, place the code you'd like to hide in a span with slot="expandable-code".

It is important that you place the span right next to the <script type="application/openshift"> because of how the whitespace will be handled. Failing to do this can result in unwanted line breaks.

View HTML Source

<pf-code-block id="expandable-code">
<script type="application/openshift">
apiVersion: helm.openshift.io/v1beta1/
kind: HelmChartRepository
metadata:
name: azure-sample-repo
</script><script type="application/openshift" data-expand>
spec:
connectionConfig:
url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs
</script>
<pf-clipboard slot="actions" copy-from="#expandable-code"></pf-clipboard>
</pf-code-block>

Slots

code

The slot to put the code in

expandable-code

The slot to put the code in that should be revealed when the "Show more" button is clicked to expand the code-block

actions

Contains the actions for the code-block. For example, copy to clipboard.

Attributes

expanded

Indicates if the code-block has been expanded

DOM Property
expanded
Type
boolean
Default
false

Methods

None

Events

None

CSS Custom Properties

CSS Property Description Default
--pf-c-code-block--BackgroundColor #f0f0f0
--pf-c-code-block__header--BorderBottomWidth 1px
--pf-c-code-block__header--BorderBottomColor #d2d2d2
--pf-c-code-block__content--PaddingTop 1rem
--pf-c-code-block__content--PaddingRight 1rem
--pf-c-code-block__content--PaddingBottom 1rem
--pf-c-code-block__content--PaddingLeft 1rem
--pf-c-code-block__pre--FontSize 0.875rem
--pf-c-code-block__pre--FontFamily "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace

CSS Shadow Parts

None

© 2018-2023 Red Hat, Inc. Deploys by Netlify