showdownjs / showdown

A bidirectional Markdown to HTML to Markdown converter written in Javascript
http://www.showdownjs.com/
MIT License
14.19k stars 1.56k forks source link

Dose < table> convert to markdown table needs <thead>and <tbody>? #933

Open Peter-JXL opened 2 years ago

Peter-JXL commented 2 years ago

Hi, I tried to convert html table to markdown table, but I can't get correct result:

<table border="1" id="tableWithOutHeadAndBody">
    <caption>table Without Head And Body</caption>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
  </table>
var converter = new showdown.Converter(})
result = converter.makeMarkdown(document.getElementById("tableWithOutHeadAndBody").outerHTML)
console.log(result)
and the result is:

I read the docs, add a option, it still not work var converter = new showdown.Converter({ tables: true }) [Available options - Showdown documentation](https://showdownjs.com/docs/available-options/#tables)

and then I search the issue, and find somebody add thead and tbody element [Bug] in table align right · Issue #689 · showdownjs/showdown

so I tried it ,it works:

<table border="1" id="tableWithHeadAndBody">
    <caption>table With Head And Body</caption>
    <thead>
      <tr>
        <th>Month</th>
        <th>Savings</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>January</td>
        <td>100</td>
      </tr>
      <tr>
        <td>February</td>
        <td>80</td>
      </tr>
    </tbody>
  </table>
result = converter.makeMarkdown(document.getElementById("tableWithHeadAndBody").outerHTML)
console.log(result)
result is : Month Savings
January 100
February 80

envirement: browser: chrome 103.0.5060.66 (64 bit) (cohort: Stable) showdown: 2.1.0 https://unpkg.com/showdown@2.1.0/dist/showdown.min.js

so, if i want to convert html table element to markdown table, the thead and the tbody element is needed? if so, may be add a explain on docs is helpful.... I tried a lot of time to read docs and serach....

anyway, thanks for the excellent work on showdown!

complete code : https://github.com/Peter-JXL/learnturndown/blob/master/src/testShowdown/testShowdown.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>Test showdown table convert</title>
</head>
<body>
  <table border="1" id="tableWithHeadAndBody">
    <caption>table With Head And Body</caption>
    <thead>
      <tr>
        <th>Month</th>
        <th>Savings</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>January</td>
        <td>100</td>
      </tr>
      <tr>
        <td>February</td>
        <td>80</td>
      </tr>
    </tbody>
  </table>
  <button id="btn" >click me to convert table to markdown and log</button>

  <hr>

  <table border="1" id="tableWithOutHeadAndBody">
    <caption>table Without Head And Body</caption>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
  </table>
  <button id="btn2" >click me to convert table to markdown and log</button>

  <script src="./showdown.min.js"></script>
  <script>
    var converter = new showdown.Converter({ tables: true })
    var result

    var btn = document.getElementById('btn')
    btn.addEventListener('click', function(){
      result = converter.makeMarkdown(document.getElementById("tableWithHeadAndBody").outerHTML)
      console.log(result)
    })

    var btn2 = document.getElementById('btn2')
    btn2.addEventListener('click', function(){
      result = converter.makeMarkdown(document.getElementById("tableWithOutHeadAndBody").outerHTML)
      console.log(result)
    })
  </script>

</body>
</html>