PatternFly Elements Code Block

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

Read more about Code Block in the PatternFly Elements Code Block
documentation

Installation

Load via CDN:

``html

`

Or, if you are using NPM, install it

`bash
npm install @patternfly/pfe-code-block
`

Then once installed, import it to your application:

`js
import '@patternfly/pfe-code-block';
`

Usage

$3

Place your code in a script tag with a [non-javascript mimetype][mime].
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/pfe-clipboard and add the pfe-clipboard to the action slot.

`html



`

$3

If a block of code is long and you'd like to hide some of the code to take up
less height on the page, place the code you'd like to hide in a script with
data-expand attribute present.

It is important that you place the span right next to the first script,
because of how the whitespace will be handled. Failing to do this can result in
unwanted line breaks.

`html




``