Switched from prettyprint to pygmentize.

Author: rdworth

entries/end.xml

@@ -20,7 +20,7 @@
     <p>The <code>end()</code> method is useful primarily when exploiting jQuery's chaining properties. When not using chaining, we can usually just call up a previous object by variable name, so we don't need to manipulate the stack. With <code>end()</code>, though, we can string all the method calls together:</p>
     <pre>
 $('ul.first').find('.foo').css('background-color', 'red')
-  <code>.end()</code>.find('.bar').css('background-color', 'green');
+  .end().find('.bar').css('background-color', 'green');
 </pre>
     <p>This chain searches for items with the class <code>foo</code> within the first list only and turns their backgrounds red. Then <code>end()</code> returns the object to its state before the call to <code>find()</code>, so the second <code>find()</code> looks for '.bar' inside <code>&lt;ul class="first"&gt;</code>, not just inside that list's <code>&lt;li class="foo"&gt;</code>, and turns the matching elements' backgrounds green. The net result is that items 1 and 3 of the first list have a colored background, and none of the items from the second list do.</p>
     <p>A long jQuery chain can be visualized as a structured code block, with filtering methods providing the openings of nested blocks and <code>end()</code> methods closing them:</p>

entries/jQuery.cssHooks.xml

@@ -7,7 +7,7 @@
     <p>For example, some versions of Webkit-based browsers require <code>-webkit-border-radius</code> to set the <code>border-radius</code> on an element, while earlier Firefox versions require <code>-moz-border-radius</code>. A css hook can normalize these vendor-prefixed properties to let <code>.css()</code> accept a single, standard property name (<code>border-radius</code>, or with DOM property syntax, <code>borderRadius</code>).</p>
 <p>In addition to providing fine-grained control over how specific style properties are handled, <code>$.cssHooks</code> also extends the set of properties available to the <code>.animate()</code> method.</p>
   <p>Defining a new css hook is straight-forward. The skeleton template below can serve as a guide to creating your own. </p>
