From 1c0b0db3afde03d7f436995d1da00b2a8866580e Mon Sep 17 00:00:00 2001
From: "Tate, Hongliang Tian" <tatetian@gmail.com>
Date: Wed, 18 Feb 2015 18:56:55 +0800
Subject: [PATCH] Improve line number support

---
 PseudoCode.js | 18 ++++++++++++------
 static.html   | 47 +++++++++++++++++++++++------------------------
 2 files changed, 35 insertions(+), 30 deletions(-)

diff --git a/PseudoCode.js b/PseudoCode.js
index 8317e85..9b9dcb1 100644
--- a/PseudoCode.js
+++ b/PseudoCode.js
@@ -577,16 +577,17 @@ Builder.prototype._beginLine = function() {
         this._numLOC++;
     }
     var indent = this._blockLevel * this._options.indentSize;
-    this._body.push('<p class="' + className + '" style="padding-left:' +
-                    indent + 'em;"">');
-
+    this._body.push('<p class="' + className + '">');
     if (this._options.lineNumber && this._blockLevel > 0) {
         this._body.push('<span class="ps-linenum">' + this._numLOC +
             this._options.lineNumberPunc + '</span>');
     }
+    this._body.push('<span class="ps-line-content" style="padding-left:'
+                    + indent + 'em;">');
 }
 
 Builder.prototype._endLine = function() {
+    this._body.push('</span>')
     this._body.push('</p>');
 }
 
@@ -621,9 +622,8 @@ Builder.prototype._buildTree = function(node) {
             this._captionCount++;
         }
         // Then, build the header for algorithm
-        var className = 'ps-alg';
+        var className = 'ps-algorithm';
         if (lastCaptionNode) className += ' with-caption';
-        if (this._options.lineNumber) className += ' with-linenum';
         this._beginDiv(className);
         if (lastCaptionNode) this._buildTree(lastCaptionNode);
         // Then, build other nodes
@@ -643,8 +643,14 @@ Builder.prototype._buildTree = function(node) {
         this._endLine();
         break;
     case 'algorithmic':
-        if (this._options.lineNumber) this._numLOC = 0;
+        var className = 'ps-algorithmic';
+        if (this._options.lineNumber) {
+            className += ' with-linenum';
+            this._numLOC = 0;
+        }
+        this._beginDiv(className);
         this._buildTreeForAllChildren(node);
+        this._endDiv();
         break;
     case 'block':
         // node: <block>
diff --git a/static.html b/static.html
index 2abdadf..a333936 100644
--- a/static.html
+++ b/static.html
@@ -13,37 +13,28 @@
         font-weight: 100;
         -webkit-font-smoothing: antialiased !important;
     }
-    .pseudo .ps-alg {
+    .pseudo .ps-algorithm {
         margin: 0.8em 0;
+        padding-bottom: 0.2em;
+        /* algorithm environment has borders; algorithmic has not */
         border-top: 3px solid black;
         border-bottom: 2px solid black;
-        padding-bottom: 0.2em;
-    }
-    .pseudo .ps-alg.with-linenum > .ps-line.ps-code {
-        margin-left: 0.8em;
     }
-    .pseudo .ps-alg.with-caption > .ps-line:first-child {
+    .pseudo .ps-algorithm.with-caption > .ps-line:first-child {
         border-bottom: 2px solid black;
     }
     .pseudo .ps-line {
-        line-height: 1.2;
-        margin: 0 0;
-        position: relative;
+        margin: 0; padding: 0;
     }
-    .pseudo .ps-line > span {
-        font-size: 1.21em;
+    /* line-content is where indent is added to */
+    .pseudo .ps-line-content {
+        line-height: 1.452;
     }
-    .pseudo .ps-line > .ps-linenum {
-        font-size: 0.8em;
-        line-height: 1em;
-        position: absolute;
-        left: 0;
-        top: 0.6em;
-        display: block;
-        width: 1.5em;
-        text-align: right;
-        margin-left: -0.5em;
+    .pseudo .ps-line-content > span {
+        font-size: 1.21em;
+        line-height: 1.2;
     }
+    /* keyword */
     .pseudo .ps-keyword {
         font-weight: 700;
         margin: 0 0.25em;
@@ -51,6 +42,17 @@
     .pseudo .ps-keyword:first-child{
         margin: 0 0.25em 0 0;
     }
+    /* line number support */
+    .pseudo .ps-linenum {
+        font-size: 0.8em;
+        line-height: 1em;
+        width: 2em;
+        text-align: right;
+        display: inline-block;
+    }
+    .pseudo .ps-algorithmic.with-linenum .ps-line.ps-code .ps-line-content {
+        margin-left: -1em;
+    }
     </style>
 </head>
 <body>
@@ -145,7 +147,6 @@
         \ENDWHILE
         \end{algorithmic}
         \end{algorithm}
-        \begin{algorithm}
         \begin{algorithmic}
         \REQUIRE this is shit!
         \ENSURE i think so
@@ -158,8 +159,6 @@
             \ENDIF
         \ENDWHILE
         \end{algorithmic}
-        \caption{this is it!}
-        \end{algorithm}
     </pre>
     <script type="text/javascript">
         var code = document.getElementById("code").textContent;
-- 
GitLab