# HighlightConfig

interface

The configuration of the [highlight feature](module_highlight_highlight-Highlight.md).

```typescript
ClassicEditor
	.create( {
		highlight:  ... // Highlight feature configuration.
	} )
	.then( ... )
	.catch( ... );
```

See [all editor options](module_core_editor_editorconfig-EditorConfig.md).

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-highlight/src/highlightconfig.ts#L68)

<a id="properties">

## Properties

<a id="member-options">

### `options: Array<HighlightOption>`

The available highlight options. The default value is:

```typescript
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'
	}
]
```

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.

```css
:root {
	--ck-content-highlight-marker-yellow: #fdfd77;
	--ck-content-highlight-marker-green: #63f963;
	--ck-content-highlight-marker-pink: #fc7999;
	--ck-content-highlight-marker-blue: #72cdfd;
	--ck-content-highlight-pen-red: #e91313;
	--ck-content-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.

```typescript
ClassicEditor
	.create( {
		highlight: {
			options: [
				{
					model: 'pinkMarker',
					class: 'marker-pink',
					title: 'Pink Marker',
					color: 'var(--ck-content-highlight-marker-pink)',
					type: 'marker'
				},
				{
					model: 'redPen',
					class: 'pen-red',
					title: 'Red Pen',
					color: 'var(--ck-content-highlight-pen-red)',
					type: 'pen'
				},
			]
		}
} )
.then( ... )
.catch( ... );
```

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-highlight/src/highlightconfig.ts#L179)

---

Full index of the CKEditor 5 API reference: [llms.txt](llms.txt)