-<pre class="prettyprint">(function($) {
+<pre><code>(function($) {
   // first, check to see if cssHooks are supported
   if ( !$.cssHooks ) {
     // if not, output an error message
@@ -24,10 +24,10 @@
     }
   };
 })(jQuery);
-</pre>
+</code></pre>
 <h4 id="feature-testing">Feature Testing</h4>
   <p>Before normalizing a vendor-specific CSS property, first determine whether the browser supports the standard property or a vendor-prefixed variation. For example, to check for support of the <code>border-radius</code> property, see if any variation is a member of a temporary element's <code>style</code> object.</p>
-<pre class="prettyprint">(function($) {
+<pre><code>(function($) {
   function styleSupport( prop ) {
     var vendorProp, supportedProp,
 
@@ -64,10 +64,10 @@
   // call the function, e.g. testing for "border-radius" support:
   styleSupport( "borderRadius" );
 })(jQuery);
-</pre>
+</code></pre>
 <h4 id="defining-complete-csshook">Defining a complete css hook</h4>
 <p>To define a complete css hook, combine the support test with a filled-out version of the skeleton template provided in the first example:</p>
-<pre class="prettyprint">(function($) {
+<pre><code>(function($) {
   if ( !$.cssHooks ) {
     throw("jQuery 1.4.3+ is needed for this plugin to work");
     return;
@@ -111,15 +111,15 @@
     };
   }
 })(jQuery);
-</pre>
+</code></pre>
 
   <p>You can then set the border radius in a supported browser using either the DOM (camelCased) style or the CSS (hyphenated) style:</p>
-<pre class="prettyprint">
+<pre><code>
 $("#element").css("borderRadius", "10px");
 $("#another").css("border-radius", "20px");
-</pre>
+</code></pre>
   <p>If the browser lacks support for any form of the CSS property, vendor-prefixed or not, the style is not applied to the element. However, if the browser supports a proprietary alternative, it can be applied to the cssHooks instead. </p>
-<pre class="prettyprint">
+<pre><code>
  (function($) {
   // feature test for support of a CSS property
   // and a proprietary alternative
@@ -150,18 +150,18 @@ $("#another").css("border-radius", "20px");
   }
 
 })(jQuery);
-</pre>
+</code></pre>
   <h4 id="special-units">Special units</h4>
   <p>By default, jQuery adds a "px" unit to the values passed to the <code>.css()</code> method. This behavior can be prevented by adding the property to the <code>jQuery.cssNumber</code> object</p>
 
-<pre class="prettyprint">$.cssNumber["someCSSProp"] = true;</pre>
+<pre><code>$.cssNumber["someCSSProp"] = true;</code></pre>
 
   <h4 id="animating">Animating with cssHooks</h4>
   <p>A css hook can also hook into jQuery's animation mechanism by adding a property to the <code>jQuery.fx.step</code> object:</p>
-<pre class="prettyprint">$.fx.step["someCSSProp"] = function(fx){
+<pre><code>$.fx.step["someCSSProp"] = function(fx){
   $.cssHooks["someCSSProp"].set( fx.elem, fx.now + fx.unit );
 };
-</pre>
+</code></pre>
 <p>Note that this works best for simple numeric-value animations. More custom code may be required depending on the CSS property, the type of value it returns, and the animation's complexity.</p>
 </longdesc>
 <category slug="css"/>

entries/jQuery.map.xml

@@ -21,7 +21,7 @@
   <longdesc>
   <p>The <code>$.map()</code> method applies a function to each item in an array or object and maps the results into a new array. <strong>Prior to jQuery 1.6</strong>, <code>$.map()</code> supports traversing <em>arrays only</em>. <strong>As of jQuery 1.6</strong> it also traverses objects.</p>
    <p>Array-like objects &#8212; those with a <code>.length</code> property <em>and</em> a value on the <code>.length - 1</code> index &#8212; must be converted to actual arrays before being passed to <code>$.map()</code>. The jQuery library provides <a href="http://api.jquery.com/jQuery.makeArray/">$.makeArray()</a> for such conversions.</p>
-<pre class="prettyprint">
+<pre><code>
 // The following object masquerades as an array.
 var fakeArray = {"length": 1, 0: "Addy", 1: "Subtracty"};
 
@@ -32,7 +32,7 @@ var realArray = $.makeArray( fakeArray )
 $.map( realArray, function(val, i) {
   // do something
 });
-</pre>
+</code></pre>
     <p>The translation function that is provided to this method is called for each top-level element in the array or object and is passed two arguments: The element's value and its index or key within the array or object.</p>
     <p>The function can return:</p>
     <ul>

entries2html.xsl

@@ -254,8 +254,8 @@
             <xsl:value-of select="position() - 1"/>
           </xsl:attribute>
           <h4><xsl:if test="$number-examples &gt; 1">Example: </xsl:if><span class="desc"><xsl:value-of select="desc" /></span></h4>
-  <pre class="prettyprint"><code><xsl:choose>
-            <xsl:when test="html"><xsl:attribute name="class">example demo-code</xsl:attribute>&lt;!DOCTYPE html&gt;
+  <pre><code><xsl:choose>
+            <xsl:when test="html">&lt;!DOCTYPE html&gt;
 &lt;html&gt;
 &lt;head&gt;<xsl:if test="css/text()">
   &lt;style&gt;<xsl:copy-of select="css/text()" />&lt;/style&gt;</xsl:if>

grunt.js

@@ -4,6 +4,7 @@ module.exports = function( grunt ) {
 var // modules
 	fs = require( "fs" ),
 	path = require( "path" ),
+	pygmentize = require( "pygmentize" ),
 	spawn = require( "child_process" ).spawn,
 
 	// files
@@ -86,10 +87,25 @@ grunt.registerTask( "build-entries", function() {
 				return;
 			}
 			grunt.verbose.ok();
+
 			targetFileName = targetDir + path.basename( fileName );
 			targetFileName = targetFileName.substr( 0, targetFileName.length - "xml".length ) + "html";
-			grunt.file.write( targetFileName, result );
-			fileDone();
+
+			grunt.verbose.write( "Pygmentizing " + targetFileName + "..." );
+			pygmentize.file( result, function( error, data ) {
+				if ( error ) {
+					grunt.verbose.error();
+					grunt.log.error( error );
+					fileDone();
+					return;
+				}
+				grunt.verbose.ok();
+
+				grunt.file.write( targetFileName, data );
+
+				fileDone();				
+			});
+
 		});
 	}, function() {
 		if ( task.errorCount ) {

package.json

@@ -23,7 +23,8 @@
   "dependencies": {
     "grunt": "0.3.x",
     "grunt-clean": "0.1.0",
-    "grunt-wordpress": "0.1.0"
+    "grunt-wordpress": "0.1.0",
+    "pygmentize": "0.2.0"
   },
   "devDependencies": {},
   "keywords": []