[css-color-5][editorial] more highlighting

Author: svgeesus

css-color-5/Overview.bs

@@ -1084,7 +1084,7 @@ the allowed [=channel keywords=] are:
 <div class="example">
 	To manipulate color channels in the sRGB color space:
 
-	<pre>
+	<pre  highlight=css>
 		rgb(from <span class="swatch" style="--color: indianred"></span> indianred 255 g b)
 	</pre>
 
@@ -1099,15 +1099,15 @@ Relative sRGB color syntax is <em>only</em> applicable to the non-legacy RGB syn
 	For example, this attempt to use the rgba
 	<a>legacy color syntax</a> with commas would be incorrect
 
-	<pre>
+	<pre  highlight=css>
 		rgba(from <span class="swatch" style="--color: darkblue"></span> darkblue 16, 32, b, 0.5 )
 	</pre>
 </div>
 
 <div class="example">
 	Instead, use
 
-	<pre>
+	<pre  highlight=css>
 		rgb(from <span class="swatch" style="--color: darkblue"></span> darkblue 16 32 b / 0.5 )
 	</pre>
 
@@ -1152,7 +1152,7 @@ the allowed [=channel keywords=] are:
 
 <div class="example">
 	This adds 180 degrees to the hue angle, giving a complementary color.
-	<pre>
+	<pre  highlight=css>
 		--accent: <span class="swatch" style="--color: lightseagreen"></span> lightseagreen;
 		--complement:  <span class="swatch" style="--color: hsl(357deg 70% 41%)"></span> hsl(from var(--accent) calc(h + 180) s l);
 	</pre>
@@ -1232,7 +1232,7 @@ the allowed [=channel keywords=] are:
 <div class="example">
 	Fully desaturating a color to gray, keeping the exact same lightness:
 
-	<pre>
+	<pre  highlight=css>
 	--mycolor: <span class="swatch" style="--color: orchid"></span> orchid;
 	// orchid is lab(62.753 52.460 -34.103)
 	--mygray: <span class="swatch" style="--color: rgb(59.515% 59.515% 59.515%)"></span> lab(from var(--mycolor) l 0 0)
@@ -1306,7 +1306,7 @@ the allowed [=channel keywords=] are:
 
 <div class="example">
 	This adds 180 degrees to the hue angle, giving the complementary color.
-	<pre>
+	<pre  highlight=css>
 		--accent: <span class="swatch" style="--color: lightseagreen"></span> lightseagreen;
 		--complement:  <span class="swatch" style="--color: rgb(88.2814% 51.1047% 58.3039%)"></span> lch(from var(--accent) l c calc(h + 180));
 	</pre>
@@ -1316,7 +1316,7 @@ the allowed [=channel keywords=] are:
 <div class="example">
 	Fully desaturating a color to gray, keeping the exact same lightness:
 
-	<pre>
+	<pre  highlight=css>
 	--mycolor: <span class="swatch" style="--color: orchid"></span> orchid;
 	// orchid is lch(62.753 62.571 326.973)
 	--mygray: <span class="swatch" style="--color: rgb(59.515% 59.515% 59.515%)"></span> lch(from var(--mycolor) l 0 h)
@@ -1325,7 +1325,7 @@ the allowed [=channel keywords=] are:
 
 	But now (since the hue was preserved) <em>re-saturating</em> again
 
-	<pre>
+	<pre  highlight=css>
 	--mymuted: <span class="swatch" style="--color: rgb(72.710% 53.293% 71.224%)"></span> lch(from var(--mygray) l 30 h);
 	// mymuted is lch(62.753 30 326.973) which is rgb(72.710% 53.293% 71.224%)
 	</pre>
@@ -1345,7 +1345,7 @@ However, unlike HSL, manipulations are not guaranteed to be in-gamut.
 
 	-->
 
-	<pre>
+	<pre  highlight=css>
 		--mycolor: <span class="swatch" style="--color: rgb(86.1% 33.4% 97.6%)"></span> lch(60% 90 320);
 		lch(from var(--mycolor) l c calc(h - 120));
 	</pre>
@@ -1386,7 +1386,7 @@ However, unlike HSL, manipulations are not guaranteed to be in-gamut.
 	Performing the same operation in HSL will return an in-gamut result.
 	But it is unsatisfactory in other ways:
 
-	<pre>
+	<pre  highlight=css>
 		--mycolor: <span class="swatch" style="--color: rgb(86.1% 33.4% 97.6%)"></span> lch(60% 90 320);
 		hsl(from var(--mycolor) calc(h - 120) s l);
 	</pre>
@@ -1447,7 +1447,7 @@ The origin color is inside the RGB gamut,
 but rotating the hue in Oklch
 again produces an out of gamut color.
 
-<pre>
+<pre  highlight=css>
 	--mycolor: <span class="swatch" style="--color: rgb(86.1% 33.4% 97.6%)"></span> lch(60% 90 320);
 	oklch(from var(--mycolor) l c calc(h - 120));
 </pre>