[css-color-4] syntax hilighting

Author: svgeesus

css-color-4/Overview.bs

@@ -140,7 +140,7 @@ Value Definitions</h3>
 
 		<p>This same color could be expressed in various colorspaces:</p>
 
-		<pre>
+		<pre class="lang-css">
 <span class="swatch" style="--color: rgb(41.587%, 50.3670%, 36.664%)"></span> color(sRGB 0.41587 0.503670 0.36664);
 <span class="swatch" style="--color: rgb(41.587%, 50.3670%, 36.664%)"></span> color(display-p3 0.43313 0.50108 0.37950);
 <span class="swatch" style="--color: rgb(41.587%, 50.3670%, 36.664%)"></span> color(a98-rgb 0.44091 0.49971 0.37408);
@@ -1246,7 +1246,7 @@ HSL Colors: ''hsl()'' and ''hsla()'' functions</h2>
 		For example, the following colors can all be generated off of the basic "green" hue,
 		just by varying the other two arguments:
 
-		<pre>
+		<pre class="lang-css">
 		hsl(120deg 100% 50%) <span style="color:black; background:hsl(120,100%,50%);">lime green</span>
 		hsl(120deg 100% 25%) <span style="color:white; background:hsl(120,100%,25%);">dark green</span>
 		hsl(120deg 100% 75%) <span style="color:black; background:hsl(120,100%,75%);">light green</span>
@@ -2135,7 +2135,7 @@ Specifying Lab and LCH: the ''lab()'' and ''lch()'' functional notations</h3>
 
 
 	<div class="example">
-		<pre>
+		<pre class="lang-css">
 			<span class="swatch" style="--color: rgb(49.06% 13.87% 15.9%)"></span> lab(29.2345% 39.3825 20.0664);
 			<span class="swatch" style="--color: rgb(77.61% 36.34% 2.45%)"></span> lab(52.2345% 40.1645 59.9971);
 			<span class="swatch" style="--color: rgb(61.65% 57.51% 9.28%)"></span> lab(60.2345, -5.3654 58.956);
@@ -2174,7 +2174,7 @@ Specifying Lab and LCH: the ''lab()'' and ''lch()'' functional notations</h3>
 	and interpreted identically to the <<alpha-value>> in ''rgb()''.
 
 	<div class="example">
-		<pre>
+		<pre class="lang-css">
 			<span class="swatch" style="--color: rgb(49.06% 13.87% 15.9%)"></span> lch(29.2345% 44.2 27);
 			<span class="swatch" style="--color: rgb(77.61% 36.34% 2.45%)"></span> lch(52.2345% 72.2 56.2);
 			<span class="swatch" style="--color: rgb(61.65% 57.51% 9.28%)"></span> lch(60.2345% 59.2 95.2);
@@ -2275,7 +2275,7 @@ Profiled, Device-dependent Colors</h2>
 		are in the range 0.0 to 1.0
 		(rather than, for example, 0 to 255).
 		<!-- add examples with alpha, and with fallback -->
-		<pre>
+		<pre class="lang-css">
 			color: color(--swopc 0.0134 0.8078 0.7451 0.3019);
 			color: color(--indigo 0.0941 0.6274 0.3372 0.1647 0 0.0706 0.1216);
 			color: color(prophoto-rgb 0.9137 0.5882 0.4784);
@@ -2288,7 +2288,7 @@ Profiled, Device-dependent Colors</h2>
 		somewhere in the stylesheet,
 		to connect the name with the profile data.
 
