Code Block

Installation

We recommend loading elements via a CDN such as JSPM and using an import map to manage your dependencies.

For more information on import maps and how to use them, see the import map reference on MDN Web Docs.

If you are using node and NPM, you can install this component using npm:

npm install @patternfly/elements

Then import this component into your project by using a bare module specifier:

import '@patternfly/elements/pf-code-block/pf-code-block.js'

Please Note: You should either load elements via a CDN or install them locally through NPM. Do not do both.

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.

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

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