Bug 1130691: Support markdown tables

r=dkl,a=glob
bugzilla · Mar 9, 2015 · ee27d53 · ee27d53
1 parent 1f54136
commit ee27d53
Show file tree

Hide file tree

Showing 4 changed files with 142 additions and 5 deletions.
diff --git a/Bugzilla/Install/Requirements.pm b/Bugzilla/Install/Requirements.pm
@@ -404,9 +404,9 @@ sub OPTIONAL_MODULES {
 
     # Markdown
     {
-        package => 'Text-Markdown',
-        module  => 'Text::Markdown',
-        version => '1.0.26',
+        package => 'Text-MultiMarkdown',
+        module  => 'Text::MultiMarkdown',
+        version => '1.000035',
         feature => ['markdown'],
     },
 

diff --git a/Bugzilla/Markdown.pm b/Bugzilla/Markdown.pm
@@ -16,7 +16,7 @@ use Bugzilla::Template;
 
 use Digest::MD5 qw(md5_hex);
 
-use parent qw(Text::Markdown);
+use parent qw(Text::MultiMarkdown);
 
 @Bugzilla::Markdown::EXPORT = qw(new);
 
@@ -489,7 +489,7 @@ Bugzilla::Markdown - Generates HTML output from structured plain-text input.
 Bugzilla::Markdown implements a Markdown engine that produces
 an HTML-based output from a given plain-text input.
 
-The majority of the implementation is done by C<Text::Markdown>
+The majority of the implementation is done by C<Text::MultiMarkdown>
 CPAN module. It also applies the linkifications done in L<Bugzilla::Template>
 to the input resulting in an output which is a combination of both Markdown
 structures and those defined by Bugzilla itself.

diff --git a/skins/standard/global.css b/skins/standard/global.css
@@ -336,6 +336,20 @@ pre.bz_comment_text, .uneditable_textarea, tbody.file pre {
     display: block;
 }
 
+.bz_comment_text table {
+    border-collapse:collapse;
+}
+
+.bz_comment_text table, .bz_comment_text th, .bz_comment_text td {
+    border: 1px solid #969696;
+    padding: 2px;
+}
+
+.bz_comment_text thead, .bz_comment_text tbody {
+     border-top: 2px solid black;
+     border-bottom: 2px solid black;
+}
+
 .bz_comment_user, .bz_comment_time, .bz_comment_number, 
 .bz_private_checkbox, .bz_comment_actions
 {

diff --git a/template/en/default/pages/markdown.html.tmpl b/template/en/default/pages/markdown.html.tmpl
@@ -25,6 +25,8 @@
     <li><a href="#code">Code</a></li>
     <li><a href="#strikethroughs">Strikethroughs</a></li>
     <li><a href="#links">Links</a></li>
+    <li><a href="#tables">Tables</a></li>
+    <li><a href="#definitions">Definitions</a></li>
   </ul>
 
 <h2 id="headers">Headers</h2>
@@ -262,4 +264,125 @@
     </pre>
   </p>
 
+<h2 id="tables">Tables</h2>
+
+Tables can be defined using these special syntax:
+
+<pre><code>
+        |             |          Grouping           ||
+        First Header  | Second Header | Third Header |
+         ------------ | :-----------: | -----------: |
+        Content       |          *Long Cell*        ||
+        Content       |   **Cell**    |         Cell |
+
+        New section   |     More      |         Data |
+        And more      |     More      |     **Data** |
+</code></pre>
+
+<p>which gets converted into:</p>
+
+<div class="bz_comment_text">
+  <table style="margin-left: 5em">
+    <colgroup>
+      <col style="text-align:left;"/>
+      <col style="text-align:center;"/>
+      <col style="text-align:right;"/>
+    </colgroup>
+
+    <thead>
+      <tr>
+       <th style="text-align:left;"></th>
+       <th style="text-align:center;" colspan="2">Grouping</th>
+      </tr>
+      <tr>
+       <th style="text-align:left;">First Header</th>
+       <th style="text-align:center;">Second Header</th>
+       <th style="text-align:right;">Third Header</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+       <td style="text-align:left;">Content</td>
+       <td style="text-align:center;" colspan="2"><em>Long Cell</em></td>
+      </tr>
+      <tr>
+       <td style="text-align:left;">Content</td>
+       <td style="text-align:center;"><strong>Cell</strong></td>
+       <td style="text-align:right;">Cell</td>
+      </tr>
+    </tbody>
+    <tbody>
+      <tr>
+       <td style="text-align:left;">New section</td>
+       <td style="text-align:center;">More</td>
+       <td style="text-align:right;">Data</td>
+      </tr>
+      <tr>
+       <td style="text-align:left;">And more</td>
+       <td style="text-align:center;">More</td>
+       <td style="text-align:right;"><strong>Data</strong></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<p>The table rules are:</p>
+
+<ul>
+  <li>There must be at least one <code>|</code> per line</li>
+  <li>The &#8220;separator&#8221; line between headers and table content must contain only <code>|</code>,<code>-</code>, <code>=</code>, <code>:</code>,<code>.</code>, <code>+</code>, or spaces</li>
+  <li>Cell content must be on one line only</li>
+  <li>Columns are separated by <code>|</code></li>
+  <li>The first line of the table, and the alignment/divider line, must start at
+    the beginning of the line</li>
+</ul>
+
+<p>Other notes:</p>
+
+<ul>
+  <li>It is optional whether you have <code>|</code> characters at the beginning and end of lines.</li>
+  <li>The &#8220;separator&#8221; line uses <code>----</code> or <code>====</code> to indicate the line between a header and cell. The length of the line doesn&#8217;t matter, but must have at least one character per cell.</li>
+  <li>To set alignment, you can use a colon to designate left or right alignment, or a colon at each end to designate center alignment, as above. If no colon is present, the default alignment of your system is selected (left in most cases). </li>
+  <li>To indicate that a cell should span multiple columns, then simply add additional pipes (<code>|</code>) at the end of the cell, as shown in the example. If the cell in question is at the end of the row, then of course that means that pipes are not optional at the end of that row&#8230;. The number of pipes equals the number of columns the cell should span.</li>
+  <li>You can use Markdown markup within the table cells.</li>
+  <li>Cells can be empty.</li>
+</ul>
+
+<h2 id="definitions">Definition Lists</h2>
+
+Definition lists uses this syntax:
+
+<pre><code>
+        Apple
+        :   Pomaceous fruit of plants of the genus Malus in
+            the family Rosaceae.
+        :   An american computer company.
+
+        Orange
+        :   The fruit of an evergreen tree of the genus Citrus.
+</code></pre>
+
+<p>becomes:</p>
+
+<div class="bz_comment_text">
+  <dl style="margin-left: 5em">
+    <dt>Apple</dt>
+    <dd>Pomaceous fruit of plants of the genus Malus in
+      the family Rosaceae.</dd>
+
+    <dd>An american computer company.</dd>
+
+    <dt>Orange</dt>
+    <dd>The fruit of an evergreen tree of the genus Citrus.</dd>
+  </dl>
+</div>
+
+<p>You can have more than one term per definition by placing each term on a
+  separate line. Each definition starts with a colon, and you can have more than
+  one definition per term. You may optionally have a blank line between the last
+  term and the first definition.</p>
+
+<p>Definitions may contain other block level elements, such as lists,
+  blockquotes, or other definition lists.</p>
+
 [% PROCESS global/footer.html.tmpl %]