Highlight

The highlight feature offers text marking tools that help content authors speed up their work, for example when reviewing content or marking it for future reference. It uses inline <mark> elements in the view, supports both markers (background color) and pens (text color), and comes with a flexible configuration.

The highlight plugin always comes with a predefined and limited number of available colors. It also focuses on the functionality aspect rather than pure aesthetics. For changing the appearance of the text and background color, use the font color and background color plugin.

# Demo

Select the text you want to highlight, then use the highlight toolbar button to chose a desired color from the dropdown.

# Related features

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

• Styles – Apply pre-configured styles like highlight or spoiler to existing content elements.
• Basic text styles – The essentials, like bold, italic and others.
• Font styles – Easily and efficiently control the font family, size, text or background color.
• Block quote – Include block quotations or pull quotes in your rich-text content.
• Remove format – Easily clean basic text formatting.

# Configuring the highlight options

# Dropdown

It is possible to configure which highlight options are supported by the editor.
You can use the 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: [
            'heading', '|', 'bulletedList', 'numberedList', 'highlight', 'undo', 'redo'
        ]
    } )
    .then( ... )
    .catch( ... );

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

# Colors and styles

# Using CSS variables

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

# Inline color definitions

It is possible to 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 stylesheet 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%);
}

# Installation

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: [ 'highlight', ... ]
    } )
    .then( ... )
    .catch( ... );

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

# Contribute

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