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


                      code goes here

Read-only


                      code goes here

Without actions

Drag a file here or browse to upload.

Drag file and hover over component

Drag a file here or browse to upload.

With optional header content and keyboard shortcuts


                      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 column	Selector	Variable	Value
	.pf-v5-c-code-editor	--pf-v5-c-code-editor__controls--c-button--m-control--Color	#6a6e73
--pf-v5-c-code-editor__controls--c-button--m-control--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73
	.pf-v5-c-code-editor	--pf-v5-c-code-editor__controls--c-button--m-control--hover--Color	#151515
--pf-v5-c-code-editor__controls--c-button--m-control--hover--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515
	.pf-v5-c-code-editor	--pf-v5-c-code-editor__controls--c-button--m-control--focus--Color	#151515
--pf-v5-c-code-editor__controls--c-button--m-control--focus--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #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__controls--c-button--m-control--disabled--after--BorderBottomColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2
	.pf-v5-c-code-editor	--pf-v5-c-code-editor__header--before--BorderBottomWidth	1px
--pf-v5-c-code-editor__header--before--BorderBottomWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px
	.pf-v5-c-code-editor	--pf-v5-c-code-editor__header--before--BorderBottomColor	#d2d2d2
--pf-v5-c-code-editor__header--before--BorderBottomColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2
	.pf-v5-c-code-editor	--pf-v5-c-code-editor__main--BorderColor	#d2d2d2
--pf-v5-c-code-editor__main--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2
	.pf-v5-c-code-editor	--pf-v5-c-code-editor__main--BorderWidth	1px
--pf-v5-c-code-editor__main--BorderWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px
	.pf-v5-c-code-editor	--pf-v5-c-code-editor__main--BackgroundColor	#fff
--pf-v5-c-code-editor__main--BackgroundColor --pf-v5-global--BackgroundColor--100 $pf-v5-global--BackgroundColor--100 $pf-v5-color-white #fff
	.pf-v5-c-code-editor	--pf-v5-c-code-editor--m-read-only__main--BackgroundColor	#f0f0f0
--pf-v5-c-code-editor--m-read-only__main--BackgroundColor --pf-v5-global--disabled-color--300 $pf-v5-global--disabled-color--300 $pf-v5-color-black-200 #f0f0f0
	.pf-v5-c-code-editor	--pf-v5-c-code-editor__main--m-drag-hover--before--BorderWidth	1px
--pf-v5-c-code-editor__main--m-drag-hover--before--BorderWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px
	.pf-v5-c-code-editor	--pf-v5-c-code-editor__main--m-drag-hover--before--BorderColor	#06c
--pf-v5-c-code-editor__main--m-drag-hover--before--BorderColor --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c
	.pf-v5-c-code-editor	--pf-v5-c-code-editor__main--m-drag-hover--after--BackgroundColor	#06c
--pf-v5-c-code-editor__main--m-drag-hover--after--BackgroundColor --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #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__code--PaddingTop --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-v5-c-code-editor	--pf-v5-c-code-editor__code--PaddingRight	0.5rem
--pf-v5-c-code-editor__code--PaddingRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-v5-c-code-editor	--pf-v5-c-code-editor__code--PaddingBottom	0.5rem
--pf-v5-c-code-editor__code--PaddingBottom --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-v5-c-code-editor	--pf-v5-c-code-editor__code--PaddingLeft	0.5rem
--pf-v5-c-code-editor__code--PaddingLeft --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-v5-c-code-editor	--pf-v5-c-code-editor__code-pre--FontSize	0.875rem
--pf-v5-c-code-editor__code-pre--FontSize --pf-v5-global--FontSize--sm $pf-v5-global--FontSize--sm pf-font-prem(14px) 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__code-pre--FontFamily --pf-v5-global--FontFamily--monospace $pf-v5-global--FontFamily--monospace '"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__header-main--PaddingRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-v5-c-code-editor	--pf-v5-c-code-editor__header-main--PaddingLeft	0.5rem
--pf-v5-c-code-editor__header-main--PaddingLeft --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-v5-c-code-editor	--pf-v5-c-code-editor__tab--BackgroundColor	#fff
--pf-v5-c-code-editor__tab--BackgroundColor --pf-v5-global--BackgroundColor--100 $pf-v5-global--BackgroundColor--100 $pf-v5-color-white #fff
	.pf-v5-c-code-editor	--pf-v5-c-code-editor__tab--Color	#6a6e73
--pf-v5-c-code-editor__tab--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #6a6e73
	.pf-v5-c-code-editor	--pf-v5-c-code-editor__tab--PaddingTop	0.375rem
--pf-v5-c-code-editor__tab--PaddingTop --pf-v5-global--spacer--form-element $pf-v5-global--spacer--form-element pf-size-prem(6px) 0.375rem
	.pf-v5-c-code-editor	--pf-v5-c-code-editor__tab--PaddingRight	0.5rem
--pf-v5-c-code-editor__tab--PaddingRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-v5-c-code-editor	--pf-v5-c-code-editor__tab--PaddingBottom	0.375rem
--pf-v5-c-code-editor__tab--PaddingBottom --pf-v5-global--spacer--form-element $pf-v5-global--spacer--form-element pf-size-prem(6px) 0.375rem
	.pf-v5-c-code-editor	--pf-v5-c-code-editor__tab--PaddingLeft	0.5rem
--pf-v5-c-code-editor__tab--PaddingLeft --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-v5-c-code-editor	--pf-v5-c-code-editor__tab--BorderTopWidth	1px
--pf-v5-c-code-editor__tab--BorderTopWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px
	.pf-v5-c-code-editor	--pf-v5-c-code-editor__tab--BorderRightWidth	1px
--pf-v5-c-code-editor__tab--BorderRightWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 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__tab--BorderLeftWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px
	.pf-v5-c-code-editor	--pf-v5-c-code-editor__tab--BorderColor	#d2d2d2
--pf-v5-c-code-editor__tab--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2
	.pf-v5-c-code-editor	--pf-v5-c-code-editor__tab-icon--text--MarginLeft	0.5rem
--pf-v5-c-code-editor__tab-icon--text--MarginLeft --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-v5-c-code-editor.pf-m-read-only	--pf-v5-c-code-editor__main--BackgroundColor	#f0f0f0
--pf-v5-c-code-editor__main--BackgroundColor --pf-v5-c-code-editor--m-read-only__main--BackgroundColor --pf-v5-global--disabled-color--300 $pf-v5-global--disabled-color--300 $pf-v5-color-black-200 #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-button--m-control--Color --pf-v5-c-code-editor__controls--c-button--m-control--Color --pf-v5-global--Color--200 $pf-v5-global--Color--200 $pf-v5-color-black-600 #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--c-button--m-control--Color --pf-v5-c-code-editor__controls--c-button--m-control--hover--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #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
--pf-v5-c-code-editor__controls--c-button--m-control--Color --pf-v5-c-code-editor__controls--c-button--m-control--focus--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515

View source on GitHub