Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Markdown table rendered as heading if text follows before it and horizontal rule after it #3610

Closed
Jeecis opened this issue Feb 7, 2025 · 1 comment · Fixed by #3612
Closed
Labels
category: headings category: tables L2 - annoying Similar to L1 - broken but there is a known workaround available for the issue

Comments

@Jeecis
Copy link

Jeecis commented Feb 7, 2025

Marked version:
15.06

Describe the bug
Markdown tables are not rendered correctly when there is text immediately preceding the table definition and horizontal rule. Everything is misinterpreted as heading, leading to incorrect formatting.

Found it using Marked npm library in vue js running the following line:
markdown.value = await marked(inputValue);

To Reproduce
Steps to reproduce the behavior:

  1. Add some text (e.g., "Some text not supposed to be a heading:")
  2. Immediately after the text, define a markdown table using pipes and hyphens.
  3. Insert horizontal rule after the table using 3 hyphens
  4. Observe that the table is not rendered as expected.

P.S. A quick fix can be done by adding a new line after the first text line, but considering a use case where one may need to parse many markdown files, its very inefficient.

Example:
Input:

## Incorrect behavior:

Some text not supposed to be a heading:
| Column 1      | Column 2      |
| ------------- | ------------- |
| Cell 1, Row 1 | Cell 2, Row 1 |
| Cell 1, Row 2 | Cell 1, Row 2 |
---

Output:

<h2>Incorrect behaviour</h2>
<h2>Some text not supposed to be a heading:
| Column 1      | Column 2      |
| ------------- | ------------- |
| Cell 1, Row 1 | Cell 2, Row 1 |
| Cell 1, Row 2 | Cell 1, Row 2 |</h2>

Demo:

  1. Marked Demo
  2. CommonMark doesn't support tables so I can't provide demo there

Expected behavior
From following markdown table parsed as table, text as p tag and horizontal rule as hr tag. This can be tested in this website, sorry I couldn't permalink it here - https://www.devloom.net/previewers/MARKDOWNPreviewer
Input:

## Correct behavior:

Some text not supposed to be a heading:
| Column 1      | Column 2      |
| ------------- | ------------- |
| Cell 1, Row 1 | Cell 2, Row 1 |
| Cell 1, Row 2 | Cell 1, Row 2 |
---

Correct output:

<h2>Correct behavior:</h2>
<p>Some text not supposed to be a heading:</p>
<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 1, Row 1</td>
      <td>Cell 2, Row 1</td>
    </tr>
    <tr>
      <td>Cell 1, Row 2</td>
      <td>Cell 1, Row 2</td>
    </tr>
  </tbody>
</table>
<hr />
@UziTech UziTech added L2 - annoying Similar to L1 - broken but there is a known workaround available for the issue category: headings category: tables labels Feb 7, 2025
@UziTech
Copy link
Member

UziTech commented Feb 7, 2025

Looks like this is one of those situations where GitHub doesn't follow it's own GFM spec

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
category: headings category: tables L2 - annoying Similar to L1 - broken but there is a known workaround available for the issue
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants