8
0
Quellcode durchsuchen

Docs: Improved highlight feature docs, improved grammar, wording and semantics of the documentation.

Aleksander Nowodzinski vor 7 Jahren
Ursprung
Commit
cef36d57d0

+ 8 - 10
packages/ckeditor5-highlight/docs/_snippets/features/custom-highlight-colors-inline.html

@@ -1,21 +1,19 @@
 <style>
 	/* We are not using here :root because of many instances of editor */
-	#snippet-custom-highlight-colors-inline + .ck-editor .marker-green {
-		background-color: rgb(24, 201, 32);
+	#snippet-highlight-custom-colors-inline + .marker-green {
+		background-color: rgb(25, 156, 25);
 	}
-
-	#snippet-custom-highlight-colors-inline + .ck-editor .marker-yellow {
-		background-color: #f2ee28;
+	#snippet-highlight-custom-colors-inline + .marker-yellow {
+		background-color: #cac407;
 	}
-
-	#snippet-custom-highlight-colors-inline + .ck-editor .pen-red {
-		color: hsl(355, 78%, 49%);
+	#snippet-highlight-custom-colors-inline + .pen-red {
+		color: hsl(343, 82%, 58%);
 	}
 </style>
 
-<div id="snippet-custom-highlight-colors-inline">
+<div id="snippet-highlight-custom-colors-inline">
 	<p>
-		Here are markers defined as rgb, hex or hsl format directly in .js config:
+		An example of highlight colors defined as RGB, HEX or HSL:
 	</p>
 	<ul>
 		<li>the <mark class="marker-green">green one</mark></li>

+ 5 - 5
packages/ckeditor5-highlight/docs/_snippets/features/custom-highlight-colors-inline.js

@@ -5,7 +5,7 @@
 
 /* globals ClassicEditor, console, window, document */
 ClassicEditor
-	.create( document.querySelector( '#snippet-custom-highlight-colors-inline' ), {
+	.create( document.querySelector( '#snippet-highlight-custom-colors-inline' ), {
 		toolbar: {
 			items: [
 				'headings', '|', 'bulletedList', 'numberedList', 'highlightDropdown', 'undo', 'redo'
@@ -18,23 +18,23 @@ ClassicEditor
 					model: 'greenMarker',
 					class: 'marker-green',
 					title: 'Green marker',
-					color: 'rgb(24, 201, 32)',
+					color: 'rgb(25, 156, 25)',
 					type: 'marker'
 				},
 				{
 					model: 'yellowMarker',
 					class: 'marker-yellow',
 					title: 'Yellow marker',
-					color: '#f2ee28',
+					color: '#cac407',
 					type: 'marker'
 				},
 				{
 					model: 'redPen',
 					class: 'pen-red',
 					title: 'Red pen',
-					color: 'hsl(355, 78%, 49%)',
+					color: 'hsl(343, 82%, 58%)',
 					type: 'pen'
-				},
+				}
 			]
 		}
 	} )

+ 13 - 14
packages/ckeditor5-highlight/docs/_snippets/features/custom-highlight-colors-variables.html

@@ -1,25 +1,24 @@
 <style>
 	/* We are not using here :root because of many instances of editor */
-	#snippet-custom-highlight-colors-variables + .ck-editor {
-
+	#snippet-highlight-custom-colors-variables + .ck-editor {
 		/* Make green a little darker. */
 		--ck-highlight-marker-green: #199c19;
 
-		/* Change yellow to orange */
-		--ck-highlight-marker-yellow: #ffa61a;
+		/* Make the yellow more "dirty". */
+		--ck-highlight-marker-yellow: #cac407;
 
 		/* Make red more pinkish. */
-		--ck-highlight-pen-red: #ec3e98;
+		--ck-highlight-pen-red: #ec3e6e;
 	}
 </style>
 
-<div id="snippet-custom-highlight-colors-variables">
-		<p>
-			Here are markers with changed colors through CSS Variables:
-		</p>
-		<ul>
-			<li>the <mark class="marker-green">green one</mark></li>
-			<li>the <mark class="marker-yellow">yellow one</mark></li>
-			<li>the <mark class="pen-red">red one</mark></li>
-		</ul>
+<div id="snippet-highlight-custom-colors-variables">
+	<p>
+		An example of highlight colors customized using CSS variables:
+	</p>
+	<ul>
+		<li>the <mark class="marker-green">green one</mark></li>
+		<li>the <mark class="marker-yellow">yellow one</mark></li>
+		<li>the <mark class="pen-red">red one</mark></li>
+	</ul>
 </div>

+ 1 - 1
packages/ckeditor5-highlight/docs/_snippets/features/custom-highlight-colors-variables.js

@@ -5,7 +5,7 @@
 
 /* globals ClassicEditor, console, window, document */
 ClassicEditor
