HighlightConfig (highlight)

@ckeditor/ckeditor5-highlight/src/highlight

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

Properties

• options : Array.<HighlightOption>module:highlight/highlight~HighlightConfig#options

  The available highlight options. The default value is:

  See source

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

  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.

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

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