Skip to content
PatternFly logo

Code editor

A code editor is a versatile text editor that allows for editing various languages. The code editor is built on top of the Monaco 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

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.

Red Hat logo
Copyright © 2022 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines