Code editor

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

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__controls--PaddingInlineStart	0.5rem
--pf-v6-c-code-editor__controls--PaddingInlineStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__controls--Gap	0.25rem
--pf-v6-c-code-editor__controls--Gap --pf-t--global--spacer--gap--action-to-action--plain --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__header--before--BorderBlockEndWidth	1px
--pf-v6-c-code-editor__header--before--BorderBlockEndWidth --pf-t--global--border--width--box--default --pf-t--global--border--width--100 1px
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__header--before--BorderBlockEndColor	(In light theme) #e0e0e0
--pf-v6-c-code-editor__header--before--BorderBlockEndColor --pf-t--global--border--color--default --pf-t--global--border--color--50 --pf-t--color--gray--20 #e0e0e0
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__header--BorderWidth	1px
--pf-v6-c-code-editor__header--BorderWidth --pf-t--global--border--width--box--default --pf-t--global--border--width--100 1px
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__header--BorderColor	(In light theme) #e0e0e0
--pf-v6-c-code-editor__header--BorderColor --pf-t--global--border--color--default --pf-t--global--border--color--50 --pf-t--color--gray--20 #e0e0e0
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__header--BorderStartStartRadius	16px
--pf-v6-c-code-editor__header--BorderStartStartRadius --pf-t--global--border--radius--medium --pf-t--global--border--radius--300 16px
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__header--BorderStartEndRadius	16px
--pf-v6-c-code-editor__header--BorderStartEndRadius --pf-t--global--border--radius--medium --pf-t--global--border--radius--300 16px
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__header-content--BackgroundColor	(In light theme) #f2f2f2
--pf-v6-c-code-editor__header-content--BackgroundColor --pf-t--global--background--color--secondary--default --pf-t--global--background--color--200 --pf-t--color--gray--10 #f2f2f2
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__header-content--m-plain--BackgroundColor	transparent
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__header-content--PaddingBlockStart	0.25rem
--pf-v6-c-code-editor__header-content--PaddingBlockStart --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__header-content--PaddingBlockEnd	0.25rem
--pf-v6-c-code-editor__header-content--PaddingBlockEnd --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__header-content--PaddingInlineStart	0.5rem
--pf-v6-c-code-editor__header-content--PaddingInlineStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__header-content--PaddingInlineEnd	0.5rem
--pf-v6-c-code-editor__header-content--PaddingInlineEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__header-content--BorderStartStartRadius	16px
--pf-v6-c-code-editor__header-content--BorderStartStartRadius --pf-t--global--border--radius--medium --pf-t--global--border--radius--300 16px
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__header-content--BorderStartEndRadius	16px
--pf-v6-c-code-editor__header-content--BorderStartEndRadius --pf-t--global--border--radius--medium --pf-t--global--border--radius--300 16px
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__upload--PaddingInlineStart	1rem
--pf-v6-c-code-editor__upload--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__upload--PaddingInlineEnd	1rem
--pf-v6-c-code-editor__upload--PaddingInlineEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__upload--PaddingBlockStart	1rem
--pf-v6-c-code-editor__upload--PaddingBlockStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__upload--PaddingBlockEnd	1rem
--pf-v6-c-code-editor__upload--PaddingBlockEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__upload--BorderRadius	16px
--pf-v6-c-code-editor__upload--BorderRadius --pf-t--global--border--radius--medium --pf-t--global--border--radius--300 16px
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__main--BorderColor	(In light theme) #e0e0e0
--pf-v6-c-code-editor__main--BorderColor --pf-t--global--border--color--default --pf-t--global--border--color--50 --pf-t--color--gray--20 #e0e0e0
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__main--BorderWidth	1px
--pf-v6-c-code-editor__main--BorderWidth --pf-t--global--border--width--box--default --pf-t--global--border--width--100 1px
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__main--BorderEndStartRadius	16px
--pf-v6-c-code-editor__main--BorderEndStartRadius --pf-t--global--border--radius--medium --pf-t--global--border--radius--300 16px
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__main--BorderEndEndRadius	16px
--pf-v6-c-code-editor__main--BorderEndEndRadius --pf-t--global--border--radius--medium --pf-t--global--border--radius--300 16px
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__main--BackgroundColor	(In light theme) #ffffff
--pf-v6-c-code-editor__main--BackgroundColor --pf-t--global--background--color--primary--default --pf-t--global--background--color--100 --pf-t--color--white #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--m-read-only__main--BackgroundColor --pf-t--global--background--color--secondary--default --pf-t--global--background--color--200 --pf-t--color--gray--10 #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__main--m-drag-hover--before--BorderWidth --pf-t--global--border--width--divider--hover --pf-t--global--border--width--100 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__main--m-drag-hover--before--BorderColor var( --pf-t--global--border--color--clicked) 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__main--m-drag-hover--after--BackgroundColor --pf-t--global--background--color--primary--default --pf-t--global--background--color--100 --pf-t--color--white #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__code--PaddingBlockStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__code--PaddingInlineEnd	0.5rem
--pf-v6-c-code-editor__code--PaddingInlineEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__code--PaddingBlockEnd	0.5rem
--pf-v6-c-code-editor__code--PaddingBlockEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__code--PaddingInlineStart	0.5rem
--pf-v6-c-code-editor__code--PaddingInlineStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__code-pre--FontSize	0.875rem
--pf-v6-c-code-editor__code-pre--FontSize --pf-t--global--font--size--sm --pf-t--global--font--size--200 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__code-pre--FontFamily --pf-t--global--font--family--mono --pf-t--global--font--family--300 "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__header-main--PaddingInlineEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__header-main--PaddingInlineStart	0.5rem
--pf-v6-c-code-editor__header-main--PaddingInlineStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__tab--BackgroundColor	(In light theme) #ffffff
--pf-v6-c-code-editor__tab--BackgroundColor --pf-t--global--background--color--primary--default --pf-t--global--background--color--100 --pf-t--color--white #ffffff
	.pf-v6-c-code-editor	--pf-v6-c-code-editor--m-read-only__tab--BackgroundColor	(In light theme) #f2f2f2
