Interface

HighlightConfig (highlight)

@ckeditor/ckeditor5-highlight/src/highlight

interface

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:

    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( ... );