added an optional mode triggered by class=linenums to arrange prettyprinted lines in list items in an ordered list.

Author: [email protected]

README.html

@@ -130,19 +130,46 @@ <h3>Why doesn't Prettyprinting of strings work on WordPress?</h3>
     >WordPress's help center</a> for info on how to stop smart quoting of code
     snippets.</p>
 
-    <h3>How do I put line numbers in my code?</h3>
+    <h3 id="linenums">How do I put line numbers in my code?</h3>
+    <p>You can use the <code>linenums</code> class to turn on line
+    numbering.  If your code doesn't start at line number 1, you can
+    add a colon and a line number to the end of that class as in
+    <code>linenums:52</code>.
+
+    <p>For example
+<pre class="prettyprint">&lt;pre class="prettyprint linenums:<b>4</b>"
+&gt;// This is line 4.
+foo();
+bar();
+baz();
+boo();
+far();
+faz();
+&lt;pre&gt;</pre>
+    produces
+<pre class="prettyprint linenums:4"
+>// This is line 4.
+foo();
+bar();
+baz();
+boo();
+far();
+faz();
+</pre>
+
+    <h3>How do I prevent a portion of markup from being marked as code?</h3>
     <p>You can use the <code>nocode</code> class to identify a span of markup
     that is not code.
-<pre>&lt;pre class=prettyprint&gt;
-&lt;span class="<b>nocode</b>"&gt;1:&lt;/span&gt; /* This is line 1 of my code
-&lt;span class="<b>nocode</b>"&gt;2:&lt;/span&gt;  * and here's line 2 */
-&lt;span class="<b>nocode</b>"&gt;3:&lt;/span&gt; print("I'm line number 3");
+<pre class="prettyprint">&lt;pre class=prettyprint&gt;
+int x = foo();  /* This is a comment  &lt;span class="nocode"&gt;This is not code&lt;/span&gt;
+  Continuation of comment */
+int y = bar();
 &lt;/pre&gt;</pre>
 produces
-<pre class=prettyprint>
-<span class="nocode">1:</span> /* This is line 1 of my code
-<span class="nocode">2:</span>  * and here's line 2 */
-<span class="nocode">3:</span> print("I'm line number 3");
+<pre class="prettyprint">
+int x = foo();  /* This is a comment  <span class="nocode">This is not code</span>
+  Continuation of comment */
+int y = bar();
 </pre>
 
     <p>For a more complete example see the issue22

src/prettify.css

@@ -11,7 +11,24 @@
 .atn { color: #606; }
 .atv { color: #080; }
 .dec { color: #606; }
-pre.prettyprint { padding: 2px; border: 1px solid #888; }
+pre.prettyprint { padding: 2px; border: 1px solid #888; display: list }
+
+/* Specify class=linenums on a pre to get line numbering */
+ol.linenums { margin: 0 }
+li.L0,
+li.L1,
+li.L2,
+li.L3,
+li.L5,
+li.L6,
+li.L7,
+li.L8 { list-style-type: none }
+/* Alternate shading for lines */
+li.L1,
+li.L3,
+li.L5,
+li.L7,
+li.L9 { background: #eee }
 
 @media print {
   .str { color: #060; }

src/prettify.js

@@ -306,28 +306,38 @@ window['_pr_isIE6'] = function () {
     return !whitespace || whitespace === 'pre';
   }
 
-  function normalizedHtml(node, out) {
+  function normalizedHtml(node, out, opt_sortAttrs) {
     switch (node.nodeType) {
       case 1:  // an element
         var name = node.tagName.toLowerCase();
+
         out.push('<', name);
-        for (var i = 0; i < node.attributes.length; ++i) {
-          var attr = node.attributes[i];
-          if (!attr.specified) { continue; }
-          out.push(' ');
-          normalizedHtml(attr, out);
+        var attrs = node.attributes;
+        var n = attrs.length;
+        if (n) {
+          if (opt_sortAttrs) {
+            var sortedAttrs = [];
+            for (var i = n; --i >= 0;) { sortedAttrs[i] = attrs[i]; }
+            sortedAttrs.sort(function (a, b) {
+                return (a.name < b.name) ? -1 : a.name === b.name ? 0 : 1;
+              });
+            attrs = sortedAttrs;
+          }
+          for (var i = 0; i < n; ++i) {
+            var attr = attrs[i];
+            if (!attr.specified) { continue; }
+            out.push(' ', attr.name.toLowerCase(),
+                     '="', attribToHtml(attr.value), '"');
+          }
         }
         out.push('>');
         for (var child = node.firstChild; child; child = child.nextSibling) {
-          normalizedHtml(child, out);
+          normalizedHtml(child, out, opt_sortAttrs);
         }
         if (node.firstChild || !/^(?:br|link|img)$/.test(name)) {
           out.push('<\/', name, '>');
         }
         break;
-      case 2: // an attribute
-        out.push(node.name.toLowerCase(), '="', attribToHtml(node.value), '"');
-        break;
       case 3: case 4: // text
         out.push(textToHtml(node.nodeValue));
         break;
@@ -1087,11 +1097,37 @@ window['_pr_isIE6'] = function () {
            // Doing this on other browsers breaks lots of stuff since \r\n is
            // treated as two newlines on Firefox.
            ? (isIE678 === 6 ? '&nbsp;\r\n' : '&nbsp;\r')
-           // IE collapses multiple adjacient <br>s into 1 line break.
+           // IE collapses multiple adjacent <br>s into 1 line break.
            // Prefix every newline with '&nbsp;' to prevent such behavior.
            : '&nbsp;<br />')
         : '<br />');
 
+    // Look for a class like linenums or linenums:<n> where <n> is the 1-indexed
+    // number of the first line.
+    var numberLines = job.sourceNode.className.match(/\blinenums\b(?::(\d+))?/);
+    var lineBreaker;
+    if (numberLines) {
+      var lineBreaks = [];
+      for (var i = 0; i < 10; ++i) {
+        lineBreaks[i] = lineBreakHtml + '</li><li class="L' + i + '">';
+      }
+      var lineNum = numberLines[1] - 1 || 0;  // Lines are 1-indexed
+      html.push('<ol class="linenums"><li class="L', (lineNum) % 10, '"');
+      if (lineNum) {
+        html.push(' value="', lineNum + 1, '"');
+      }
+      html.push('>');
+      lineBreaker = function () {
+        var lb = lineBreaks[++lineNum % 10];
+        // If a decoration is open, we need to close it before closing a list-item
+        // and reopen it on the other side of the list item.
+        return openDecoration
+            ? ('</span>' + lb + '<span class="' + openDecoration + '">') : lb;
+      };
+    } else {
+      lineBreaker = lineBreakHtml;
+    }
+
     // A helper function that is responsible for opening sections of decoration
     // and outputing properly escaped chunks of source
     function emitTextUpTo(sourceIdx) {
@@ -1120,7 +1156,7 @@ window['_pr_isIE6'] = function () {
         // Keep track of whether we need to escape space at the beginning of the
         // next chunk.
         lastWasSpace = trailingSpaceRe.test(htmlChunk);
-        html.push(htmlChunk.replace(newlineRe, lineBreakHtml));
+        html.push(htmlChunk.replace(newlineRe, lineBreaker));
         outputIdx = sourceIdx;
       }
     }
@@ -1163,6 +1199,7 @@ window['_pr_isIE6'] = function () {
     if (openDecoration) {
       html.push('</span>');
     }
+    if (numberLines) { html.push('</li></ol>'); }
     job.prettyPrintedHtml = html.join('');
   }