title: Highlight
{@snippet features/build-highlight-source}
The {@link module:highlight/highlight~Highlight} feature offers a text marking tools that help content authors speed up their work, e.g. reviewing content or marking it for the future reference. It uses inline <marker> elements in the view, supports both markers (background color) and pens (text color), and comes with a flexible configuration.
{@snippet features/highlight}
It is possible to configure which highlight options are supported by the editor.
You can use the {@link module:highlight/highlight~HighlightConfig#options highlight.options} configuration and define your own highlight styles.
For example, the following editor supports only two styles (a green marker and a red pen):
ClassicEditor
.create( document.querySelector( '#editor' ), {
highlight: {
options: [
{
model: 'greenMarker',
class: 'marker-green',
title: 'Green marker',
color: 'var(--ck-highlight-marker-green)',
type: 'marker'
},
{
model: 'redPen',
class: 'pen-red',
title: 'Red pen',
color: 'var(--ck-highlight-pen-red)',
type: 'pen'
}
]
},
toolbar: [
'headings', '|', 'bulletedList', 'numberedList', 'highlightDropdown', 'undo', 'redo'
]
} )
.then( ... )
.catch( ... );
{@snippet features/custom-highlight-options}
Instead of using the (default) highlightDropdown, the feature also supports a configuration with separate buttons directly in the toolbar:
ClassicEditor
.create( document.querySelector( '#editor' ), {
toolbar: {
items: [
'headings', '|', 'highlight:marker', 'highlight:greenMarker',
'highlight:pinkMarker', 'highlight:greenPen',
'highlight:redPen', 'removeHighlight', 'undo', 'redo'
]
}
} )
.then( ... )
.catch( ... );
{@snippet features/highlight-buttons}
The highlight feature is using the power of CSS Variables which are defined in the stylesheet. Thanks to that, both the UI and the content styles share the same color definitions, which can be easily customized.
:root {
/* Make green a little darker. */
--ck-highlight-marker-green: #199c19;
/* Make the yellow more "dirty". */
--ck-highlight-marker-yellow: #cac407;
/* Make red more pinkish. */
--ck-highlight-pen-red: #ec3e6e;
}
{@snippet features/custom-highlight-colors-variables}
It is possible to use the inline color values in the RGB, HEX or HSL formats instead of CSS variables. To do that, customize the {@link module:highlight/highlight~HighlightConfig#options options} and define the color properties for each option:
ClassicEditor
.create( document.querySelector( '#editor' ), {
highlight: {
options: [
{
model: 'greenMarker',
class: 'marker-green',
title: 'Green marker',
color: 'rgb(25, 156, 25)',
type: 'marker'
},
{
model: 'yellowMarker',
class: 'marker-yellow',
title: 'Yellow marker',
color: '#cac407',
type: 'marker'
},
{
model: 'redPen',
class: 'pen-red',
title: 'Red pen',
color: 'hsl(343, 82%, 58%)',
type: 'pen'
}
]
},
toolbar: [
'headings', '|', 'bulletedList', 'numberedList', 'highlightDropdown', 'undo', 'redo'
]
} )
.then( ... )
.catch( ... );
Then, update the classes in the style sheet so the content corresponds to the UI of the editor. It is recommended for the UI buttons and the actual highlights in the text to share the same colors.
.marker-green {
background-color: rgb(25, 156, 25);
}
.marker-yellow {
background-color: #cac407;
}
.pen-red {
color: hsl(343, 82%, 58%);
}
{@snippet features/custom-highlight-colors-inline}
To add this feature to your editor install the @ckeditor/ckeditor5-highlight package:
npm install --save @ckeditor/ckeditor5-highlight
And add it to your plugin list and the toolbar configuration:
import Highlight from '@ckeditor/ckeditor5-highlight/src/highlight';
ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [ Highlight, ... ],
toolbar: [ 'highlightDropdown', ... ]
} )
.then( ... )
.catch( ... );
Read more about {@link builds/guides/development/installing-plugins installing plugins}.
The {@link module:highlight/highlight~Highlight} plugin registers:
'highlightDropdown' dropdown,The {@link module:highlight/highlightcommand~HighlightCommand 'highlight'} command.
The number of options and their names correspond to the {@link module:highlight/highlight~HighlightConfig#options highlight.options} configuration option.
You can change the highlight of the current selection by executing the command with a desired value:
editor.execute( 'highlight', { value: 'yellowMarker' } );
The value corresponds to the model property in configuration object. For the default configuration:
highlight.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' }
]
the highlight command will accept the corresponding strings as values:
'yellowMarker' – available as a 'highlight:yellowMarker' button,'greenMarker' – available as a 'highlight:greenMarker' button,'pinkMarker' – available as a 'highlight:pinkMarker' button,'blueMarker' – available as a 'highlight:blueMarker' button,'redPen' – available as a 'highlight:redPen' button,'greenPen' – available as a 'highlight:greenPen' button.passing an empty value will remove any highlight from the selection:
editor.execute( 'highlight' );
The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5-highlight.