Contribute to this guide

guideHighlight

The highlight feature lets you mark text fragments with different colors. You can use it both as a marker (to change the background color) and as a pen (to change the text color).

# Demo

Select the text you want to highlight. Then use the highlight toolbar button Highlight to choose a desired color from the dropdown.

The Highlight feature example.

Here are some markers:

  • The yellow one
  • The pink one
  • The green one
  • The blue one

Here are some pens: the red one and the green one.

This demo presents a limited set of features. Visit the feature-rich editor example to see more in action.

# Configuring the highlight options

The highlight feature comes with flexible configuration options.

However, the plugin has a predefined and limited number of available colors. It also focuses more on functionality than aesthetics. To change the text and background colors, use the font color and background color plugin.

The highlight feature uses inline <mark> elements in the view.

You can configure which highlight options are supported by the editor. Use the highlight.options configuration and define your highlight styles.

For example, the following editor supports 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: [
            'heading', '|', 'bulletedList', 'numberedList', 'highlight', 'undo', 'redo'
        ]
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

This editor comes with two highlighters: the green one and the red one.

# Inline buttons

Instead of using the (default) 'highlight' button, the feature also supports a configuration with separate buttons available directly in the toolbar:

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        toolbar: {
            items: [
                'heading',
                '|',
                'highlight:yellowMarker', 'highlight:greenMarker', 'highlight:pinkMarker',
                'highlight:greenPen', 'highlight:redPen', 'removeHighlight',
                '|',
                'undo', 'redo'
            ]
        }
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

The Highlight feature example.

Here are some markers:

  • The pink one
  • The green one

Here are some pens: the red one and the green one.

# Colors and styles

See the plugin options to learn more about defaults.

# Using CSS variables

The highlight feature is using the power of CSS variables defined in the style sheet. Thanks to that, both the UI and the content styles share the same color definitions that you can customize:

: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;
}

An example of highlight colors customized using CSS variables:

  • The green one
  • The yellow one
  • The red one

# Inline color definitions

You can use inline color values in the rgba(R, G, B, A), #RRGGBB[AA], or hsla(H, S, L, A) formats instead of CSS variables. To do that, customize the options and define the color property 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: [
            'heading', '|', 'bulletedList', 'numberedList', 'highlight', 'undo', 'redo'
        ]
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

Then, update the classes in the style sheet so the content corresponds to the UI of the editor. The UI buttons and the actual highlights in the text should be the same color.

.marker-green {
    background-color: rgb(25, 156, 25);
}
.marker-yellow {
    background-color: #cac407;
}
.pen-red {
    color: hsl(343, 82%, 58%);
}

An example of highlight colors defined as RGB, HEX or HSL:

  • The green one
  • The yellow one
  • The red one

# Installation

The highlight feature is enabled by default in the superbuild only.

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';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Highlight, /* ... */ ],
        toolbar: [ 'highlight', /* ... */ ]
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

Read more about installing plugins.

CKEditor 5 has more features that can help you style your content:

# Common API

The Highlight plugin registers:

  • The 'highlight' dropdown.

  • The 'highlight' command.

    The number of options and their names correspond to the 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 the 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 the 'highlight:yellowMarker' button,
    • 'greenMarker' – available as the 'highlight:greenMarker' button,
    • 'pinkMarker' – available as the 'highlight:pinkMarker' button,
    • 'blueMarker' – available as the 'highlight:blueMarker' button,
    • 'redPen' – available as the 'highlight:redPen' button,
    • 'greenPen' – available as the 'highlight:greenPen' button.

    Passing an empty value will remove any highlight attribute from the selection:

    editor.execute( 'highlight' );
    

We recommend using the official CKEditor 5 inspector for development and debugging. It will give you tons of useful information about the state of the editor such as internal data structures, selection, commands, and many more.

# Contribute

The source code of the feature is available on GitHub at https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-highlight.