Code block

OverviewStyleGuidelinesCodeAccessibilityDemos
  1. Installation
  2. Usage
  1. Installation
  2. Usage

Installation

We recommend import maps when building pages with RHDS. Learn more about how to install on our getting started docs.

Red Hat CDN 
<script type="importmap">
{
  "imports": {
    "@rhds/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@2.1.0/elements/",
  }
}
</script>
Copy to Clipboard Wrap lines NPM 
npm install @rhds/elements
Copy to Clipboard Wrap lines JSPM 
<script type="importmap">
{
  "imports": {
    "@rhds/elements/rh-code-block/rh-code-block.js": "https://ga.jspm.io/npm:@rhds/elements@2.1.0/rh-code-block/rh-code-block.js"
  },
  "scopes": {
    "https://ga.jspm.io/": {
      "@floating-ui/core": "https://ga.jspm.io/npm:@floating-ui/core@1.6.8/dist/floating-ui.core.mjs",
      "@floating-ui/dom": "https://ga.jspm.io/npm:@floating-ui/dom@1.6.11/dist/floating-ui.dom.mjs",
      "@floating-ui/utils": "https://ga.jspm.io/npm:@floating-ui/utils@0.2.8/dist/floating-ui.utils.mjs",
      "@floating-ui/utils/dom": "https://ga.jspm.io/npm:@floating-ui/utils@0.2.8/dist/floating-ui.utils.dom.mjs",
      "@lit/context": "https://ga.jspm.io/npm:@lit/context@1.1.3/development/index.js",
      "@lit/reactive-element": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/reactive-element.js",
      "@lit/reactive-element/decorators/": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/decorators/",
      "@patternfly/pfe-core": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/core.js",
      "@patternfly/pfe-core/": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/",
      "@patternfly/pfe-core/ssr-shims.js": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/core.js",
      "@rhds/elements/lib/": "https://ga.jspm.io/npm:@rhds/elements@2.1.0/lib/",
      "@rhds/elements/": "https://ga.jspm.io/npm:@rhds/elements@2.1.0/elements/",
      "@rhds/icons": "https://ga.jspm.io/npm:@rhds/icons@1.1.2/icons.js",
      "@rhds/icons/ui/": "https://ga.jspm.io/npm:@rhds/icons@1.1.2/ui/",
      "@rhds/tokens/css/": "https://ga.jspm.io/npm:@rhds/tokens@2.1.0/css/",
      "@rhds/tokens/media.js": "https://ga.jspm.io/npm:@rhds/tokens@2.1.0/js/media.js",
      "lit": "https://ga.jspm.io/npm:lit@3.2.1/index.js",
      "lit-element/lit-element.js": "https://ga.jspm.io/npm:lit-element@4.1.1/development/lit-element.js",
      "lit-html": "https://ga.jspm.io/npm:lit-html@3.2.1/development/lit-html.js",
      "lit-html/": "https://ga.jspm.io/npm:lit-html@3.2.1/development/",
      "lit/": "https://ga.jspm.io/npm:lit@3.2.1/",
      "prism-esm": "https://ga.jspm.io/npm:prism-esm@1.29.0-fix.6/prism.js",
      "prism-esm/components/": "https://ga.jspm.io/npm:prism-esm@1.29.0-fix.6/components/",
      "tslib": "https://ga.jspm.io/npm:tslib@2.8.0/tslib.es6.mjs"
    }
  }
}
</script>
Copy to Clipboard Wrap lines

Add it to your page with this import statement

<script type="module">
  import '@rhds/elements/rh-code-block/rh-code-block.js';
</script>
Copy to Clipboard Wrap lines

Lightdom CSS

This element requires you to load "Lightdom CSS" stylesheets for styling deeply slotted elements.

Note

Replace /path/to/ with path to the CSS file, whether local or CDN.

 
<link rel="stylesheet" href="/path/to/rh-code-block/rh-code-block-lightdom.css">

Usage

<rh-code-block>
<script type="text/html"><!DOCTYPE html>
<title>Title</title>
<style>body {width: 500px;}</style>
<script type="application/javascript">
  function $init() {return true;}
<</script><script type="text/html">/script>
<body>
  <p checked class="title" id="title">Title</p>
  <!-- here goes the rest of the page -->
</body></script>
</rh-code-block>

<script type="module">
  import '@rhds/elements/rh-code-block/rh-code-block.js';
</script>
Copy to Clipboard Wrap lines

