Codeblock

Overview

Render code in a styled and formatted way. <pfe-codeblock> highlights code snippets on the page.

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

Attributes

code-language

Specify a code language for display. Possible values are:

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

DOM Property

codeLanguage

Type

'markup'|'html'|'xml'|'svg'|'mathml'|'css'|'clike'|'javascript'|'js'

Default

'markup'

code-line-numbers

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

DOM Property

codeLineNumbers

Type

boolean

Default

false

code-theme

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

• light (default)
• dark

DOM Property

codeTheme

Type

'dark'|'light'

Default

'light'

code-line-number-start

Set the line number start value

DOM Property

codeLineNumberStart

Type

number

Default

1

DOM Properties

codeblock

String code source. Set to render the provided block

Type

string

Default

''

Methods

Events

CSS Custom Properties

CSS Shadow Parts

pre

The <pre> container for the codeblock

code

The <code> element containing the rendered codeblock