Fix: Missing marker-yellow CSS class definition in tests and docs.

Author: jodator

docs/_snippets/features/build-highlight-source.html

@@ -1,5 +1,5 @@
 <style>
-	.marker {
+	.marker-yellow {
 		background-color: #fdfd77;
 	}
 

docs/_snippets/features/highlight-buttons.html

@@ -1,10 +1,14 @@
 <div id="snippet-highlight-buttons">
-	<h2>Highlight feature sample.</h2>
-
+	<p>Highlight feature example.</p>
 	<p>
 		Here are some markers:
-		<mark class="marker">yellow one</mark>, <mark class="marker-pink">pink one</mark> and <mark class="marker-green">green one</mark>.
 	</p>
+	<ul>
+		<li>the <mark class="marker-yellow">yellow</mark> one,</li>
+		<li>the <mark class="marker-pink">pink</mark> one,</li>
+		<li>the <mark class="marker-green">green</mark> one,</li>
+		<li>the <mark class="marker-blue">blue</mark> one</li>
+	</ul>
 	<p>
 		Here are some pens:
 		<mark class="pen-red">red pen</mark> and <mark class="pen-green">green one</mark>.

docs/_snippets/features/highlight.html

@@ -1,10 +1,14 @@
 <div id="snippet-highlight">
-	<h2>Highlight feature sample.</h2>
-
+	<p>Highlight feature example.</p>
 	<p>
 		Here are some markers:
-		<mark class="marker">yellow one</mark>, <mark class="marker-pink">pink one</mark> and <mark class="marker-green">green one</mark>.
 	</p>
+	<ul>
+		<li>the <mark class="marker-yellow">yellow</mark> one,</li>
+		<li>the <mark class="marker-pink">pink</mark> one,</li>
+		<li>the <mark class="marker-green">green</mark> one,</li>
+		<li>the <mark class="marker-blue">blue</mark> one</li>
+	</ul>
 	<p>
 		Here are some pens:
 		<mark class="pen-red">red pen</mark> and <mark class="pen-green">green one</mark>.

docs/features/highlight.md

@@ -106,7 +106,7 @@ The {@link module:highlight/highlight~Highlight} plugin registers:
 	You can change the highlight of the current selection by executing the command with a desired value:
 
 	```js
-	editor.execute( 'highlight', { value: 'marker' } );
+	editor.execute( 'highlight', { value: 'yellowMarker' } );
 	```
 
 	The `value` corresponds to the `model` property in configuration object. For the default configuration:

src/highlight.js

@@ -87,7 +87,7 @@ export default class Highlight extends Plugin {
  * The available highlighters options. The default value is:
  *
  *		options: [
- *			{ model: 'marker', class: 'marker', title: 'Marker', color: '#fdfd77', type: 'marker' },
+ *			{ model: 'yellowMarker', class: 'marker-yellow', title: 'Yellow marker', color: '#fdfd77', type: 'marker' },
  *			{ model: 'greenMarker', class: 'marker-green', title: 'Green marker', color: '#63f963', type: 'marker' },
  *			{ model: 'pinkMarker', class: 'marker-pink', title: 'Pink marker', color: '#fc7999', type: 'marker' },
  *			{ model: 'blueMarker', class: 'marker-blue', title: 'Blue marker', color: '#72cdfd', type: 'marker' },

tests/manual/highlight-buttons.html

@@ -1,5 +1,5 @@
 <style>
-	.marker {
+	.marker-yellow {
 		background-color: #fdfd77;
 	}
 
@@ -32,7 +32,7 @@
 		Here are some markers:
 	</p>
 	<ul>
-		<li>the <mark class="marker">yellow</mark> one,</li>
+		<li>the <mark class="marker-yellow">yellow</mark> one,</li>
 		<li>the <mark class="marker-pink">pink</mark> one,</li>
 		<li>the <mark class="marker-green">green</mark> one,</li>
 		<li>the <mark class="marker-blue">blue</mark> one</li>
@@ -43,6 +43,6 @@
 	</p>
 	<figure class="image">
 		<img src="sample.jpg" alt="CKEditor logo" />
-		<figcaption>Some image with caption and <mark class="marker">highlighted text</mark>.</figcaption>
+		<figcaption>Some image with caption and <mark class="marker-yellow">highlighted text</mark>.</figcaption>
 	</figure>
 </div>

tests/manual/highlight.html

@@ -1,5 +1,5 @@
 <style>
-	.marker {
+	.marker-yellow {
 		background-color: #fdfd77;
 	}
 
@@ -32,7 +32,7 @@
 		Here are some markers:
 	</p>
 	<ul>
-		<li>the <mark class="marker">yellow</mark> one,</li>
+		<li>the <mark class="marker-yellow">yellow</mark> one,</li>
 		<li>the <mark class="marker-pink">pink</mark> one,</li>
 		<li>the <mark class="marker-green">green</mark> one,</li>
 		<li>the <mark class="marker-blue">blue</mark> one</li>
@@ -43,6 +43,6 @@
 	</p>
 	<figure class="image">
 		<img src="sample.jpg" alt="CKEditor logo" />
-		<figcaption>Some image with caption and <mark class="marker">highlighted text</mark>.</figcaption>
+		<figcaption>Some image with caption and <mark class="marker-yellow">highlighted text</mark>.</figcaption>
 	</figure>
 </div>