--pf-v6-c-code-editor--m-read-only__tab--BackgroundColor --pf-v6-c-code-editor--m-read-only__main--BackgroundColor --pf-t--global--background--color--secondary--default --pf-t--global--background--color--200 --pf-t--color--gray--10 #f2f2f2
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__tab--Color	(In light theme) #4d4d4d
--pf-v6-c-code-editor__tab--Color --pf-t--global--text--color--subtle --pf-t--global--text--color--200 --pf-t--color--gray--60 #4d4d4d
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__tab--PaddingBlockStart	0.5rem
--pf-v6-c-code-editor__tab--PaddingBlockStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 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__tab--PaddingInlineEnd var( --pf-t--global--spacer--sm) 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__tab--PaddingBlockEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 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__tab--PaddingInlineStart var( --pf-t--global--spacer--sm) var( --pf-t--global--spacer--sm)
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__tab--BorderBlockStartWidth	1px
--pf-v6-c-code-editor__tab--BorderBlockStartWidth --pf-t--global--border--width--box--default --pf-t--global--border--width--100 1px
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__tab--BorderInlineEndWidth	1px
--pf-v6-c-code-editor__tab--BorderInlineEndWidth --pf-t--global--border--width--box--default --pf-t--global--border--width--100 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__tab--BorderInlineStartWidth --pf-t--global--border--width--box--default --pf-t--global--border--width--100 1px
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__tab--BorderColor	(In light theme) #e0e0e0
--pf-v6-c-code-editor__tab--BorderColor --pf-t--global--border--color--default --pf-t--global--border--color--50 --pf-t--color--gray--20 #e0e0e0
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__tab--BorderStartEndRadius	16px
--pf-v6-c-code-editor__tab--BorderStartEndRadius --pf-t--global--border--radius--medium --pf-t--global--border--radius--300 16px
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__tab-icon--text--MarginInlineStart	0.5rem
--pf-v6-c-code-editor__tab-icon--text--MarginInlineStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-code-editor.pf-m-read-only	--pf-v6-c-code-editor__tab--BackgroundColor	(In light theme) #f2f2f2
--pf-v6-c-code-editor__tab--BackgroundColor --pf-v6-c-code-editor--m-read-only__tab--BackgroundColor --pf-v6-c-code-editor--m-read-only__main--BackgroundColor --pf-t--global--background--color--secondary--default --pf-t--global--background--color--200 --pf-t--color--gray--10 #f2f2f2
	.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__main--BackgroundColor --pf-v6-c-code-editor--m-read-only__main--BackgroundColor --pf-t--global--background--color--secondary--default --pf-t--global--background--color--200 --pf-t--color--gray--10 #f2f2f2
	.pf-v6-c-code-editor__header.pf-m-plain	--pf-v6-c-code-editor__header--BorderWidth	0
	.pf-v6-c-code-editor__header.pf-m-plain	--pf-v6-c-code-editor__header-content--BackgroundColor	transparent
--pf-v6-c-code-editor__header-content--BackgroundColor --pf-v6-c-code-editor__header-content--m-plain--BackgroundColor transparent
	.pf-v6-c-code-editor__main.pf-m-drag-hover	--pf-v6-c-code-editor__upload--before--BorderWidth	1px
--pf-v6-c-code-editor__upload--before--BorderWidth --pf-v6-c-code-editor__main--m-drag-hover--before--BorderWidth --pf-t--global--border--width--divider--hover --pf-t--global--border--width--100 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)
--pf-v6-c-code-editor__upload--before--BorderColor --pf-v6-c-code-editor__main--m-drag-hover--before--BorderColor var( --pf-t--global--border--color--clicked) var( --pf-t--global--border--color--clicked)