-		<pre>
+		<pre class="lang-css">
 			@color-profile --swopc {
 				src: url('http://example.org/swop-coated.icc');}
 			@color-profile --indigo {
@@ -2312,6 +2312,26 @@ Profiled, Device-dependent Colors</h2>
 	and later colors acting as "fallback" if an earlier color [=can't be displayed=]
 	(for example, if the colorspace it specifies hasn't been loaded yet).
 
+	Each argument represents either an <dfn export>invalid color</dfn>, as described below,
+	or a [=valid color=].
+
+	A color may be a [=valid color=]
+	but still be outside the range of colors
+	that can be produced by an output device
+	(a screen, projector, or printer).
+	It is said to be <dfn export>out of gamut</dfn>
+	for that colorspace.
+
+	An out of gamut color has component values
+	less than 0 or 0%, or greater than 1 or 100%.
+	These are are not invalid; instead, they are
+	<a>gamut-mapped</a> using a relative colorimetric intent
+	which brings the values within the range 0/0% to 1/100%
+	at computed-value time.
+
+	Each [=valid color=] is either in-gamut for the output decice (screen, or printer),
+	or it is [=out of gamut=].
+
 	Each argument has the following form:
 
 	* An optional <<ident>>  or <<dashed-ident>> denoting the colorspace.
@@ -2341,12 +2361,14 @@ Profiled, Device-dependent Colors</h2>
 			<dd>
 				If more <<number>>s or <<percentage>>s are provided than parameters that the colorspace takes,
 				the excess <<number>>s at the end are ignored.
+				The color is still a [=valid color=].
 
 				If fewer <<number>>s or <<percentage>>s are provided than parameters that the colorspace takes,
 				the missing parameters default to ''0''.
 				(This is particularly convenient for multichannel printers
 				where the additional inks are spot colors or varnishes
 				that most colors on the page won't use.)
+				The color is still a [=valid color=].
 
 				If a <<string>> is provided,
 				this argument represents an <a>invalid color</a>.
@@ -2367,38 +2389,29 @@ Profiled, Device-dependent Colors</h2>
 	using any CSS color syntax
 	can be provided.
 
+	This final argument can again be either a [=valid color=]
+	or an [=invalid color=]; and if valid it can be either
+	in-gamut for the output device, or [=out of gamut=].
+
+	A color which is either an [=invalid color=] or
+	an [=out of  gamut=] color
+	<dfn export>can't be displayed</dfn>.
 
 	The ''color()'' function represents the color
-	specified by the first of its arguments that represent a <dfn export>valid color</dfn>
-	(that is, the first argument that isn't an <dfn export>invalid color</dfn>).
-	If all of its arguments represent <a>invalid colors</a>,
+	specified by the first of its arguments that <dfn export>can be displayed</dfn>,
+	(that is, the first argument that isn't an [=invalid color=]
+	and isn't [=out of gamut=]).
+	If all of its arguments [=can't be displayed=]],
 	''color()'' represents <a>opaque black</a>.
 
-	A color may be a [=valid color=]
-	but still be outside the range of colors
-	that can be produced by an output device
-	(a screen, projector, or printer).
-	It is said to be <dfn export>out of gamut</dfn>
-	for that colorspace.
-
-	An out of gamut color has component values
-	less than 0 or 0%, or greater than 1 or 100%.
-	These are are not invalid; instead, they are
-	<a>gamut-mapped</a> using a relative colorimetric intent
-	which brings the values within the range 0/0% to 1/100%
-	at computed-value time.
-
-	A color which is either an [=invalid color=] or
-	an [=out-of-gamut=] color
-	<dfn export>can't be displayed</dfn>.
 
 	<div class="example">
 		This very intense lime color is in-gamut for rec.2020:
-		<pre>color(rec2020 0.42053 0.979780 0.00579);</pre>
+		<pre class="lang-css">color(rec2020 0.42053 0.979780 0.00579);</pre>
 		in LCH, that color is
-		<pre>lch(86.6146 160.0000, 136.0088);</pre>
+		<pre class="lang-css">lch(86.6146 160.0000, 136.0088);</pre>
 		in display-p3, that color is
-		<pre>color(display-p3 -0.6112 1.0079 -0.2192);</pre>
+		<pre class="lang-css">color(display-p3 -0.6112 1.0079 -0.2192);</pre>
 		and is out of gamut for display-p3
 		(red and blue are negative, green is greater than 1).
 		If you have a display-p3 screen, that color is:
@@ -2414,7 +2427,7 @@ Profiled, Device-dependent Colors</h2>
 
 	<div class="example">
 		The same color as the previous example is now specified with a fallback
-		<pre>color(rec2020 0.42053 0.979780 0.00579, color(display-p3(0 1 0)));</pre>
+		<pre class="lang-css">color(rec2020 0.42053 0.979780 0.00579, color(display-p3(0 1 0)));</pre>
 		On a display-p3 screen,
 		because the first-choice color can't be displayed
 		and because a fallback has been given which is in-gamut for the display,
@@ -2653,7 +2666,7 @@ Predefined colorspaces: ''srgb'', ''display-p3'', ''a98-rgb'', ''prophoto-rgb'',
 				<div class="example">
 					These are exactly equivalent:
 
-					<pre>
+					<pre class="lang-css">
 						<span class="swatch" style="--color: #7654CD"></span> #7654CD;
 						<span class="swatch" style="--color: #7654CD"></span> rgb(46.27% 32.94% 80.39%)
 						<span class="swatch" style="--color: #7654CD"></span> color(lab 44.36 36.05 -58.99)
@@ -2669,7 +2682,7 @@ Predefined colorspaces: ''srgb'', ''display-p3'', ''a98-rgb'', ''prophoto-rgb'',
 				<div class="example">
 					These are exactly equivalent:
 
-					<pre>
+					<pre class="lang-css">
 						<span class="swatch" style="--color: rgb(38.29% 67.27% 93.85%)"></span> lab(67.5345% -8.6911 -41.6019);
 						<span class="swatch" style="--color: rgb(38.29% 67.27% 93.85%)"></span> color(lab 67.5345% -8.6911 -41.6019);
 					</pre>
@@ -2867,7 +2880,7 @@ you will use.
 
 	-->
 
-	<pre>
+	<pre class="lang-css">
 		@color-profile --fogra39 {
 			src: url('https://example.org/Coated_Fogra39L_VIGC_300.icc');
 		}
@@ -2925,7 +2938,7 @@ can proceed as normal.
 
 	-->
 
-	<pre>
+	<pre class="lang-css">
 		@color-profile --swop5c {
 			src: url('https://example.org/SWOP2006_Coated5v2.icc');
 		}
@@ -2961,7 +2974,7 @@ to be outside the sRGB gamut.
 
 	-->
 
-	<pre>
+	<pre class="lang-css">
 		@media (color-gamut: srgb) {
 			.header {
 				background-color:  color(--fogra39 90% 0% 90% 0%, <span class="swatch" style="--color: rgb(8.154% 60.9704% 37.184%)"></span> rgb(8.154% 60.9704% 37.184%));
@@ -3041,7 +3054,7 @@ Colors are not restricted to four inks (CMYK). For example, wide-gamut 7 Color i
 
 	<!-- see file Macbeth-7color.txt --->
 
-	<pre>
+	<pre class="lang-css">
 		@color-profile --fogra55beta {
 			src: url('https://example.org/2020_13.003_FOGRA55beta_CL_Profile.icc');
 		}