feat(subParsers/table): support for table alignment

Credits to [torcellite (Karthik Balakrishnan)](https://github.com/torcellite)
jaxomlotus · Jul 11, 2015 · 1c8c928 · 1c8c928
1 parent 3a924e3
commit 1c8c928
Show file tree

Hide file tree

Showing 22 changed files with 342 additions and 110 deletions.
diff --git a/CREDITS.md b/CREDITS.md
@@ -33,7 +33,11 @@ Credits
       Bug fixing and late maintainer
     * [Hannah Wolfe](https://github.com/ErisDS)<br/>
       Bug fixes
-    * [Alexandre Courtiol](https://github.com/acourtiol)
+    * [Alexandre Courtiol](https://github.com/acourtiol)<br/>
+      Bug fixes and build optimization
+    * [Karthik Balakrishnan](https://github.com/torcellite)<br/>
+      Support for table alignment
+
 
   - Original Project
     * [John Gruber](http://daringfireball.net/projects/markdown/)<br/>

diff --git a/dist/showdown.js b/dist/showdown.js
diff --git a/dist/showdown.js.map b/dist/showdown.js.map
diff --git a/dist/showdown.min.js b/dist/showdown.min.js
diff --git a/dist/showdown.min.js.map b/dist/showdown.min.js.map
diff --git a/src/showdown.js b/src/showdown.js
@@ -15,7 +15,8 @@ var showdown = {},
       simplifiedAutoLink:        false,
       literalMidWordUnderscores: false,
       strikethrough:             false,
-      tables:                    false
+      tables:                    false,
+      tablesHeaderId:            false
     },
     globalOptions = JSON.parse(JSON.stringify(defaultOptions)); //clone default options out of laziness =P
 

diff --git a/src/subParsers/tables.js b/src/subParsers/tables.js
@@ -4,56 +4,80 @@ showdown.subParser('tables', function (text, options, globals) {
   var table = function () {
 
     var tables = {},
-        style = 'text-align:left;',
         filter;
 
-    tables.th = function (header) {
-      if (header.trim() === '') {
+    tables.th = function (header, style) {
+      var id = '';
+      header = header.trim();
+      if (header === '') {
         return '';
       }
-      var id = header.trim().replace(/ /g, '_').toLowerCase();
-      return '<th id="' + id + '" style="' + style + '">' + header + '</th>';
+      if (options.tableHeaderId) {
+        id = ' id="' + header.replace(/ /g, '_').toLowerCase() + '"';
+      }
+      if (style.trim() === '') {
+        style = '';
+      } else {
+        style = ' style="' + style + '"';
+      }
+      return '<th' + id + style + '>' + header + '</th>';
     };
 
-    tables.td = function (cell) {
-      var subText = showdown.subParser('blockGamut')(cell, options, globals);
-      return '<td style="' + style + '">' + subText + '</td>';
+    tables.td = function (cell, style) {
+      var subText = showdown.subParser('spanGamut')(cell.trim(), options, globals);
+      if (style.trim() === '') {
+        style = '';
+      } else {
+        style = ' style="' + style + '"';
+      }
+      return '<td' + style + '>' + subText + '</td>';
     };
 
     tables.ths = function () {
       var out = '',
-        i = 0,
-        hs = [].slice.apply(arguments);
+          i = 0,
+          hs = [].slice.apply(arguments[0]),
+          style = [].slice.apply(arguments[1]);
+
       for (i; i < hs.length; i += 1) {
-        out += tables.th(hs[i]) + '\n';
+        out += tables.th(hs[i], style[i]) + '\n';
       }
+
       return out;
     };
 
     tables.tds = function () {
-      var out = '', i = 0, ds = [].slice.apply(arguments);
+      var out = '',
+          i = 0,
+          ds = [].slice.apply(arguments[0]),
+          style = [].slice.apply(arguments[1]);
+
       for (i; i < ds.length; i += 1) {
-        out += tables.td(ds[i]) + '\n';
+        out += tables.td(ds[i], style[i]) + '\n';
       }
       return out;
     };
 
     tables.thead = function () {
       var out,
-        hs = [].slice.apply(arguments);
+          hs = [].slice.apply(arguments[0]),
+          style = [].slice.apply(arguments[1]);
+
       out = '<thead>\n';
       out += '<tr>\n';
-      out += tables.ths.apply(this, hs);
+      out += tables.ths.apply(this, [hs, style]);
       out += '</tr>\n';
       out += '</thead>\n';
       return out;
     };
 
     tables.tr = function () {
       var out,
-        cs = [].slice.apply(arguments);
+        cs = [].slice.apply(arguments[0]),
+        style = [].slice.apply(arguments[1]);
+
       out = '<tr>\n';
-      out += tables.tds.apply(this, cs);
+      out += tables.tds.apply(this, [cs, style]);
       out += '</tr>\n';
       return out;
     };
@@ -64,15 +88,44 @@ showdown.subParser('tables', function (text, options, globals) {
         line,
         hs,
         out = [];
+
       for (i; i < lines.length; i += 1) {
         line = lines[i];
         // looks like a table heading
         if (line.trim().match(/^[|].*[|]$/)) {
           line = line.trim();
-          var tbl = [];
+
+          var tbl = [],
+              align = lines[i + 1].trim(),
+              styles = [],
+              j = 0;
+
+          if (align.match(/^[|][-=|: ]+[|]$/)) {
+            styles = align.substring(1, align.length - 1).split('|');
+            for (j = 0; j < styles.length; ++j) {
+              styles[j] = styles[j].trim();
+              if (styles[j].match(/^[:][-=| ]+[:]$/)) {
+                styles[j] = 'text-align:center;';
+
+              } else if (styles[j].match(/^[-=| ]+[:]$/)) {
+                styles[j] = 'text-align:right;';
+
+              } else if (styles[j].match(/^[:][-=| ]+$/)) {
+                styles[j] = 'text-align:left;';
+              } else {
+                styles[j] = '';
+              }
+            }
+          }
           tbl.push('<table>');
           hs = line.substring(1, line.length - 1).split('|');
-          tbl.push(tables.thead.apply(this, hs));
+
+          if (styles.length === 0) {
+            for (j = 0; j < hs.length; ++j) {
+              styles.push('text-align:left');
+            }
+          }
+          tbl.push(tables.thead.apply(this, [hs, styles]));
           line = lines[++i];
           if (!line.trim().match(/^[|][-=|: ]+[|]$/)) {
             // not a table rolling back
@@ -82,7 +135,7 @@ showdown.subParser('tables', function (text, options, globals) {
             tbl.push('<tbody>');
             while (line.trim().match(/^[|].*[|]$/)) {
               line = line.trim();
-              tbl.push(tables.tr.apply(this, line.substring(1, line.length - 1).split('|')));
+              tbl.push(tables.tr.apply(this, [line.substring(1, line.length - 1).split('|'), styles]));
               line = lines[++i];
             }
             tbl.push('</tbody>');

diff --git a/test/features/tables/basic-alignment.html b/test/features/tables/basic-alignment.html
@@ -1,20 +1,20 @@
 <table>
   <thead>
     <tr>
-      <th id="first_header" style="text-align:left;"> First Header  </th>
-      <th id="second_header" style="text-align:left;"> Second Header </th>
+      <th style="text-align:left;">First Header</th>
+      <th style="text-align:left;">Second Header</th>
     </tr>
   </thead>
 
   <tbody>
     <tr>
-      <td style="text-align:left;"><p>Row 1 Cell 1  </p></td>
-      <td style="text-align:left;"><p>Row 1 Cell 2  </p></td>
+      <td style="text-align:left;">Row 1 Cell 1</td>
+      <td style="text-align:left;">Row 1 Cell 2</td>
     </tr>
 
     <tr>
-      <td style="text-align:left;"><p>Row 2 Cell 1  </p></td>
-      <td style="text-align:left;"><p>Row 2 Cell 2  </p></td>
+      <td style="text-align:left;">Row 2 Cell 1</td>
+      <td style="text-align:left;">Row 2 Cell 2</td>
     </tr>
 
   </tbody>

diff --git a/test/features/tables/basic.html b/test/features/tables/basic.html
@@ -1,20 +1,20 @@
 <table>
 <thead>
 <tr>
-<th id="first_header" style="text-align:left;"> First Header  </th>
-<th id="second_header" style="text-align:left;"> Second Header </th>
+<th>First Header</th>
+<th>Second Header</th>
 </tr>
 </thead>
 
 <tbody>
 <tr>
-<td style="text-align:left;"><p>Row 1 Cell 1  </p></td>
-<td style="text-align:left;"><p>Row 1 Cell 2  </p></td>
+<td>Row 1 Cell 1</td>
+<td>Row 1 Cell 2</td>
 </tr>
 
 <tr>
-<td style="text-align:left;"><p>Row 2 Cell 1  </p></td>
-<td style="text-align:left;"><p>Row 2 Cell 2  </p></td>
+<td>Row 2 Cell 1</td>
+<td>Row 2 Cell 2</td>
 </tr>
 
 </tbody>