Code block

Overview Style Guidelines Code Demos Accessibility
  1. Usage
  2. rh-code-block
  1. Usage
  2. 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 JSPM

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.

Usage

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 Methods 0 Events 0 CSS Shadow Parts 0 CSS Custom Properties 0 Design Tokens 45
Edit this page on GitHub