The content of code-block snippets must be contained within a non-executable <script> tag. By "non-executable", we mean that the script element must have a type attribute which is not module, importmap javascript, or any of the executable javascript mimetypes. With the exception of javascript, use the correct mime type for your content, e.g. text/html for HTML content.

<rh-code-block>
  <script type="text/html">
<!DOCTYPE html>
<title>Title</title>
<style>body {width: 500px;}</style>
<body>
  <p checked class="title" id="title">Title</p>
    <!-- here goes the rest of the page -->
</body>
  </script>
</rh-code-block>

Warning

When slotting HTML content into the code-block, if that HTML content contains a </script> end tag, you must escape it.

One approach to escaping script tags that is to close the containing <script type="text/html"> within the sample's closing script tag, then immediately open a new sample script tag containing the rest of the snippet. Another method is to insert a zero-width-joiner (or some other unusual unicode character) in the closing script tag, and use javascript to remove it before copying the content to the clipboard. Each method has benefits and drawbacks.

<rh-code-block>
  <script type="text/html">
<p>Script tags in HTML must be escaped</p>
<script>console.log('Success!');<</script><script type="text/html">/script>
  </script>
</rh-code-block>

To add javascript content, use the text/sample-javascript type.

<rh-code-block>
  <script type="text/sample-javascript">
  import '@rhds/elements/rh-code-block/rh-code-block.js';
  </script>
</rh-code-block>

rh-code-block

A code block is formatted text within a container.

Slots 6
Slot Name Description

A non-executable script tag containing the sample content. JavaScript samples should use the type text/sample-javascript. HTML samples containing script tags must escape the closing </script> tag. Can also be a <pre> tag.
action-label-copy

tooltip content for the copy action button
action-label-wrap

tooltip content for the wrap action button
show-more

text content for the expandable toggle button when the code block is collapsed.
show-less

text content for the expandable toggle button when the code block is expanded.
legend

<dl> element containing rh-badges in the <dt> and legend text in the <dd> elements
Attributes 8
Attribute DOM Property Description Type Default
actions actions 
('copy' | 'wrap')[]
 
[]
highlighting highlighting

When set to "client", <rh-code-block> will automatically highlight the source using Prism.js When set to "Prerendered", <rh-code-block> will apply supported RHDS styles to children with prismjs classnames in the element's root.

 
'client' | 'prerendered' | undefined
 
unknown
language language

When set along with highlighting="client", this grammar will be used to highlight source code

 
| 'html' | 'css' | 'javascript' | 'typescript' | 'bash' | 'ruby' | 'yaml' | 'json' | undefined
 
unknown
compact compact

When set, the code block displays with compact spacing

 
boolean
 
false
dedent dedent

When set, the code block source code will be dedented

 
boolean
 
false
resizable resizable

When set, the code block is resizable

 
boolean
 
false
full-height fullHeight

When set, the code block occupies it's full height, without scrolling

 
boolean
 
false
wrap wrap

When set, lines in the code snippet wrap

 
boolean
 
false
Methods 0
None
Events 0
None
CSS Shadow Parts 0
None
CSS Custom Properties 0
None
Design Tokens 45
Token Copy
--rh-border-radius-default
--rh-border-width-sm
--rh-color-blue-10
--rh-color-blue-40
--rh-color-blue-60
--rh-color-border-subtle
--rh-color-gray-20
--rh-color-gray-40
--rh-color-gray-95
--rh-color-green-40
--rh-color-icon-secondary
--rh-color-orange-40
--rh-color-orange-60
--rh-color-purple-30
--rh-color-purple-50
--rh-color-red-10
--rh-color-red-40
--rh-color-red-60
--rh-color-surface-dark
--rh-color-surface-dark-alt
--rh-color-surface-light
--rh-color-surface-lighter
--rh-color-teal-20
--rh-color-teal-60
--rh-color-text-primary
--rh-color-text-secondary
--rh-color-yellow-40
--rh-color-yellow-60
--rh-font-family-body-text
--rh-font-family-code
--rh-font-size-body-text-sm
--rh-font-size-code-md
--rh-font-weight-body-text-regular
--rh-font-weight-code-regular
--rh-length-3xl
--rh-line-height-body-text
--rh-line-height-code
--rh-size-icon-02
--rh-size-icon-06
--rh-space-3xl
--rh-space-4xl
--rh-space-lg
--rh-space-md
--rh-space-sm
--rh-space-xl
Edit this page on GitHub