Skip to content
PatternFly logo

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

Overview

Accessibility

Class
Applied to
Outcome

Usage

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

CSS variables

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

View source on GitHub