search

redbug312 / markdown-it-multimd-table

Multimarkdown table syntax plugin for markdown-it markdown parser
MIT License
146 stars 37 forks source link

Table Within <li> #49

Closed kevinjwz closed 2 years ago

kevinjwz commented 2 years ago

I'd like a table within <li> to get consistent indentation.

Markdown source:

- XXXXXXXX

  |abc|abc|
  |---|---|
  |abc|abc|

Without multimd-table:

<ul>
  <li>
  <p>XXXXXXXX</p>
  <table>
    <thead>
      <tr><th>abc</th><th>abc</th></tr>
    </thead>
    <tbody>
      <tr><td>abc</td><td>abc</td></tr>
    </tbody>
  </table>
  </li>
</ul>

With multimd-table:

<ul>
  <li>
    <p>XXXXXXXX</p>
    <p>|abc|abc|<br>
    |---|---|<br>
    |abc|abc|</p>
  </li>
</ul>

My configuration:

markdownit({ html: true, breaks: true })    // version 12.3.2
    .use(markdownitFurigana, {fallbackParens: '{}'})    // version 1.0.3 https://github.com/GerHobbelt/furigana-markdown-it
    .use(markdownitMultimdTable, { rowspan: true, headerless: true })    // version 4.1.3
    .use(markdownitMark)    // version 3.0.1
    .use(markdownItAttrs)    //  version 4.1.4 https://github.com/arve0/markdown-it-attrs
    .use(markdownitEmoji, { defs: { v: '✔️', x: '❌' } });    // version 2.0.0 light-version
kevinjwz commented 2 years ago

Strange enough, if the first <th> is empty, and remove indentations in source, things seem to work:

- XXXXXXXX

    |abc|
|---|---|
|abc|abc|

With multimd-table:

<ul>
  <li>
  <p>XXXXXXXX</p>
  <table>
    <thead>
      <tr><th></th><th>abc</th></tr>
    </thead>
    <tbody>
      <tr><td>abc</td><td>abc</td></tr>
    </tbody>
  </table>
  </li>
</ul>
kevinjwz commented 2 years ago

So the key might be "no beginning | at all":

- XXXXXXXX

  abc|abc|
  ---|---|
  abc|abc|

or "keep the seperator line unindented":

- XXXXXXXX

  abc|abc|
|---|---|
  abc|abc|

Both give the right result.

redbug312 commented 2 years ago

I cannot reproduce the failed case in your first comment. Below is the script:

var md = require('markdown-it')({ html: true, breaks: true })
                .use(require('furigana-markdown-it'), { fallbackParens: '{}' })
                .use(require('markdown-it-multimd-table'), { rowspan: true, headerless: true })
                .use(require('markdown-it-mark'))
                .use(require('markdown-it-attrs'))
                .use(require('markdown-it-emoji'), { defs: { v: '✔️', x: '❌' } });

const exampleTable =
"- XXXXXXXX\n" +
"\n" +
"  |abc|abc|\n" +
"  |---|---|\n" +
"  |abc|abc|\n";

console.log(md.render(exampleTable));

It gives out an expected result, a nested table. Is there something missed in the script?

kevinjwz commented 2 years ago

I use markdown-it on browser. Below is the minimalized test page:

<!DOCTYPE html>
<html>
<head></head>
<body>
    <script src="./markdown-it.min.js"></script>
    <script src="./markdown-it-multimd-table.min.js"></script>
    <script>
        let md = markdownit().use(markdownitMultimdTable);
        const exampleTable =
            "- XXXXXXXX\n" +
            "\n" +
            "  |abc|abc|\n" +
            "  |---|---|\n" +
            "  |abc|abc|\n";

        console.log(md.render(exampleTable));
    </script>
</body>
</html>

reproduced on: Edge 103.0.1264.62 Firefox 103.0

redbug312 commented 2 years ago

I had the minifier misfigured, where the plugin exported the collided name markdownit. Please checkout markdown-it-multimd-table.min.js from fix-minify branch to see if it gives the expected result.