Code block
On this page
On this page
Code Block
import '@rhds/elements/rh-code-block/rh-code-block.js';
```<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>
```Actions
import '@rhds/elements/rh-button/rh-button.js';
import '@rhds/elements/rh-code-block/rh-code-block.js';
import '@rhds/elements/rh-tooltip/rh-tooltip.js';
```rh-code-block {
margin-block-end: var(--rh-space-lg, 16px);
}
```<rh-code-block actions="wrap copy">
<span slot="action-label-copy">Copy to Clipboard</span>
<span slot="action-label-copy" hidden="" data-code-block-state="active">Copied!</span>
<span slot="action-label-wrap">Toggle word wrap</span>
<span slot="action-label-wrap" hidden="" data-code-block-state="active">Toggle overflow</span>
<script type="text/css">#content {
display: block;
background-color: var(--rh-color-surface-lighter, #f2f2f2);
border: var(--rh-border-width-sm, 1px) solid var(--rh-color-border-subtle-on-light, #c7c7c7);
border-block-start-width: var( --rh-code-block-border-block-start-width, var(--rh-border-width-sm, 1px));
font-family: var(--rh-font-family-code, RedHatMono, "Red Hat Mono", "Courier New", Courier, monospace);
color: var(--rh-color-text-primary-on-light, #151515);
padding: var(--rh-space-xl, 24px);
height: calc(100% - 2 * var(--rh-space-xl, 24px));
border-radius: var(--rh-border-radius-default, 3px);
max-width: 1000px;
max-height: 640px;
overflow-y: auto;
}</script>
</rh-code-block>
```Callout Badges
import '@rhds/elements/rh-code-block/rh-code-block.js';
import '@rhds/elements/rh-badge/rh-badge.js';
```<rh-code-block>
<script type="text/html"><p>Script tags in HTML must be escaped</p></script>
<rh-badge state="info">1</rh-badge>
<script type="text/html">
<p>other tags do not need to be escaped</p>
<marquee>Callouts can be placed </script><rh-badge state="info">2</rh-badge><script type="text/html">inline</marquee>
</script>
<dl slot="legend">
<dt><rh-badge state="info">1</rh-badge></dt>
<dd>Postfix callout</dd>
<dt><rh-badge state="info">2</rh-badge></dt>
<dd>Inline callout</dd>
</dl>
</rh-code-block>
<link rel="stylesheet" href="../rh-code-block-lightdom.css">
```Client Side Highlighting
import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';
import '@rhds/elements/rh-code-block/rh-code-block.js';
```rh-context-demo::part(demo) {
display: grid;
gap: var(--rh-space-sm, 6px);
}
```<rh-context-demo>
<rh-code-block dedent="" language="html" highlighting="client">
<script type="text/html">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Cards Galore!</title>
</head>
<body>
<main>
<rh-card>
<h2 slot="header">Card</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam eleifend elit sed est egestas, a sollicitudin mauris
tincidunt. Pellentesque vel dapibus risus. Nullam aliquam
felis orci, eget cursus mi lacinia quis. Vivamus at felis sem.</p>
<rh-cta slot="footer" priority="primary">
<a href="#">Call to action</a>
</rh-cta>
</rh-card>
</main>
</body>
</html>
</script>
</rh-code-block>
<rh-code-block dedent="" language="css" highlighting="client">
<script type="text/css">
rh-card.avatar-card {
width: 360px;
&::part(body) {
margin-block-start: var(--rh-space-lg, 16px);
}
& p {
margin-block-start: 0;
}
& h4 {
font-weight: var(--rh-font-weight-heading-regular, 300);
font-size: var(--rh-font-size-body-text-md, 1rem);
font-family: var(--rh-font-family-body-text);
line-height: var(--rh-line-height-body-text, 1.5);
}
}
</script>
</rh-code-block>
<rh-code-block dedent="" language="yaml" highlighting="client">
<script type="text/yaml">
extends:
- stylelint-config-standard
- '@stylistic/stylelint-config'
plugins:
- ./node_modules/@rhds/tokens/plugins/stylelint.js
- '@stylistic/stylelint-plugin'
rules:
rhds/token-values: true
rhds/no-unknown-token-name:
- true
- allowed:
- --rh-icon-size
</script>
</rh-code-block>
</rh-context-demo>
```Color Context
import '@rhds/elements/rh-code-block/rh-code-block.js';
import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';
```<rh-context-demo>
<rh-code-block actions="wrap copy">
<span slot="action-label-copy">Copy to Clipboard</span>
<span slot="action-label-copy" hidden="" data-code-block-state="active">Copied!</span>
<span slot="action-label-wrap">Toggle word wrap</span>
<span slot="action-label-wrap" hidden="" data-code-block-state="active">Toggle overflow</span>
<script type="text/text">Error: Error creating network Load Balancer: AccessDenied: User: arn:aws:sts::970xxxxxxxxx:assumed-role/ManagedOpenShift-Installer-Role/163xxxxxxxxxxxxxxxx is not authorized to perform: iam:CreateServiceLinkedRole on resource: arn:aws:iam::970xxxxxxxxx:role/aws-service-role/elasticloadbalancing.amazonaws.com/ AWSServiceRoleForElasticLoadBalancing
Error: Error creating network Load Balancer: AccessDenied: User: arn:aws:sts::970xxxxxxxxx:assumed-role/ManagedOpenShift-Installer-Role/163xxxxxxxxxxxxxxxx is not authorized to perform: iam:CreateServiceLinkedRole on resource: arn:aws:iam::970xxxxxxxxx:role/aws-service-role/elasticloadbalancing.amazonaws.com/ AWSServiceRoleForElasticLoadBalancing
Error: Error creating network Load Balancer: AccessDenied: User: arn:aws:sts::970xxxxxxxxx:assumed-role/ManagedOpenShift-Installer-Role/163xxxxxxxxxxxxxxxx is not authorized to perform: iam:CreateServiceLinkedRole on resource: arn:aws:iam::970xxxxxxxxx:role/aws-service-role/elasticloadbalancing.amazonaws.com/ AWSServiceRoleForElasticLoadBalancing
Error: Error creating network Load Balancer: AccessDenied: User: arn:aws:sts::970xxxxxxxxx:assumed-role/ManagedOpenShift-Installer-Role/163xxxxxxxxxxxxxxxx is not authorized to perform: iam:CreateServiceLinkedRole on resource: arn:aws:iam::970xxxxxxxxx:role/aws-service-role/elasticloadbalancing.amazonaws.com/ AWSServiceRoleForElasticLoadBalancing
Error: Error creating network Load Balancer: AccessDenied: User: arn:aws:sts::970xxxxxxxxx:assumed-role/ManagedOpenShift-Installer-Role/163xxxxxxxxxxxxxxxx is not authorized to perform: iam:CreateServiceLinkedRole on resource: arn:aws:iam::970xxxxxxxxx:role/aws-service-role/elasticloadbalancing.amazonaws.com/ AWSServiceRoleForElasticLoadBalancing
Error: Error creating network Load Balancer: AccessDenied: User: arn:aws:sts::970xxxxxxxxx:assumed-role/ManagedOpenShift-Installer-Role/163xxxxxxxxxxxxxxxx is not authorized to perform: iam:CreateServiceLinkedRole on resource: arn:aws:iam::970xxxxxxxxx:role/aws-service-role/elasticloadbalancing.amazonaws.com/ AWSServiceRoleForElasticLoadBalancing</script>
</rh-code-block>
</rh-context-demo>
```Prerendered Prism Highlighting
import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';
import '@rhds/elements/rh-code-block/rh-code-block.js';
```rh-context-demo::part(demo) {
display: grid;
gap: var(--rh-space-sm, 6px);
}
```<rh-context-demo>
<rh-code-block highlighting="prerendered" actions="copy wrap">
<span slot="action-label-copy">Copy to Clipboard</span>
<span slot="action-label-copy" hidden="" data-code-block-state="active">Copied!</span>
<span slot="action-label-wrap">Toggle word wrap</span>
<span slot="action-label-wrap" hidden="" data-code-block-state="active">Toggle overflow</span>
<pre class="language-html"><code class="language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Cards Galore!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>rh-card</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>header<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Card<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam eleifend elit sed est egestas, a sollicitudin mauris
tincidunt. Pellentesque vel dapibus risus. Nullam aliquam
felis orci, eget cursus mi lacinia quis. Vivamus at felis sem.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>rh-cta</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>footer<span class="token punctuation">"</span></span> <span class="token attr-name">priority</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Call to action<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>rh-cta</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>rh-card</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>main</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></code></pre>
</rh-code-block>
<rh-code-block highlighting="prerendered" actions="copy wrap">
<span slot="action-label-copy">Copy to Clipboard</span>
<span slot="action-label-copy" hidden="" data-code-block-state="active">Copied!</span>
<span slot="action-label-wrap">Toggle word wrap</span>
<span slot="action-label-wrap" hidden="" data-code-block-state="active">Toggle overflow</span>
<pre class="language-css"><code class="language-css"><span class="token selector">rh-card.avatar-card</span> <span class="token punctuation">{</span>
<span class="token property">width</span><span class="token punctuation">:</span> 360px<span class="token punctuation">;</span>
<span class="token selector">&::part(body)</span> <span class="token punctuation">{</span>
<span class="token property">margin-block-start</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--rh-space-lg<span class="token punctuation">,</span> 16px<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">& p</span> <span class="token punctuation">{</span>
<span class="token property">margin-block-start</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">& h4</span> <span class="token punctuation">{</span>
<span class="token property">font-weight</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--rh-font-weight-heading-regular<span class="token punctuation">,</span> 300<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--rh-font-size-body-text-md<span class="token punctuation">,</span> 1rem<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--rh-font-family-body-text<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">line-height</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--rh-line-height-body-text<span class="token punctuation">,</span> 1.5<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre>
</rh-code-block>
<rh-code-block highlighting="prerendered" actions="copy wrap">
<span slot="action-label-copy">Copy to Clipboard</span>
<span slot="action-label-copy" hidden="" data-code-block-state="active">Copied!</span>
<span slot="action-label-wrap">Toggle word wrap</span>
<span slot="action-label-wrap" hidden="" data-code-block-state="active">Toggle overflow</span>
<pre class="language-yaml"><code class="language-yaml"><span class="token key atrule">extends</span><span class="token punctuation">:</span>
<span class="token punctuation">-</span> stylelint<span class="token punctuation">-</span>config<span class="token punctuation">-</span>standard
<span class="token punctuation">-</span> <span class="token string">'@stylistic/stylelint-config'</span>
<span class="token key atrule">plugins</span><span class="token punctuation">:</span>
<span class="token punctuation">-</span> ./node_modules/@rhds/tokens/plugins/stylelint.js
<span class="token punctuation">-</span> <span class="token string">'@stylistic/stylelint-plugin'</span>
<span class="token key atrule">rules</span><span class="token punctuation">:</span>
<span class="token key atrule">rhds/token-values</span><span class="token punctuation">:</span> <span class="token boolean important">true</span>
<span class="token key atrule">rhds/no-unknown-token-name</span><span class="token punctuation">:</span>
<span class="token punctuation">-</span> <span class="token boolean important">true</span>
<span class="token punctuation">-</span> <span class="token key atrule">allowed</span><span class="token punctuation">:</span>
<span class="token punctuation">-</span> <span class="token punctuation">-</span><span class="token punctuation">-</span>rh<span class="token punctuation">-</span>icon<span class="token punctuation">-</span>size</code></pre>
</rh-code-block>
</rh-context-demo>
```Resizable
import '@rhds/elements/rh-code-block/rh-code-block.js';
```<rh-code-block resizable="">
<script type="text/text">Error: Error creating network Load Balancer: AccessDenied: User: arn:aws:sts::970xxxxxxxxx:assumed-role/ManagedOpenShift-Installer-Role/163xxxxxxxxxxxxxxxx is not authorized to perform: iam:CreateServiceLinkedRole on resource: arn:aws:iam::970xxxxxxxxx:role/aws-service-role/elasticloadbalancing.amazonaws.com/AWSServiceRoleForElasticLoadBalancing</script>
</rh-code-block>
```Sizes
import '@rhds/elements/rh-code-block/rh-code-block.js';
```rh-code-block {
margin-block-end: var(--rh-space-lg, 16px);
}
```<hgroup>
<h2>Sizes</h2>
<h3>Standard</h3>
</hgroup>
<rh-code-block>
<script type="application/shell">oc apply -f ostoy-microservice-deployment.yaml</script>
</rh-code-block>
<rh-code-block>
<script type="text/sample">$ podman login -u flozanorht quay.io
Password:
Login Succeeded!
$ skopeo copy docker://registry.access.redhat.com/ubi8/ubi:8.0-122 \
docker://quay.io/flozanorht/ubi:8
...
Writing manifest to image destination
Storing signatures</script>
</rh-code-block>
<h3>Compact</h3>
<rh-code-block compact="">
<script type="application/shell">oc apply -f ostoy-microservice-deployment.yaml</script>
</rh-code-block>
<rh-code-block compact="">
<script type="text/sample">$ podman login -u flozanorht quay.io
Password:
Login Succeeded!
$ skopeo copy docker://registry.access.redhat.com/ubi8/ubi:8.0-122 \
docker://quay.io/flozanorht/ubi:8
...
Writing manifest to image destination
Storing signatures</script>
</rh-code-block>
<h3>No fixed width</h3>
<rh-code-block style="width: max-content;">
<script type="application/shell">oc apply -f ostoy-microservice-deployment.yaml</script>
</rh-code-block>
<rh-code-block style="width: max-content;">
<script type="text/text">$ podman login -u flozanorht quay.io
Password:
Login Succeeded!
$ skopeo copy docker://registry.access.redhat.com/ubi8/ubi:8.0-122 \
docker://quay.io/flozanorht/ubi:8
...
Writing manifest to image destination
Storing signatures</script>
</rh-code-block>
<h3>Responsive sizes</h3>
<div style="max-width: 564px">
<rh-code-block>
<rh-code-action slot="actions" action="copy">Copy to Clipboard</rh-code-action>
<rh-code-action slot="actions" action="wrap">
Toggle
<span slot="inactive">line wrap</span>
<span slot="active">overflow</span>
</rh-code-action>
<script type="text/sample">$ podman login -u flozanorht quay.io
Password:
Login Succeeded!
$ skopeo copy docker://registry.access.redhat.com/ubi8/ubi:8.0-122 \
docker://quay.io/flozanorht/ubi:8
...
Writing manifest to image destination
Storing signatures</script>
</rh-code-block>
</div>
<div style="max-width: 328px">
<rh-code-block>
<rh-code-action slot="actions" action="copy">Copy to Clipboard</rh-code-action>
<rh-code-action slot="actions" action="wrap">
Toggle
<span slot="inactive">line wrap</span>
<span slot="active">overflow</span>
</rh-code-action>
<script type="text/sample">$ podman login -u flozanorht quay.io
Password:
Login Succeeded!
$ skopeo copy docker://registry.access.redhat.com/ubi8/ubi:8.0-122 \
docker://quay.io/flozanorht/ubi:8
...
Writing manifest to image destination
Storing signatures</script>
</rh-code-block>
</div>
```Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
