Codeblock

Overview

Render code in a styled and formatted way.

Default

    
<h1>example html</h1>
<p>some paragraph text</p>
    
  

With a dark theme

    
h1 {
  font-size: 36px;
}
h3 {
  margin-top: 0.83em;
  font-weight: 500;
}
.header-ctas {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
    
  

Installation

npm install @patternfly/pfe-codeblock

Usage

Default

    
<h1>example html</h1>
<p>some paragraph text</p>
    
  

<pfe-codeblock>
  <pre codeblock-container>
    <code>
&lt;h1&gt;example html&lt;/h1&gt;
&lt;p&gt;some paragraph text&lt;/p&gt;
    </code>
  </pre>
</pfe-codeblock>

Specify a coding language

    
const example="javascript";
let test=null;
    
  

<pfe-codeblock code-language="javascript">
  <pre codeblock-container>
    <code>
const example="javascript";
let test=null;
    </code>
  </pre>
</pfe-codeblock>

Add line numbers

    
h1 {
  font-size: 36px;
}
h3 {
  margin-top: 0.83em;
  font-weight: 500;
}
.header-ctas {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
    
  

<pfe-codeblock code-language="css" code-line-numbers>
  <pre codeblock-container>
    <code>
h1 {
  font-size: 36px;
}
h3 {
  margin-top: 0.83em;
  font-weight: 500;
}
.header-ctas {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
    </code>
  </pre>
</pfe-codeblock>

Start at a specific line number

    
h1 {
  font-size: 36px;
}
h3 {
  margin-top: 0.83em;
  font-weight: 500;
}
.header-ctas {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
    
  

<pfe-codeblock code-language="css" code-line-numbers code-line-number-start="30">
  <pre codeblock-container>
    <code>
h1 {
  font-size: 36px;
}
h3 {
  margin-top: 0.83em;
  font-weight: 500;
}
.header-ctas {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
    </code>
  </pre>
</pfe-codeblock>

Use the dark theme

    
const example="javascript";
let test=null;
    
  

<pfe-codeblock code-language="javascript" code-theme="dark">
  <pre codeblock-container>
    <code>
const example="javascript";
let test=null;
    </code>
  </pre>
</pfe-codeblock>

Slots

Default

Used to pass in the <pre codeblock-container> and <code> elements.

Attributes

code-language

Specify a code language for display. Possible values are:

• markup (default)
• html
• xml
• svg
• mathml
• css
• clike
• javascript
• js

code-line-numbers

Optional boolean attribute that, when present, shows line numbers in the code block.

code-line-numbers-start

Set the line number start value

code-theme

Set the theme of the code block. Possible values are:

• light (default)
• dark

Methods

None

Events

None

Styling hooks

None