search

erusev / parsedown

Better Markdown Parser in PHP
https://parsedown.org
MIT License
14.74k stars 1.12k forks source link

Nasty bug with simple example for table rendering #713

Open DominiqueVial opened 5 years ago

DominiqueVial commented 5 years ago

I faced a huge bug on HTML code that worked fine with PHP Markdown.

On demo page, let's add the following code. Notice there are spaces needed for indentation for ease of reading.

  <table   border="0px" 
            cellspacing="0px"
            style="text-align       : center;
                   empty-cells      : hide;"
   >

      <colgroup>
         <col width="80px" />
         <col width="24px" />
         <col width="24px" />
         <col width="24px" />
         <col width="24px" />
         <col width="24px" />
         <col width="24px" />
         <col width="24px" />        
         <col width="700px" />   

      </colgroup>

<tr>
   <td></td>
   <td colspan="6"><strong>segments</strong></td>
</tr>

<tr>
<td><strong>steps</strong></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>

<tr>
<td>1</td>
<td class="greenA">A</td>
<td class="greenA">A</td>
<td class="greenA">A</td>
<td class="greenA">A</td>
<td class="greenA">A</td>
<td class="greenA">A</td>
<td></td>
<td class="explanation">all segments are displayed in the darkest green [A]</td>
</tr><tr><td class="space"></td></tr>

<tr>
<td>2</td>
<td class="greenD">D</td>
<td class="greenA">A</td>
<td class="greenA">A</td>
<td class="greenA">A</td>
<td class="greenA">A</td>
<td class="greenA">A</td>
<td></td>
<td class="explanation">S1 is lit in the brightest green [D] ; others segments don't change</td>
</tr><tr><td class="space"></td></tr>

<tr>
<td>3</td>
<td class="greenC">C</td>
<td class="greenD">D</td>
<td class="greenA">A</td>
<td class="greenA">A</td>
<td class="greenA">A</td>
<td class="greenA">A</td>
<td></td>
<td class="explanation">S2 is lit in [D], S1 is lit in [C] ; others segments don't change</td>
</tr><tr><td class="space"></td></tr>

<tr>
<td>4</td>
<td class="greenB">B</td>
<td class="greenC">C</td>
<td class="greenD">D</td>
<td class="greenA">A</td>
<td class="greenA">A</td>
<td class="greenA">A</td>
<td></td>
<td class="explanation">S3 is lit in [D], S2 is lit in [C], S1 is lit in [B] ; others segments don't change</td>
</tr><tr><td class="space"></td></tr>

<tr>
<td>5</td>
<td class="greenA">A</td>
<td class="greenB">B</td>
<td class="greenC">C</td>
<td class="greenD">D</td>
<td class="greenA">A</td>
<td class="greenA">A</td>
<td></td>
<td class="explanation">S4 is lit in [D], S3 is lit in [C], S2 is lit in [B], S1 is lit in [A] ; others segments don't change</td>
</tr><tr><td class="space"></td></tr>

<tr>
<td>6</td>
<td class="greenA">A</td>
<td class="greenA">A</td>
<td class="greenB">B</td>
<td class="greenC">C</td>
<td class="greenD">D</td>
<td class="greenA">A</td>
<td></td>
<td class="explanation">...</td>
</tr><tr><td class="space"></td></tr>

<tr>
<td>7</td>
<td class="greenA">A</td>
<td class="greenA">A</td>
<td class="greenA">A</td>
<td class="greenB">B</td>
<td class="greenC">C</td>
<td class="greenD">D</td>
<td></td>
<td class="explanation">and so on</td>
</tr><tr><td class="space"></td></tr>

<tr>
<td>8</td>
<td class="greenA">A</td>
<td class="greenA">A</td>
<td class="greenA">A</td>
<td class="greenA">A</td>
<td class="greenB">B</td>
<td class="greenC">C</td>
<td></td>
<td class="explanation">...</td>
</tr><tr><td class="space"></td></tr>

<tr>
<td>9</td>
<td class="greenA">A</td>
<td class="greenA">A</td>
<td class="greenA">A</td>
<td class="greenA">A</td>
<td class="greenA">A</td>
<td class="greenB">B</td>
<td></td>
<td class="explanation">step 9 (the last one) : S6 is lit in [B] and all others are lit in [A]</td>
</tr>
</table>

Now let's see result in demo page. Markdown is better and faster. Capture d’écran 2019-04-25 à 23 28 51

DominiqueVial commented 5 years ago

