feat(tables): add support for GFM tables

Github Flavored Markdown supports a specific table syntax. Table support was already available as an extension.
With this commit, the feature was moved to core, adding this feature to showdown through an option called "tables".

Related to #164

src/converter.js

@@ -44,6 +44,7 @@ showdown.Converter = function (converterOptions) {
        * @type {string[]}
        */
       parserOrder = [
+        'tables',
         'githubCodeBlocks',
         'hashHTMLBlocks',
         'stripLinkDefinitions',

src/showdown.js

@@ -14,7 +14,8 @@ var showdown = {},
       parseImgDimensions:        false,
       simplifiedAutoLink:        false,
       literalMidWordUnderscores: false,
-      strikethrough:             false
+      strikethrough:             false,
+      tables:                    false
     },
     globalOptions = JSON.parse(JSON.stringify(defaultOptions)); //clone default options out of laziness =P
 

src/subParsers/blockGamut.js

@@ -11,7 +11,7 @@ showdown.subParser('blockGamut', function (text, options, globals) {
   var key = showdown.subParser('hashBlock')('<hr />', options, globals);
   text = text.replace(/^[ ]{0,2}([ ]?\*[ ]?){3,}[ \t]*$/gm, key);
   text = text.replace(/^[ ]{0,2}([ ]?\-[ ]?){3,}[ \t]*$/gm, key);
-  text = text.replace(/^[ ]{0,2}([ ]?\_[ ]?){3,}[ \t]*$/gm, key);
+  text = text.replace(/^[ ]{0,2}([ ]?_[ ]?){3,}[ \t]*$/gm, key);
 
   text = showdown.subParser('lists')(text, options, globals);
   text = showdown.subParser('codeBlocks')(text, options, globals);

src/subParsers/tables.js

@@ -0,0 +1,108 @@
+showdown.subParser('tables', function (text, options, globals) {
+  'use strict';
+
+  var table = function () {
+
+    var tables = {},
+        style = 'text-align:left;',
+        filter;
+
+    tables.th = function (header) {
+      if (header.trim() === '') {
+        return '';
+      }
+      var id = header.trim().replace(/ /g, '_').toLowerCase();
+      return '<th id="' + id + '" style="' + style + '">' + header + '</th>';
+    };
+
+    tables.td = function (cell) {
+      var subText = showdown.subParser('blockGamut')(cell, options, globals);
+      return '<td style="' + style + '">' + subText + '</td>';
+    };
+
+    tables.ths = function () {
+      var out = '',
+        i = 0,
+        hs = [].slice.apply(arguments);
+      for (i; i < hs.length; i += 1) {
+        out += tables.th(hs[i]) + '\n';
+      }
+      return out;
+    };
+
+    tables.tds = function () {
+      var out = '', i = 0, ds = [].slice.apply(arguments);
+      for (i; i < ds.length; i += 1) {
+        out += tables.td(ds[i]) + '\n';
+      }
+      return out;
+    };
+
+    tables.thead = function () {
+      var out,
+        hs = [].slice.apply(arguments);
+      out = '<thead>\n';
+      out += '<tr>\n';
+      out += tables.ths.apply(this, hs);
+      out += '</tr>\n';
+      out += '</thead>\n';
+      return out;
+    };
+
+    tables.tr = function () {
+      var out,
+        cs = [].slice.apply(arguments);
+      out = '<tr>\n';
+      out += tables.tds.apply(this, cs);
+      out += '</tr>\n';
+      return out;
+    };
+
+    filter = function (text) {
+      var i = 0,
+        lines = text.split('\n'),
+        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 = [];
+          tbl.push('<table>');
+          hs = line.substring(1, line.length - 1).split('|');
+          tbl.push(tables.thead.apply(this, hs));
+          line = lines[++i];
+          if (!line.trim().match(/^[|][-=|: ]+[|]$/)) {
+            // not a table rolling back
+            line = lines[--i];
+          } else {
+            line = lines[++i];
+            tbl.push('<tbody>');
+            while (line.trim().match(/^[|].*[|]$/)) {
+              line = line.trim();
+              tbl.push(tables.tr.apply(this, line.substring(1, line.length - 1).split('|')));
+              line = lines[++i];
+            }
+            tbl.push('</tbody>');
+            tbl.push('</table>');
+            // we are done with this table and we move along
+            out.push(tbl.join('\n'));
+            continue;
+          }
+        }
+        out.push(line);
+      }
+      return out.join('\n');
+    };
+    return {parse: filter};
+  };
+
+  if (options.tables) {
+    var tableParser = table();
+    return tableParser.parse(text);
+  } else {
+    return text;
+  }
+});

test/features/tables/basic-alignment.html

@@ -0,0 +1,21 @@
+<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>
+    </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>
+    </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>
+    </tr>
+
+  </tbody>
+</table>

test/features/tables/basic-alignment.md

@@ -0,0 +1,4 @@
+| First Header  | Second Header |
+| :------------ | :------------ |
+| Row 1 Cell 1  | Row 1 Cell 2  |
+| Row 2 Cell 1  | Row 2 Cell 2  |

test/features/tables/basic.html

@@ -0,0 +1,21 @@
+<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>
+</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>
+</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>
+</tr>
+
+</tbody>
+</table>

test/features/tables/basic.md

@@ -0,0 +1,4 @@
+| First Header  | Second Header |
+| ------------- | ------------- |
+| Row 1 Cell 1  | Row 1 Cell 2  |
+| Row 2 Cell 1  | Row 2 Cell 2  |

test/features/tables/large.html

@@ -0,0 +1,48 @@
+<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 id="third_header" style="text-align:left;"> Third Header  </th>
+<th id="fourth_header" style="text-align:left;"> Fourth 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;"><p>Row 1 Cell 3  </p></td>
+<td style="text-align:left;"><p>Row 1 Cell 4  </p></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;"><p>Row 2 Cell 3  </p></td>
+<td style="text-align:left;"><p>Row 2 Cell 4  </p></td>
+</tr>
+
+<tr>
+<td style="text-align:left;"><p>Row 3 Cell 1  </p></td>
+<td style="text-align:left;"><p>Row 3 Cell 2  </p></td>
+<td style="text-align:left;"><p>Row 3 Cell 3  </p></td>
+<td style="text-align:left;"><p>Row 3 Cell 4  </p></td>
+</tr>
+
+<tr>
+<td style="text-align:left;"><p>Row 4 Cell 1  </p></td>
+<td style="text-align:left;"><p>Row 4 Cell 2  </p></td>
+<td style="text-align:left;"><p>Row 4 Cell 3  </p></td>
+<td style="text-align:left;"><p>Row 4 Cell 4  </p></td>
+</tr>
+
+<tr>
+<td style="text-align:left;"><p>Row 5 Cell 1  </p></td>
+<td style="text-align:left;"><p>Row 5 Cell 2  </p></td>
+<td style="text-align:left;"><p>Row 5 Cell 3  </p></td>
+<td style="text-align:left;"><p>Row 5 Cell 4  </p></td>
+</tr>
+
+</tbody>
+</table>

test/features/tables/large.md

@@ -0,0 +1,7 @@
+| First Header  | Second Header | Third Header  | Fourth Header |
+| ------------- | ------------- | ------------  | ------------- |
+| Row 1 Cell 1  | Row 1 Cell 2  | Row 1 Cell 3  | Row 1 Cell 4  |
+| Row 2 Cell 1  | Row 2 Cell 2  | Row 2 Cell 3  | Row 2 Cell 4  |
+| Row 3 Cell 1  | Row 3 Cell 2  | Row 3 Cell 3  | Row 3 Cell 4  |
+| Row 4 Cell 1  | Row 4 Cell 2  | Row 4 Cell 3  | Row 4 Cell 4  |
+| Row 5 Cell 1  | Row 5 Cell 2  | Row 5 Cell 3  | Row 5 Cell 4  |