Code editor

A code editor is a versatile Monaco-based text editor that supports various programming languages.

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-v6-c-code-editor
<div>
Initiates the code editor component. Required
.pf-v6-c-code-editor__header
<div>
Initiates the code editor header used for the controls and tab elements. Required
.pf-v6-c-code-editor__header-content
<div>
Initiates the code editor header content used for the controls and tab elements. Required
.pf-v6-c-code-editor__main
<div>
Initiates the main container for a code editor e.g. Monaco Required
.pf-v6-c-code-editor__code
<div>
Initiates the container for code without a JS code editor. Comes with PatternFly styling.
.pf-v6-c-code-editor__controls
<div>
Initiates the code editor controls.
.pf-v6-c-code-editor__header-main
<div>
Initiates the code editor header content area.
.pf-v6-c-code-editor__keyboard-shortcuts
<div>
Initiates the code editor header keyboard shortcuts area.
.pf-v6-c-code-editor__tab
<div>
Initiates the code editor tab.
.pf-v6-c-code-editor__tab-text
<span>
Initiates the code editor tab text.
.pf-v6-c-code-editor__tab-icon
<span>
Initiates the code editor tab icon.
.pf-v6-c-code-editor__upload
<div>
Initiates the code editor upload border.

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v6-c-code-editor--pf-v6-c-code-editor__controls--PaddingInlineStart
0.5rem
.pf-v6-c-code-editor--pf-v6-c-code-editor__controls--Gap
0.25rem
.pf-v6-c-code-editor--pf-v6-c-code-editor__header--before--BorderBlockEndWidth
1px
.pf-v6-c-code-editor--pf-v6-c-code-editor__header--before--BorderBlockEndColor
(In light theme) #c7c7c7
.pf-v6-c-code-editor--pf-v6-c-code-editor__header-content--BackgroundColor
(In light theme) #f2f2f2
.pf-v6-c-code-editor--pf-v6-c-code-editor__header-content--m-plain--BackgroundColor
(In light theme) #ffffff
.pf-v6-c-code-editor--pf-v6-c-code-editor__header-content--PaddingBlockStart
0.25rem
.pf-v6-c-code-editor--pf-v6-c-code-editor__header-content--PaddingBlockEnd
0.25rem
.pf-v6-c-code-editor--pf-v6-c-code-editor__header-content--PaddingInlineStart
0.5rem
.pf-v6-c-code-editor--pf-v6-c-code-editor__header-content--PaddingInlineEnd
0.5rem
.pf-v6-c-code-editor--pf-v6-c-code-editor__header-content--BorderStartStartRadius
16px
.pf-v6-c-code-editor--pf-v6-c-code-editor__header-content--BorderStartEndRadius
16px
.pf-v6-c-code-editor--pf-v6-c-code-editor__upload--PaddingInlineStart
1rem
.pf-v6-c-code-editor--pf-v6-c-code-editor__upload--PaddingInlineEnd
1rem
.pf-v6-c-code-editor--pf-v6-c-code-editor__upload--PaddingBlockStart
1rem
.pf-v6-c-code-editor--pf-v6-c-code-editor__upload--PaddingBlockEnd
1rem
.pf-v6-c-code-editor--pf-v6-c-code-editor__upload--BorderRadius
16px
.pf-v6-c-code-editor--pf-v6-c-code-editor__main--BorderColor
(In light theme) #c7c7c7
.pf-v6-c-code-editor--pf-v6-c-code-editor__main--BorderWidth
1px
.pf-v6-c-code-editor--pf-v6-c-code-editor__main--BorderEndStartRadius
16px
.pf-v6-c-code-editor--pf-v6-c-code-editor__main--BorderEndEndRadius
16px
.pf-v6-c-code-editor--pf-v6-c-code-editor__main--BackgroundColor
(In light theme) #ffffff
.pf-v6-c-code-editor--pf-v6-c-code-editor--m-read-only__main--BackgroundColor
(In light theme) #f2f2f2
.pf-v6-c-code-editor--pf-v6-c-code-editor__upload--before--BorderWidth
0
.pf-v6-c-code-editor--pf-v6-c-code-editor__upload--before--BorderColor
transparent
.pf-v6-c-code-editor--pf-v6-c-code-editor__main--m-drag-hover--before--BorderWidth
1px
.pf-v6-c-code-editor--pf-v6-c-code-editor__main--m-drag-hover--before--BorderColor
var( --pf-t--global--border--color--clicked)
.pf-v6-c-code-editor--pf-v6-c-code-editor__main--m-drag-hover--after--BackgroundColor
(In light theme) #ffffff
.pf-v6-c-code-editor--pf-v6-c-code-editor__main--m-drag-hover--after--Opacity
.1
.pf-v6-c-code-editor--pf-v6-c-code-editor__code--PaddingBlockStart
0.5rem
.pf-v6-c-code-editor--pf-v6-c-code-editor__code--PaddingInlineEnd
0.5rem
.pf-v6-c-code-editor--pf-v6-c-code-editor__code--PaddingBlockEnd
0.5rem
.pf-v6-c-code-editor--pf-v6-c-code-editor__code--PaddingInlineStart
0.5rem
.pf-v6-c-code-editor--pf-v6-c-code-editor__code-pre--FontSize
0.875rem
.pf-v6-c-code-editor--pf-v6-c-code-editor__code-pre--FontFamily
"Red Hat Mono", "RedHatMono", "Courier New", Courier, monospace
.pf-v6-c-code-editor--pf-v6-c-code-editor__header-main--PaddingInlineEnd
0.5rem
.pf-v6-c-code-editor--pf-v6-c-code-editor__header-main--PaddingInlineStart
0.5rem
.pf-v6-c-code-editor--pf-v6-c-code-editor__tab--BackgroundColor
(In light theme) #ffffff
.pf-v6-c-code-editor--pf-v6-c-code-editor__tab--Color
(In light theme) #4d4d4d
.pf-v6-c-code-editor--pf-v6-c-code-editor__tab--PaddingBlockStart
0.5rem
.pf-v6-c-code-editor--pf-v6-c-code-editor__tab--PaddingInlineEnd
var( --pf-t--global--spacer--sm)
.pf-v6-c-code-editor--pf-v6-c-code-editor__tab--PaddingBlockEnd
0.5rem
.pf-v6-c-code-editor--pf-v6-c-code-editor__tab--PaddingInlineStart
var( --pf-t--global--spacer--sm)
.pf-v6-c-code-editor--pf-v6-c-code-editor__tab--BorderBlockStartWidth
1px
.pf-v6-c-code-editor--pf-v6-c-code-editor__tab--BorderInlineEndWidth
1px
.pf-v6-c-code-editor--pf-v6-c-code-editor__tab--BorderBlockEndWidth
0
.pf-v6-c-code-editor--pf-v6-c-code-editor__tab--BorderInlineStartWidth
1px
.pf-v6-c-code-editor--pf-v6-c-code-editor__tab--BorderColor
(In light theme) #c7c7c7
.pf-v6-c-code-editor--pf-v6-c-code-editor__tab--BorderStartEndRadius
16px
.pf-v6-c-code-editor--pf-v6-c-code-editor__tab-icon--text--MarginInlineStart
0.5rem
.pf-v6-c-code-editor.pf-m-read-only--pf-v6-c-code-editor__main--BackgroundColor
(In light theme) #f2f2f2
.pf-v6-c-code-editor__header.pf-m-plain--pf-v6-c-code-editor__header-content--BackgroundColor
(In light theme) #ffffff
.pf-v6-c-code-editor__main.pf-m-drag-hover--pf-v6-c-code-editor__upload--before--BorderWidth
1px
.pf-v6-c-code-editor__main.pf-m-drag-hover--pf-v6-c-code-editor__upload--before--BorderColor
var( --pf-t--global--border--color--clicked)