# Highlight

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

<a id="demo">

## Demo

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

<!-- AI-AGENT-NOTE: An interactive demo is embedded here but is not represented in this Markdown file. If you need to see it in action, open this page in a browser (e.g. via a browser-automation MCP like Chrome DevTools or Playwright), or let the user know a live demo is available on this page. -->

This demo presents a limited set of features. Visit the [feature-rich editor example](../examples/builds-custom/full-featured-editor.md) to see more in action.

<a id="installation">

## Installation

After [installing the editor](../getting-started/installation/cloud/quick-start.md), add the feature to your plugin list and toolbar configuration:

**NPM**

```js
import { ClassicEditor, Highlight } from 'ckeditor5';

ClassicEditor
	.create( {
		licenseKey: '<YOUR_LICENSE_KEY>', // Or 'GPL'.
		plugins: [ Highlight, /* ... */ ],
		toolbar: [ 'highlight', /* ... */ ]
		highlight: {
			// Configuration.
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

**CDN**

```js
const { ClassicEditor, Highlight } = CKEDITOR;

ClassicEditor
	.create( {
		licenseKey: '<YOUR_LICENSE_KEY>',
		plugins: [ Highlight, /* ... */ ],
		toolbar: [ 'highlight', /* ... */ ]
		highlight: {
			// Configuration.
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

<a id="configuring-the-highlight-options">

## 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](font.md#configuring-the-font-color-and-font-background-color-features) plugin.

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

<a id="dropdown">

### Dropdown

You can configure which highlight options are supported by the editor. Use the [`highlight.options`](../api/module_highlight_highlightconfig-HighlightConfig.md#member-options) configuration and define your highlight styles.

For example, the following editor supports two styles (a green marker and a red pen):

```js
ClassicEditor
	.create( {
		// ... Other configuration options ...
		highlight: {
			options: [
				{
					model: 'greenMarker',
					class: 'marker-green',
					title: 'Green marker',
					color: 'var(--ck-content-highlight-marker-green)',
					type: 'marker'
				},
				{
					model: 'redPen',
					class: 'pen-red',
					title: 'Red pen',
					color: 'var(--ck-content-highlight-pen-red)',
					type: 'pen'
				}
			]
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

<!-- AI-AGENT-NOTE: An interactive demo is embedded here but is not represented in this Markdown file. If you need to see it in action, open this page in a browser (e.g. via a browser-automation MCP like Chrome DevTools or Playwright), or let the user know a live demo is available on this page. -->

<a id="inline-buttons">

### Inline buttons

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

```js
ClassicEditor
	.create( {
		// ... Other configuration options ...
		toolbar: {
			items: [
				'heading',
				'|',
				'highlight:yellowMarker', 'highlight:greenMarker', 'highlight:pinkMarker',
				'highlight:greenPen', 'highlight:redPen', 'removeHighlight',
				'|',
				'undo', 'redo'
			]
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

<!-- AI-AGENT-NOTE: An interactive demo is embedded here but is not represented in this Markdown file. If you need to see it in action, open this page in a browser (e.g. via a browser-automation MCP like Chrome DevTools or Playwright), or let the user know a live demo is available on this page. -->

<a id="colors-and-styles">

### Colors and styles

> **Note**
>
> See the plugin [options](../api/module_highlight_highlightconfig-HighlightConfig.md#member-options) to learn more about defaults.

<a id="using-css-variables">

#### Using CSS variables

The highlight feature is using the power of [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) defined in the [style sheet](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-highlight/theme/index-content.css). Thanks to that, both the UI and the content styles share the same color definitions that you can customize:

```css
:root {
	/* Make green a little darker. */
	--ck-content-highlight-marker-green: #199c19;

	/* Make the yellow more "dirty". */
	--ck-content-highlight-marker-yellow: #cac407;

	/* Make red more pinkish. */
	--ck-content-highlight-pen-red: #ec3e6e;
}
```

<!-- AI-AGENT-NOTE: An interactive demo is embedded here but is not represented in this Markdown file. If you need to see it in action, open this page in a browser (e.g. via a browser-automation MCP like Chrome DevTools or Playwright), or let the user know a live demo is available on this page. -->

<a id="inline-color-definitions">

#### 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](../api/module_highlight_highlightconfig-HighlightConfig.md#member-options) and define the `color` property for each option:

```js
ClassicEditor
	.create( {
		// ... Other configuration options ...
		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'
				}
			]
		}
	} )
	.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.

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

<!-- AI-AGENT-NOTE: An interactive demo is embedded here but is not represented in this Markdown file. If you need to see it in action, open this page in a browser (e.g. via a browser-automation MCP like Chrome DevTools or Playwright), or let the user know a live demo is available on this page. -->

<a id="related-features">

## Related features

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

* [Styles](style.md) – Apply pre-configured styles like highlight or spoiler to existing content elements.
* [Basic text styles](basic-styles.md) – The essentials, like **bold**, _italic_, and others.
* [Font styles](font.md) – Control the font [family](font.md#configuring-the-font-family-feature), [size](font.md#configuring-the-font-size-feature), [text or background color](font.md#configuring-the-font-color-and-font-background-color-features).
* [Format painter](format-painter.md) – Easily copy text formatting and apply it in a different place in the edited document.
* [Block quote](block-quote.md) – Include block quotations or pull quotes in your rich-text content.
* [Remove format](remove-format.md) – Easily clean basic text formatting.

<a id="common-api">

## Common API

The [`Highlight`](../api/module_highlight_highlight-Highlight.md) plugin registers:

* The `'highlight'` dropdown.

* The [`'highlight'`](../api/module_highlight_highlightcommand-HighlightCommand.md) command.

  The number of options and their names correspond to the [`highlight.options`](../api/module_highlight_highlightconfig-HighlightConfig.md#member-options) configuration option.

  You can change the highlight of the current selection by executing the command with a desired value:

  ```js
  editor.execute( 'highlight', { value: 'yellowMarker' } );
  ```

  The `value` corresponds to the `model` property in the configuration object. For the default configuration:

  ```js
  highlight.options = [
  	{ model: 'yellowMarker', class: 'marker-yellow', title: 'Yellow Marker', color: 'var(--ck-content-highlight-marker-yellow)', type: 'marker' },
  	{ model: 'greenMarker', class: 'marker-green', title: 'Green marker', color: 'var(--ck-content-highlight-marker-green)', type: 'marker' },
  	{ model: 'pinkMarker', class: 'marker-pink', title: 'Pink marker', color: 'var(--ck-content-highlight-marker-pink)', type: 'marker' },
  	{ model: 'blueMarker', class: 'marker-blue', title: 'Blue marker', color: 'var(--ck-content-highlight-marker-blue)', type: 'marker' },
  	{ model: 'redPen', class: 'pen-red', title: 'Red pen', color: 'var(--ck-content-highlight-pen-red)', type: 'pen' },
  	{ model: 'greenPen', class: 'pen-green', title: 'Green pen', color: 'var(--ck-content-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:

  ```js
  editor.execute( 'highlight' );
  ```

> **Note**
>
> We recommend using the official [CKEditor 5 inspector](../framework/development-tools/inspector.md) 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.

<a id="contribute">

## Contribute

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

---

Full index of the CKEditor 5 documentation: [llms.txt](../../llms.txt)