Skip to content
PatternFly

Code editor

Examples

Default

HTML 
                code goes here

Read-only

HTML 
                code goes here

Without actions

YAML

Start editing

Drag a file here or browse to upload.

Drag file and hover over component

YAML

Start editing

Drag a file here or browse to upload.

With optional header content and keyboard shortcuts

Header main content
HTML 
                code goes here

Documentation

Usage

Class
Applied to
Outcome
.pf-v5-c-code-editor
<div>
Initiates the code editor component. Required
.pf-v5-c-code-editor__header
<div>
Initiates the code editor header used for the controls and tab elements. Required
.pf-v5-c-code-editor__main
<div>
Initiates the main container for a code editor e.g. Monaco Required
.pf-v5-c-code-editor__code
<div>
Initiates the container for code without a JS code editor. Comes with PatternFly styling.
.pf-v5-c-code-editor__controls
<div>
Initiates the code editor controls.
.pf-v5-c-code-editor__header-main
<div>
Initiates the code editor header content area.
.pf-v5-c-code-editor__keyboard-shortcuts
<div>
Initiates the code editor header keyboard shortcuts area.
.pf-v5-c-code-editor__tab
<div>
Initiates the code editor tab.
.pf-v5-c-code-editor__tab-text
<span>
Initiates the code editor tab text.
.pf-v5-c-code-editor__tab-icon
<span>
Initiates the code editor tab icon.

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v5-c-code-editor--pf-v5-c-code-editor__controls--c-button--m-control--Color
#6a6e73
.pf-v5-c-code-editor--pf-v5-c-code-editor__controls--c-button--m-control--hover--Color
#151515
.pf-v5-c-code-editor--pf-v5-c-code-editor__controls--c-button--m-control--focus--Color
#151515
.pf-v5-c-code-editor--pf-v5-c-code-editor__controls--c-button--m-control--disabled--after--BorderBottomColor
#d2d2d2
.pf-v5-c-code-editor--pf-v5-c-code-editor__header--before--BorderBottomWidth
1px
.pf-v5-c-code-editor--pf-v5-c-code-editor__header--before--BorderBottomColor
#d2d2d2
.pf-v5-c-code-editor--pf-v5-c-code-editor__main--BorderColor
#d2d2d2
.pf-v5-c-code-editor--pf-v5-c-code-editor__main--BorderWidth
1px
.pf-v5-c-code-editor--pf-v5-c-code-editor__main--BackgroundColor
#fff
.pf-v5-c-code-editor--pf-v5-c-code-editor--m-read-only__main--BackgroundColor
#f0f0f0
.pf-v5-c-code-editor--pf-v5-c-code-editor__main--m-drag-hover--before--BorderWidth
1px
.pf-v5-c-code-editor--pf-v5-c-code-editor__main--m-drag-hover--before--BorderColor
#06c
.pf-v5-c-code-editor--pf-v5-c-code-editor__main--m-drag-hover--after--BackgroundColor
#06c
.pf-v5-c-code-editor--pf-v5-c-code-editor__main--m-drag-hover--after--Opacity
.1
.pf-v5-c-code-editor--pf-v5-c-code-editor__code--PaddingTop
0.5rem
.pf-v5-c-code-editor--pf-v5-c-code-editor__code--PaddingRight
0.5rem
.pf-v5-c-code-editor--pf-v5-c-code-editor__code--PaddingBottom
0.5rem
.pf-v5-c-code-editor--pf-v5-c-code-editor__code--PaddingLeft
0.5rem
.pf-v5-c-code-editor--pf-v5-c-code-editor__code-pre--FontSize
0.875rem
.pf-v5-c-code-editor--pf-v5-c-code-editor__code-pre--FontFamily
'"RedHatMono", "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace'
.pf-v5-c-code-editor--pf-v5-c-code-editor__header-main--PaddingRight
0.5rem
.pf-v5-c-code-editor--pf-v5-c-code-editor__header-main--PaddingLeft
0.5rem
.pf-v5-c-code-editor--pf-v5-c-code-editor__tab--BackgroundColor
#fff
.pf-v5-c-code-editor--pf-v5-c-code-editor__tab--Color
#6a6e73
.pf-v5-c-code-editor--pf-v5-c-code-editor__tab--PaddingTop
0.375rem
.pf-v5-c-code-editor--pf-v5-c-code-editor__tab--PaddingRight
0.5rem
.pf-v5-c-code-editor--pf-v5-c-code-editor__tab--PaddingBottom
0.375rem
.pf-v5-c-code-editor--pf-v5-c-code-editor__tab--PaddingLeft
0.5rem
.pf-v5-c-code-editor--pf-v5-c-code-editor__tab--BorderTopWidth
1px
.pf-v5-c-code-editor--pf-v5-c-code-editor__tab--BorderRightWidth
1px
.pf-v5-c-code-editor--pf-v5-c-code-editor__tab--BorderBottomWidth
0
.pf-v5-c-code-editor--pf-v5-c-code-editor__tab--BorderLeftWidth
1px
.pf-v5-c-code-editor--pf-v5-c-code-editor__tab--BorderColor
#d2d2d2
.pf-v5-c-code-editor--pf-v5-c-code-editor__tab-icon--text--MarginLeft
0.5rem
.pf-v5-c-code-editor.pf-m-read-only--pf-v5-c-code-editor__main--BackgroundColor
#f0f0f0
.pf-v5-c-code-editor__controls .pf-v5-c-button.pf-m-control--pf-v5-c-button--m-control--Color
#6a6e73
.pf-v5-c-code-editor__controls .pf-v5-c-button.pf-m-control:hover--pf-v5-c-code-editor__controls--c-button--m-control--Color
#151515
.pf-v5-c-code-editor__controls .pf-v5-c-button.pf-m-control:focus--pf-v5-c-code-editor__controls--c-button--m-control--Color
#151515

View source on GitHub