CKEditor Ecosystem Documentation
Search
⚠️ WarningNightly documentation ahead. Switch to the stable editor documentation.
Home/CKEditor 5/API
Interface

HighlightConfig (highlight)

@ckeditor/ckeditor5-highlight/src/highlight

interface
See source

The configuration of the highlight feature.

ClassicEditor
	.create( editorElement, {
		highlight:  ... // Highlight feature configuration.
	} )
	.then( ... )
	.catch( ... );

See all editor options.

Filtering

Properties

  • options : Array.<HighlightOption>

    The available highlight options. The default value is:

    See source
    options: [
	{
		model: 'yellowMarker',
		class: 'marker-yellow',
		title: 'Yellow marker',
		color: 'var(--ck-highlight-marker-yellow)',
		type: 'marker'
	},
	{
		model: 'greenMarker',
		class: 'marker-green',
		title: 'Green marker',
		color: 'var(--ck-highlight-marker-green)',
		type: 'marker'
	},
	{
		model: 'pinkMarker',
		class: 'marker-pink',
		title: 'Pink marker',
		color: 'var(--ck-highlight-marker-pink)',
		type: 'marker'
	},
	{
		model: 'blueMarker',
		class: 'marker-blue',
		title: 'Blue marker',
		color: 'var(--ck-highlight-marker-blue)',
		type: 'marker'
	},
	{
		model: 'redPen',
		class: 'pen-red',
		title: 'Red pen',
		color: 'var(--ck-highlight-pen-red)',
		type: 'pen'
	},
	{
		model: 'greenPen',
		class: 'pen-green',
		title: 'Green pen',
		color: 'var(--ck-highlight-pen-green)',
		type: 'pen'
	}
]

    There are two types of highlighters available:

    • 'marker' – Rendered as a <mark> element, styled with the background-color.
    • 'pen' – Rendered as a <mark> element, styled with the font color.

    Note: The highlight feature provides a stylesheet with the CSS classes and corresponding colors defined as CSS variables.

    :root {
	--ck-highlight-marker-yellow: #fdfd77;
	--ck-highlight-marker-green: #63f963;
	--ck-highlight-marker-pink: #fc7999;
	--ck-highlight-marker-blue: #72cdfd;
	--ck-highlight-pen-red: #e91313;
	--ck-highlight-pen-green: #118800;
}

.marker-yellow { ... }
.marker-green { ... }
.marker-pink { ... }
.marker-blue { ... }
.pen-red { ... }
.pen-green { ... }

    It is possible to define the color property directly as rgba(R, G, B, A), #RRGGBB[AA] or hsla(H, S, L, A). In such situation, the color will only apply to the UI of the editor and the <mark> elements in the content must be styled by custom classes provided by a dedicated stylesheet.

    Note: It is recommended for the color property to correspond to the class in the content stylesheet because it represents the highlighter in the user interface of the editor.

    ClassicEditor
	.create( editorElement, {
		highlight: {
			options: [
				{
					model: 'pinkMarker',
					class: 'marker-pink',
					title: 'Pink Marker',
					color: 'var(--ck-highlight-marker-pink)',
					type: 'marker'
				},
				{
					model: 'redPen',
					class: 'pen-red',
					title: 'Red Pen',
					color: 'var(--ck-highlight-pen-red)',
					type: 'pen'
				},
			]
		}
} )
.then( ... )
.catch( ... );