[css-color] Everything's syntax-highlighted now.

Author: tabatkins

css-color/Overview.bs

@@ -74,7 +74,7 @@ Foreground Color: the 'color' property</h2>
 	There are different ways to specify lime green:
 
 	<div class="example">
-		<pre>
+		<pre class="lang-css">
 		em { color: lime; }              /* color keyword   */
 		em { color: rgb(0,255,0); }      /* RGB range 0-255 */
 		</pre>
@@ -623,7 +623,7 @@ The ''currentcolor'' keyword</h3>
 	<div class='example'>
 		Here's a simple example showing how to use the ''currentcolor'' keyword:
 
-		<pre>
+		<pre class="lang-css">
 		.foo {
 			color: red;
 			background-color: currentcolor;
@@ -632,7 +632,7 @@ The ''currentcolor'' keyword</h3>
 
 		This is equivalent to writing:
 
-		<pre>
+		<pre class="lang-css">
 		.foo {
 			color: red;
 			background-color: red;
@@ -890,7 +890,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 class='literal'>
+		<pre>
 		hsl(120, 100%, 50%) <span style="color:black; background:hsl(120,100%,50%);">lime green</span>
 		hsl(120, 100%, 25%) <span style="color:white; background:hsl(120,100%,25%);">dark green</span>
 		hsl(120, 100%, 75%) <span style="color:black; background:hsl(120,100%,75%);">light green</span>
@@ -1618,7 +1618,7 @@ Specifying Grays: the ''gray()'' functional notation</h2>
 	''gray(A)'' represents the same color as ''rgb(A,A,A)''.
 	''gray(A,B)'' represents the same color as ''rgb(A,A,A,B)''.
 
-	<div class='issue'>
+	<div class='issue lang-javascript'>
 		<a>gray()</a> should have a keyword arg that opts it into smarter modes.
 		"luminance", for example, instead of being a simple expansion to ''rgb()'',
 		could actually compute the gray with the specified luminance.
@@ -1725,7 +1725,7 @@ Converting Between CMYK and RGB-Based Colors</h3>
 	(converting it to RGB as well, if necessary).
 	Otherwise:
 
-	<ul>
+	<ul class="lang-javascript">
 		<li><code>red   = 1 - min(1, cyan    * (1 - black) + black)</code>
 		<li><code>green = 1 - min(1, magenta * (1 - black) + black)</code>
 		<li><code>blue  = 1 - min(1, yellow  * (1 - black) + black)</code>
@@ -1734,11 +1734,11 @@ Converting Between CMYK and RGB-Based Colors</h3>
 
 	To <dfn title="naively convert from RGBA to CMYK | naively converted to CMYK">naively convert from RGBA to CMYK</dfn>:
 
-	<ul>
-		<li>black   = 1 - max(red, green, blue)
-		<li>cyan    = (1 - red - black)   / (1 - black), or 0 if black is 1
-		<li>magenta = (1 - green - black) / (1 - black), or 0 if black is 1
-		<li>yellow  = (1 - blue - black)  / (1 - black), or 0 if black is 1
+	<ul class="lang-javascript">
+		<li><code>black   = 1 - max(red, green, blue)</code>
+		<li><code>cyan    = (1 - red - black)   / (1 - black), or 0 if black is 1</code>
+		<li><code>magenta = (1 - green - black) / (1 - black), or 0 if black is 1</code>
+		<li><code>yellow  = (1 - blue - black)  / (1 - black), or 0 if black is 1</code>
 		<li>alpha is the same as the input color
 		<li>fallback color must be set to the input color
 	</ul>
@@ -1847,7 +1847,7 @@ Modifying Colors: the ''color()'' function</h2>
 	<div class='example'>
 		For example, here's a possible ''color()'' function that lightens and brightens the <var>base color</var>:
 
-		<pre>color(X w(+ 20%) s(+ 20%))</pre>
+		<pre class="lang-css">color(X w(+ 20%) s(+ 20%))</pre>
 
 		If X is a color like ''blue'',
 		this works in the expected way -
@@ -2087,7 +2087,7 @@ Color Blending: the ''blend'' and ''blenda'' adjusters</h3>
 			To achieve counter-clockwise behavior,
 			adjust either color's hue angle by a small amount toward the desired direction.
 
-			<div class='example'>
+			<div class='example lang-javascript'>
 				For example, blending ''yellow'' (hue angle ''60deg'') with 50% ''purple'' (hue angle ''300deg'')
 				results in ''red'' (hue angle ''0deg''),
 				not ''cyan'' (hue angle ''180deg''),
@@ -2098,7 +2098,7 @@ Color Blending: the ''blend'' and ''blenda'' adjusters</h3>
 
 
 		<dt>''blenda( <<color>> <<percentage>> [rgb | hsl | hwb]? )''
-		<dd>
+		<dd class="lang-javascript">
 			Identical to the previous clause,
 			except it pays attention to the alpha channel of the two colors
 			(''blend()'' just preserves the alpha channel of the <var>base color</var>).
@@ -2195,7 +2195,7 @@ Guaranteeing Adequate Contrast: the ''contrast'' adjuster</h3>
 	<p>
 		To compute the <dfn>luminance</dfn> of a color:
 
-	<ol>
+	<ol class="lang-javascript">
 		<li>
 			Scale the red, green, and blue channels of the color to the range [0,1].
 
@@ -2224,7 +2224,7 @@ Guaranteeing Adequate Contrast: the ''contrast'' adjuster</h3>
 	<p>
 		To compute the <dfn>contrast ratio</dfn> of two colors:
 
-	<ol>
+	<ol class="lang-javascript">
 		<li>
 			Compute the <a>luminance</a> of both colors.
 
@@ -3317,7 +3317,7 @@ Adding New Color-Manipulating Methods</h4>
 	To add a method of this type,
 	follow these steps:
 
-	<ol>
+	<ol class="lang-javascript">
 		<li>
 			Define the method for {{RGBColor}}s,
 			by adding it to <code>{{RGBColor}}.prototype</code>.
@@ -3344,12 +3344,12 @@ Adding New Color-Manipulating Methods</h4>
 			directly on the prototype of the color classes you're interested in.
 	</ol>
 
-	<div class='example'>
+	<div class='example lang-javascript'>
 		For example,
-		here's how you would add a "lightness" method to all color classes,
+		here's how you would add a <code>lightness()</code> method to all color classes,
 		which computes the approximate perceptual lightness of a color:
 
-		<pre class="lang-javascript">
+		<pre>
 		RGBColor.prototype.lightness = function() {
 			return .2126 * Math.pow(this.r, 2.2) +
 				.7152 * Math.pow(this.g, 2.2) +
@@ -3383,7 +3383,7 @@ Adding New Color Classes</h4>
 	To work correctly with the rest of the color classes,
 	a new color class <em>must</em>:
 
-	<ol>
+	<ol class="lang-javascript">
 		<li>
 			Subclass {{CSSColor}},
 			such as via:
@@ -3482,7 +3482,7 @@ Adding New Color Classes</h4>
 	however,
 	to get maximum value and consistency with the CSS-defined color classes:
 
-	<ul>
+	<ul class="lang-javascript">
 		<li>
 			A constructor that builds the color with multiple arguments
 			(typically the color's properties, in some order, with alpha optional and last).
@@ -3510,7 +3510,7 @@ Adding New Color Classes</h4>
 			If your class is very similar to an existing class,
 			such that you can do a better/faster conversion between the existing class and yours directly
 			rather than doing through {{RGBColor}} first,
-			an <code>toMyColor()</code> method on <code>TheOtherColor.prototype</code>,
+			a <code>toMyColor()</code> method on <code>TheOtherColor.prototype</code>,
 			and a <code>toTheOtherColor()</code> method on <code>MyNewColor.prototype</code>.
 			Add cases to your constructor to handle these classes as well.
 
@@ -3685,24 +3685,24 @@ The CSSColor Object</h3>
 	which is a helper function for adding new methods to all color classes
 	(see [[#api-adding-methods]] for more detail on using this function).
 
-	<div class='example'>
+	<div class='example lang-javascript'>
 		The most common use of this interface is to parse color strings into an appropriate color object.
 
 		The following code sets <code>color</code> to a {{HexColor}} object:
 
-		<pre class="lang-javascript">var color = CSSColor.parse("#96c");</pre>
+		<pre>var color = CSSColor.parse("#96c");</pre>
 
 		While this code sets <code>color</code> to an {{HSLColor}} object:
 
-		<pre class="lang-javascript">var color = CSSColor.parse("hsl(120deg, 100%, 50%)");</pre>
+		<pre>var color = CSSColor.parse("hsl(120deg, 100%, 50%)");</pre>
 
 		Note that this returns a color class matching the type of input provided to it.
 		If a particular color class is desired,
 		the class's constructor can be passed a string instead.
 		For example, the following will set <code>color</code> to an {{RGBColor}} object,
 		even though it uses the ''hsl()'' function:
 
-		<pre class="lang-javascript">var color = new RGBColor("hsl(120deg, 100%, 50%)")</pre>
+		<pre>var color = new RGBColor("hsl(120deg, 100%, 50%)")</pre>
 	</div>
 
 	<pre class='idl'>
@@ -3743,6 +3743,7 @@ The CSSColor Object</h3>
 			DOMString <dfn argument for="CSSColor/parse()">css</dfn>,
 			Element <dfn argument for="CSSColor/parse()">el</dfn>)
 		<dd>
+
 			Issue: Should parse the string,
 			returning the appropriate CSSColor subclass
 			depending on how the color was written.