Patternfly Logo

Code editor

Info alert:Beta feature

This Beta component is currently under review, so please join in and give us your feedback on the PatternFly forum.

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.

Documentation

Overview

Accessibility

ClassApplied toOutcome

Usage

ClassApplied toOutcome
.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__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__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