-	.create( document.querySelector( '#snippet-custom-highlight-colors-variables' ), {
+	.create( document.querySelector( '#snippet-highlight-custom-colors-variables' ), {
 		toolbar: {
 			items: [
 				'headings', '|', 'bulletedList', 'numberedList', 'highlightDropdown', 'undo', 'redo'

+ 2 - 2
packages/ckeditor5-highlight/docs/_snippets/features/custom-highlight-options.html

@@ -1,5 +1,5 @@
-<div id="snippet-custom-highlight-options">
+<div id="snippet-highlight-custom-options">
 	<p>
-		Here are defined highlighters: <mark class="marker-green">green one</mark> and <mark class="pen-red">red one</mark>.
+		This editor comes with two highlighters: <mark class="marker-green">green one</mark> and <mark class="pen-red">red one</mark>.
 	</p>
 </div>

+ 1 - 1
packages/ckeditor5-highlight/docs/_snippets/features/custom-highlight-options.js

@@ -5,7 +5,7 @@
 
 /* globals ClassicEditor, console, window, document */
 ClassicEditor
-	.create( document.querySelector( '#snippet-custom-highlight-options' ), {
+	.create( document.querySelector( '#snippet-highlight-custom-options' ), {
 		toolbar: {
 			items: [
 				'headings', '|', 'bulletedList', 'numberedList', 'highlightDropdown', 'undo', 'redo'

+ 1 - 3
packages/ckeditor5-highlight/docs/_snippets/features/highlight-buttons.html

@@ -1,13 +1,11 @@
 <div id="snippet-highlight-buttons">
-	<p>Highlight feature example.</p>
+	<p>The Highlight feature example.</p>
 	<p>
 		Here are some markers:
 	</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:

+ 1 - 1
packages/ckeditor5-highlight/docs/_snippets/features/highlight.html

@@ -1,5 +1,5 @@
 <div id="snippet-highlight">
-	<p>Highlight feature example.</p>
+	<p>The Highlight feature example.</p>
 	<p>
 		Here are some markers:
 	</p>

+ 15 - 16
packages/ckeditor5-highlight/docs/features/highlight.md

@@ -72,31 +72,30 @@ ClassicEditor
 
 {@snippet features/highlight-buttons}
 
-### Custom colors
+### Colors and styles
 
-#### CSS Variables
+#### Using CSS Variables
 
-The highlight feature by default is using power of [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) which are defined in the [stylesheet](https://github.com/ckeditor/ckeditor5-highlight/blob/master/src/highlight.css). Thanks to them, we can easily make customization with change of lightness, hue or completely different color.
+The highlight feature is using the power of [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) which are defined in the [stylesheet](https://github.com/ckeditor/ckeditor5-highlight/blob/master/theme/highlight.css). Thanks to that, both the UI and the content styles share the same color definitions, which can be easily customized.
 
 ```css
 :root {
-
 	/* Make green a little darker. */
 	--ck-highlight-marker-green: #199c19;
 
-	/* Change yellow to orange */
-	--ck-highlight-marker-yellow: #ffd11d;
+	/* Make the yellow more "dirty". */
+	--ck-highlight-marker-yellow: #cac407;
 
 	/* Make red more pinkish. */
-	--ck-highlight-pen-red: #ec3e98;
+	--ck-highlight-pen-red: #ec3e6e;
 }
 ```
 
 {@snippet features/custom-highlight-colors-variables}
 
-#### Inline
+#### Inline color definitions
 
-There is also possibility to use inline color values like `rgb`, `hex` or `hsl` format. Firstly, you need to change values of markers and pens in {@link module:highlight/highlight~HighlightConfig#options `highlight.options`} .
+It is possible to use the inline color values in the `RGB`, `HEX` or `HSL` formats instead of CSS variables. To do that, customize the {@link module:highlight/highlight~HighlightConfig#options options} and define the `color` properties for each option:
 
 ```js
 ClassicEditor
@@ -107,21 +106,21 @@ ClassicEditor
 					model: 'greenMarker',
 					class: 'marker-green',
 					title: 'Green marker',
-					color: 'rgb(24, 201, 32)',
+					color: 'rgb(25, 156, 25)',
 					type: 'marker'
 				},
 				{
 					model: 'yellowMarker',
 					class: 'marker-yellow',
 					title: 'Yellow marker',
-					color: '#f2ee28',
+					color: '#cac407',
 					type: 'marker'
 				},
 				{
 					model: 'redPen',
 					class: 'pen-red',
 					title: 'Red pen',
-					color: 'hsl(355, 78%, 49%)',
+					color: 'hsl(343, 82%, 58%)',
 					type: 'pen'
 				}
 			]
@@ -134,17 +133,17 @@ ClassicEditor
 	.catch( ... );
 ```
 
-Secondly you need to take care of changes in stylesheet classes due to skipping CSS Variables. You should also remember about removing inactive CSS definitions in [stylesheet](https://github.com/ckeditor/ckeditor5-highlight/blob/master/src/highlight.css) like mixins and variables.
+Then, update the classes in the style sheet so the content corresponds to the UI of the editor. It is recommended for the UI buttons and the actual highlights in the text to share the same colors.
 
 ```css
 .marker-green {
-	background-color: rgb(24, 201, 32);
+	background-color: rgb(25, 156, 25);
 }
 .marker-yellow {
-	background-color: #f2ee28;
+	background-color: #cac407;
 }
 .pen-red {
-	color: hsl(355, 78%, 49%);
+	color: hsl(343, 82%, 58%);
 }
 ```