Here is a better indentation of this HTML code:

  <table border="0px" 
         cellspacing="0px"
         style="text-align : center;empty-cells : hide;"
  >

    <colgroup>
       <col width="80px" />
       <col width="24px" />
       <col width="24px" />
       <col width="24px" />
       <col width="24px" />
       <col width="24px" />
       <col width="24px" />
       <col width="24px" />        
       <col width="700px" />    
    </colgroup>

    <tr>
       <td></td>
       <td colspan="6"><strong>segments</strong></td>
    </tr>

    <tr>
      <td><strong>steps</strong></td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>

    <tr>
      <td>1</td>
      <td class="greenA">A</td>
      <td class="greenA">A</td>
      <td class="greenA">A</td>
      <td class="greenA">A</td>
      <td class="greenA">A</td>
      <td class="greenA">A</td>
      <td></td>
      <td class="explanation">all segments are displayed in the darkest green [A]</td>
    </tr>
    <tr><td class="space"></td></tr>

    <tr>
      <td>2</td>
      <td class="greenD">D</td>
      <td class="greenA">A</td>
      <td class="greenA">A</td>
      <td class="greenA">A</td>
      <td class="greenA">A</td>
      <td class="greenA">A</td>
      <td></td>
      <td class="explanation">S1 is lit in the brightest green [D] ; others segments don't change</td>
    </tr>
    <tr><td class="space"></td></tr>

    <tr>
      <td>3</td>
        <td class="greenC">C</td>
        <td class="greenD">D</td>
        <td class="greenA">A</td>
        <td class="greenA">A</td>
        <td class="greenA">A</td>
        <td class="greenA">A</td>
        <td></td>
      <td class="explanation">S2 is lit in [D], S1 is lit in [C] ; others segments don't change</td>
    </tr>
    <tr><td class="space"></td></tr>

    <tr>
      <td>4</td>
      <td class="greenB">B</td>
      <td class="greenC">C</td>
      <td class="greenD">D</td>
      <td class="greenA">A</td>
      <td class="greenA">A</td>
      <td class="greenA">A</td>
      <td></td>
      <td class="explanation">S3 is lit in [D], S2 is lit in [C], S1 is lit in [B] ; others segments don't change</td>
    </tr>
    <tr><td class="space"></td></tr>

    <tr>
      <td>5</td>
      <td class="greenA">A</td>
      <td class="greenB">B</td>
      <td class="greenC">C</td>
      <td class="greenD">D</td>
      <td class="greenA">A</td>
      <td class="greenA">A</td>
      <td></td>
      <td class="explanation">S4 is lit in [D], S3 is lit in [C], S2 is lit in [B], S1 is lit in [A] ; others segments don't change</td>
    </tr>
    <tr><td class="space"></td></tr>

    <tr>
      <td>6</td>
      <td class="greenA">A</td>
      <td class="greenA">A</td>
      <td class="greenB">B</td>
      <td class="greenC">C</td>
      <td class="greenD">D</td>
      <td class="greenA">A</td>
      <td></td>
      <td class="explanation">...</td>
    </tr>
    <tr><td class="space"></td></tr>

    <tr>
      <td>7</td>
      <td class="greenA">A</td>
      <td class="greenA">A</td>
      <td class="greenA">A</td>
      <td class="greenB">B</td>
      <td class="greenC">C</td>
      <td class="greenD">D</td>
      <td></td>
      <td class="explanation">and so on</td>
    </tr>
    <tr><td class="space"></td></tr>

    <tr>
      <td>8</td>
      <td class="greenA">A</td>
      <td class="greenA">A</td>
      <td class="greenA">A</td>
      <td class="greenA">A</td>
      <td class="greenB">B</td>
      <td class="greenC">C</td>
      <td></td>
      <td class="explanation">...</td>
    </tr>
    <tr><td class="space"></td></tr>

    <tr>
      <td>9</td>
      <td class="greenA">A</td>
      <td class="greenA">A</td>
      <td class="greenA">A</td>
      <td class="greenA">A</td>
      <td class="greenA">A</td>
      <td class="greenB">B</td>
      <td></td>
      <td class="explanation">step 9 (the last one) : S6 is lit in [B] and all others are lit in [A]</td>
    </tr>
</table>
pxlh007 commented 5 years ago

Perhaps it's the HTML format！Try this!

segments
steps 1 2 3 4 5 6
1 A A A A A A all segments are displayed in the darkest green [A]
2 D A A A A A S1 is lit in the brightest green [D] ; others segments don't change
3 C D A A A A S2 is lit in [D], S1 is lit in [C] ; others segments don't change
4 B C D A A A S3 is lit in [D], S2 is lit in [C], S1 is lit in [B] ; others segments don't change
5 A B C D A A S4 is lit in [D], S3 is lit in [C], S2 is lit in [B], S1 is lit in [A] ; others segments don't change
6 A A B C D A ...
7 A A A B C D and so on
8 A A A A B C ...
9 A A A A A B step 9 (the last one) : S6 is lit in [B] and all others are lit in [A]
DominiqueVial commented 5 years ago

@pxlh007 I don't notice any visual difference but a break line on your code between the last col tag and the colgroup ending tag. Is that the change?