Code block

Overview Style Guidelines Code Demos Accessibility

Usage
rh-code-block

Usage
rh-code-block

Installation

Learn more about how to install on our getting started docs.

Red Hat CDN

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

Import Map Example

<script type="importmap">
  {
    "imports": {
      "@rhds/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@2.0.1/elements/",
    }
  }
</script>

NPM

npm install @rhds/elements

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

JSPM

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

Import Map Example

<script type="importmap">
{
  "imports": {
    "@rhds/elements/rh-code-block/rh-code-block.js": "./elements/rh-code-block/rh-code-block.js"
  },
  "scopes": {
    "./": {
      "@patternfly/pfe-core/controllers/": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.2/controllers/",
      "@rhds/tokens/css/color-context-consumer.css.js": "https://ga.jspm.io/npm:@rhds/tokens@2.1.0-next.15/css/color-context-consumer.css.js",
      "lit": "https://ga.jspm.io/npm:lit@3.2.0/index.js",
      "lit-html/directives/if-defined.js": "https://ga.jspm.io/npm:lit-html@3.2.0/development/directives/if-defined.js",
      "lit/": "https://ga.jspm.io/npm:lit@3.2.0/",
      "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.7.0/tslib.es6.mjs"
    },
    "https://ga.jspm.io/": {
      "@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/",
      "lit": "https://ga.jspm.io/npm:lit@3.2.0/index.js",
      "lit-element/lit-element.js": "https://ga.jspm.io/npm:lit-element@4.1.0/development/lit-element.js",
      "lit-html": "https://ga.jspm.io/npm:lit-html@3.2.0/development/lit-html.js",
      "lit-html/": "https://ga.jspm.io/npm:lit-html@3.2.0/development/",
      "tslib": "https://ga.jspm.io/npm:tslib@2.7.0/tslib.es6.mjs"
    }
  }
}
</script>

Lightdom CSS

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

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

Note

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

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

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`		`unknown`	new Map([ ['wrap', html` <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20"> <path d="M19 0c.313.039.781-.077 1 .057V20c-.313-.039-.781.077-1-.057V0ZM10.82 4.992C9.877 4.996 8.31 5.57 8.174 6c1.21.03 2.432-.073 3.635.08 2.181.383 3.677 2.796 3.066 4.922-.41 1.753-2.108 2.995-3.877 3.014L11 14H5.207l2.682-2.682-.707-.707L3.293 14.5l3.889 3.889.707-.707L5.207 15h5.736l.004-.008c1.444.005 2.896-.59 3.832-1.722 1.65-1.82 1.612-4.85-.08-6.63A5 5 0 0 0 11 5a1.948 1.948 0 0 0-.18-.008z"/> <path d="M4 5h7c-.039.313.077.781-.057 1H4V5ZM0 0c.313.039.781-.077 1 .057V20c-.313-.039-.781.077-1-.057V0Z"/> </svg> `], ['wrap-active', html` <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 21 20"> <path fill="currentColor" d="M12 13h1v7h-1zM12 0h1v7h-1z"/> <path stroke="currentColor" d="M16.465 6.464 20 10l-3.535 3.536"/> <path fill="currentColor" d="M3 9.5h17v1H3zM0 0h1v20H0z"/> </svg> `], ['copy', html` <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 20 20"> <path fill="currentColor" d="M12 0H2C.9 0 0 .9 0 2v10h1V2c0-.6.4-1 1-1h10V0z"/> <path fill="currentColor" d="M18 20H8c-1.1 0-2-.9-2-2V8c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2v10c0 1.1-.9 2-2 2zM8 7c-.6 0-1 .4-1 1v10c0 .6.4 1 1 1h10c.6 0 1-.4 1-1V8c0-.6-.4-1-1-1H8z"/> </svg> `], ])
`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 47

Token	Copy
`--rh-animation-speed`
`--rh-animation-timing`
`--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

Code block

Installation

Lightdom CSS

Note

Usage

Warning

rh-code-block

Other libraries

Feedback

Red Hat legal and privacy links

Red Hat legal and privacy links

Code block

Installation

Lightdom CSS

Note

Usage

Warning

rh-code-block

Other libraries

Feedback

Related elements or patterns

Red Hat legal and privacy links

Red Hat legal and privacy links