# HighlightOption

interface

The highlight option descriptor. See [`HighlightConfig`](module_highlight_highlightconfig-HighlightConfig.md) to learn more.

```typescript
{
	model: 'pinkMarker',
	class: 'marker-pink',
	title: 'Pink Marker',
	color: 'var(--ck-content-highlight-marker-pink)',
	type: 'marker'
}
```

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

<a id="properties">

## Properties

<a id="member-class">

### `class: string`

The CSS class used on the `<mark>` element in the view. It should match the `color` setting.

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

<a id="member-color">

### `color: string`

The CSS `var()` used for the highlighter. The color is used in the user interface to represent the highlighter. There is a possibility to use the default color format like rgb, hex or hsl, but you need to care about the color of `<mark>` by adding CSS classes definition.

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

<a id="member-model">

### `model: string`

The unique attribute value in the model.

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

<a id="member-title">

### `title: string`

The user-readable title of the option.

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

<a id="member-type">

### `type: 'marker' | 'pen'`

The type of highlighter:

* `'marker'` – Uses the `color` as the `background-color` style,
* `'pen'` – Uses the `color` as the font `color` style.

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

---

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