8
0
Просмотр исходного кода

Docs: Improved HighlightConfig docs.

Aleksander Nowodzinski 8 лет назад
Родитель
Сommit
11ab84e30b

+ 6 - 2
packages/ckeditor5-highlight/docs/features/highlight.md

@@ -74,9 +74,13 @@ ClassicEditor
 
 ### Colors and styles
 
+<info-box info>
+	See the plugin {@link module:highlight/highlight~HighlightConfig options} to learn more about defaults.
+</info-box>
+
 #### Using CSS Variables
 
-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.
+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 {
@@ -95,7 +99,7 @@ The highlight feature is using the power of [CSS Variables](https://developer.mo
 
 #### Inline color definitions
 
-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:
+It is possible to use the inline color values in the `rgba(R, G, B, A)`, `#RRGGBB[AA]` or `hsla(H, S, L, A)` formats instead of CSS variables. To do that, customize the {@link module:highlight/highlight~HighlightConfig#options options} and define the `color` property for each option:
 
 ```js
 ClassicEditor

+ 25 - 6
packages/ckeditor5-highlight/src/highlight.js

@@ -136,13 +136,32 @@ export default class Highlight extends Plugin {
  * - `'marker'` - rendered as a `<mark>` element, styled with the `background-color`,
  * - `'pen'` - rendered as a `<mark>` element, styled with the font `color`.
  *
- * **Note**: A stylesheet with CSS classes is required for the configuration to work properly thanks to CSS Variables.
- * The highlight feature provides actual stylesheet with default colors. There is possibility to use default color format
- * like rgb, hex or hsl. In this situation colors apply only to the icons of marker and pen. You need to care about
- * color or background of `<mark>` by adding CSS classes definition.
+ * **Note**: The highlight feature provides a style sheet 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 { ... }
+ *
+ * **Note**: 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 style sheet.
  *
- * **Note**: It is recommended that the `color` value should correspond to the class in the content
- * style sheet. It represents the highlighter in the user interface of the editor.
+ * **Note**: It is recommended for the `color` property to correspond to the class in the content
+ * style sheet because it represents the highlighter in the user interface of the editor.
  *
  *		ClassicEditor
  *			.create( editorElement, {