[css-images-4] Add highlighting classes to all code samples.

Author: tabatkins

css-images-4/Overview.bs

@@ -25,6 +25,9 @@ Include Can I Use Panels: yes
 <pre class=link-defaults>
 spec: css-images-3;
 	type: function;
+# fuck it, here's a comment
+	# here's another
+				# and some more
 		text: image-set();
 		text: cross-fade();
 </pre>
@@ -144,7 +147,7 @@ Image Fallbacks and Annotations: the ''image()'' notation {#image-notation}
 		even when the image fails to load.
 		For example, the following legacy code works fine if the image is rectangular and has no transparency:
 
-		<pre>
+		<pre class="lang-css">
 			body      { color: black; background: white; }
 			p.special { color: white; background: url("dark.png") black; }
 		</pre>
@@ -156,7 +159,7 @@ Image Fallbacks and Annotations: the ''image()'' notation {#image-notation}
 		which is probably not desired.
 		The ''image()'' function addresses this:
 
-		<pre>
+		<pre class="lang-css">
 			body      { color: black; background: white; }
 			p.special { color: white; background: image("dark.png", black); }
 		</pre>
@@ -172,7 +175,7 @@ Image Fallbacks and Annotations: the ''image()'' notation {#image-notation}
 		an author could write the following to get newer browsers to use the GIF's frame,
 		and older browsers to instead download the fallback image:
 
-		<pre>background-image: image("cat_meme.gif#frame=5", "lolcat.png");</pre>
+		<pre class="lang-css">background-image: image("cat_meme.gif#frame=5", "lolcat.png");</pre>
 	</div>
 -->
 
@@ -189,7 +192,7 @@ Image Fallbacks and Annotations: the ''image()'' notation {#image-notation}
 			<img src="images/sprites.svg" height="20" width="180" alt="[9 circles, with 0 to 8 eighths filled in]">
 		</a>
 
-		<pre>background-image: image('sprites.svg#xywh=40,0,20,20')</pre>
+		<pre class="lang-css">background-image: image('sprites.svg#xywh=40,0,20,20')</pre>
 
 		...the background of the element will be the portion of the image that starts at (40px,0px) and is 20px wide and tall,
 		which is just the circle with a quarter filled in.
@@ -209,7 +212,7 @@ Image Fallbacks and Annotations: the ''image()'' notation {#image-notation}
 		authors can take advantage of CSS's forward-compatible parsing rules
 		to provide a fallback when using an image fragment URL:
 
-		<pre>
+		<pre class="lang-css">
 			background-image: url('swirl.png'); /* old UAs */
 			background-image: image('sprites.png#xywh=10,30,60,20'); /* new UAs */
 		</pre>
@@ -234,7 +237,7 @@ Image Fallbacks and Annotations: the ''image()'' notation {#image-notation}
 		one can use this as a simple way to "tint" a background image,
 		by overlaying a partially-transparent color over the top of the other image:
 
-		<pre>background-image: image(rgba(0,0,255,.5)), url("bg-image.png");</pre>
+		<pre class="lang-css">background-image: image(rgba(0,0,255,.5)), url("bg-image.png");</pre>
 
 		'background-color' does not work for this,
 		as the solid color it generates always lies <em>beneath</em> all the background images.
@@ -261,7 +264,7 @@ Image Fallbacks and Annotations: the ''image()'' notation {#image-notation}
 		and an image designed to point into the text on one side will point out of the text on the other side.
 		This can be fixed with code like:
 
-		<pre>
+		<pre class="lang-html">
 			&lt;ul style="list-style-image: image(ltr 'arrow.png');">
 				&lt;li dir='ltr'>My bullet is on the left!&lt;/li>
 				&lt;li dir='rtl'>MY BULLET IS ON THE RIGHT!&lt;/li>
@@ -270,7 +273,7 @@ Image Fallbacks and Annotations: the ''image()'' notation {#image-notation}
 
 			This should render something like:
 
-		<pre>
+		<pre class="lang-html">
 			&#8658; My bullet is on the left!
 			  !THGIR EHT NO SI TELLUB YM &#8656;
 		</pre>
@@ -427,7 +430,7 @@ Note: No change from [[css3-images]].
 
 				As a somewhat silly example, a <code>&lt;p></code> element can be reused as a background elsewhere in the document:
 
-				<pre>
+				<pre class="lang-html">
 					&lt;style>
 					#src { color: white; background: lime; width: 300px; height: 40px; position: relative; }
 					#dst { color: black; background: element(#src); padding: 20px; margin: 20px 0; }
@@ -448,7 +451,7 @@ Note: No change from [[css3-images]].
 			<div class='example'>
 				For example, the ''element()'' function can reference an SVG <code>&lt;pattern></code> element in an HTML document:
 
-				<pre>
+				<pre class=lang-html>
 					&lt;!DOCTYPE html>
 					&lt;svg>
 						&lt;defs>
@@ -471,7 +474,7 @@ Note: No change from [[css3-images]].
 				reference a canvas that's being drawn into,
 				but not displayed in the page:
 
-				<pre>
+				<pre class=lang-html>
 					&lt;!DOCTYPE html>
 					&lt;script>
 						var canvas = document.querySelector('#animated-bullet');
@@ -498,7 +501,7 @@ Note: No change from [[css3-images]].
 
 				For example, all of the following ''element()'' uses will result in a transparent background:
 
-				<pre>
+				<pre class=lang-html>
 					&lt;!DOCTYPE html>
 					&lt;p id='one' style="display:none; position: relative;">one&lt;/p>
 					&lt;iframe src="http://example.com">
@@ -535,7 +538,7 @@ Note: No change from [[css3-images]].
 		The ''element()'' function can be put to many uses.
 		For example, it can be used to show a preview of the previous or next slide in a slideshow:
 
-		<pre>
+		<pre class=lang-html>
 			&lt;!DOCTYPE html>
 			&lt;script>
 			function navigateSlides() {
@@ -662,7 +665,7 @@ Using Out-Of-Document Sources: the <code>ElementSources</code> interface</h4>
 	<div class='example'>
 		For example, fancy animating backgrounds can be done with an external canvas:
 
-		<pre>
+		<pre class=lang-html>
 			&lt;script>
 			var bg = document.createElement('canvas');
 			bg.height = 200;
@@ -750,7 +753,7 @@ Gradients</h2>
 		gradients can be used in any property that accepts images.
 		For example:
 
-		<ul>
+		<ul class=lang-css>
 			<li><code>background: linear-gradient(white, gray);</code>
 			<li><code>list-style-image: radial-gradient(circle, #006, #00a 90%, #0000af 100%, white 100%)</code>
 		</ul>
@@ -926,7 +929,7 @@ Conic Gradient Examples</h4>
 	<div class=example>
 		Below are various ways of specifying the same basic conic gradient:
 
-		<pre>
+		<pre class=lang-css>
 			background: conic-gradient(#f06, gold);
 			background: conic-gradient(at 50% 50%, #f06, gold);
 			background: conic-gradient(from 0deg, #f06, gold);
@@ -943,7 +946,7 @@ Conic Gradient Examples</h4>
 		This demonstrates how even though color stops with angles outside [0deg, 360deg) are not directly painted,
 		they can still affect the color of the painted part of the gradient.
 
-		<pre>
+		<pre class=lang-css>
 			background: conic-gradient(white -50%, black 150%);
 			background: conic-gradient(white -180deg, black 540deg);
 			background: conic-gradient(hsl(0,0%,75%), hsl(0,0%,25%));
@@ -955,7 +958,7 @@ Conic Gradient Examples</h4>
 	<div class=example>
 		Below are two different ways of specifying the same rotated conic gradient, one with a rotation angle and one without:
 
-		<pre>
+		<pre class=lang-css>
 			background: conic-gradient(from 45deg, white, black, white);
 			background: conic-gradient(hsl(0,0%,87.5%), white 45deg, black 225deg, hsl(0,0%,87.5%));
 		</pre>
@@ -974,7 +977,7 @@ Conic Gradient Examples</h4>
 	<div class=example>
 		A conic gradient with a radial gradient overlaid on it, to draw a hue & saturation wheel:
 
-		<pre>
+		<pre class=lang-css>
 			background: radial-gradient(gray, transparent),
 			            conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
 			border-radius: 50%;
@@ -990,7 +993,7 @@ Conic Gradient Examples</h4>
 		This will produce infinitesimal (invisible) transitions between the color stops with different colors,
 		effectively producing solid color segments.
 
-		<pre>
+		<pre class=lang-css>
 			background: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);
 			border-radius: 50%;
 			width: 200px; height: 200px;
@@ -1031,19 +1034,20 @@ Repeating Gradients: the ''repeating-linear-gradient()'', ''repeating-radial-gra
 	<div class=example>
 		Repeating color stops with abrupt transitions creates a starburst-type background:
 
-		<pre>
+		<pre class=lang-css>
 			background: repeating-conic-gradient(
-		                    hsla(0,0%,100%,.2) 0deg 15deg,
-		                    hsla(0,0%,100%,0) 0deg 30deg
-		                ) #0ac;</pre>
+			                hsla(0,0%,100%,.2) 0deg 15deg,
+			                hsla(0,0%,100%,0) 0deg 30deg
+			            ) #0ac;
+		</pre>
 
 		<img src="images/repeating-conic2.png" alt="">
 	</div>
 
 	<div class=example>
 		Here repeating color stops with abrupt transitions are used to create a checkerboard:
 
-		<pre>
+		<pre class=lang-css>
 			background: repeating-conic-gradient(black 0deg 25%, white 0deg 50%);
 			background-size: 60px 60px;
 		</pre>
@@ -1052,7 +1056,7 @@ Repeating Gradients: the ''repeating-linear-gradient()'', ''repeating-radial-gra
 
 		The same checkerboard can be created via non-repeating conic gradients:
 
-		<pre>
+		<pre class=lang-css>
 			background: conic-gradient(black 25%, white 0deg 50%, black 0deg 75%, white 0deg);
 			background-size: 60px 60px;
 		</pre>
@@ -1443,7 +1447,7 @@ Overriding Image Resolutions: the 'image-resolution' property {#the-image-resolu
 		and maintain an appropriate size,
 		ensuring attractive display both on screen and on paper:
 
-		<pre>
+		<pre class=lang-css>
 			img.high-res {
 				image-resolution: 300dpi;
 			}
@@ -1463,13 +1467,13 @@ Overriding Image Resolutions: the 'image-resolution' property {#the-image-resolu
 		This rule specifies that the UA should use the image resolution found in the image itself,
 		falling back to 1 image pixel per CSS ''px'' unit.
 
-		<pre>img { image-resolution: from-image }</pre>
+		<pre class=lang-css>img { image-resolution: from-image }</pre>
 
 		These rules both specify that the UA should use the image resolution found in the image itself,
 		but if the image has no resolution,
 		the resolution is set to ''300dpi'' instead of the default ''1dppx''.
 
-		<pre>
+		<pre class=lang-css>
 			img { image-resolution: from-image 300dpi }
 			img { image-resolution: 300dpi from-image }
 		</pre>
@@ -1480,18 +1484,18 @@ Overriding Image Resolutions: the 'image-resolution' property {#the-image-resolu
 		Using this rule, the image resolution is set to 300dpi.
 		(The resolution in the image, if any, is ignored.)
 
-		<pre>img { image-resolution: 300dpi }</pre>
+		<pre class=lang-css>img { image-resolution: 300dpi }</pre>
 
 		This rule, on the other hand,
 		if used when the screen's resolution is 96dpi,
 		would instead render the image at 288dpi
 		(so that 3 image pixels map to 1 device pixel):
 
-		<pre>img { image-resolution: 300dpi snap; }</pre>
+		<pre class=lang-css>img { image-resolution: 300dpi snap; }</pre>
 
 		The ''snap'' keyword can also be used when the resolution is taken from the image:
 
-		<pre>img { image-resolution: snap from-image; }</pre>
+		<pre class=lang-css>img { image-resolution: snap from-image; }</pre>
 
 		An image declaring itself as 300dpi will,
 		in the situation above,