markdown-it-complex-table

Markdown syntax is designed to be readable and writeable, but Markdown table is not. Because common text editor don't have concept of column and isn't always monospace fonts.

The best way to express column in common text editor is YAML. This plugin provides a simple way to write complex html.

Install

npm install markdown-it-complex-table

Usage

import md from "markdown-it"
import complexTable from "markdown-it-complex-table"

const mdString = `
\`\`\`yaml:table
- 
  - !td
  - Mars
  - !cs 
  - Venus
  - !cs 
- 
  - !rs
  - &h1 Produced
  - &h2 Sold
  - *h1
  - *h2
---
- 
  - !th Teddy Bears
  - 50,000
  - 30,000
  - 100,000
  - 80,000
- 
  - !th Board Games
  - 10,000
  - 5,000
  - 12,000
  - 9,000
\`\`\`
` // from https://www.w3.org/WAI/tutorials/tables/irregular/

const htmlString = md().use(complexTable).parse(mdString) // "<table>...</table>"

htmlString is the following.

<table>
    <col>
    <colgroup span="2"></colgroup>
    <colgroup span="2"></colgroup>
    <thead>
        <tr>
          <td rowspan="2"></td>
          <th colspan="2" scope="colgroup">Mars</th>
          <th colspan="2" scope="colgroup">Venus</th>
        </tr>
        <tr>
            <th scope="col">Produced</th>
            <th scope="col">Sold</th>
            <th scope="col">Produced</th>
            <th scope="col">Sold</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Teddy Bears</th>
            <td>50,000</td>
            <td>30,000</td>
            <td>100,000</td>
            <td>80,000</td>
        </tr>
        <tr>
            <th scope="row">Board Games</th>
            <td>10,000</td>
            <td>5,000</td>
            <td>12,000</td>
            <td>9,000</td>
        </tr>
    </tbody>
</table>

Rules

please see here.

Examples

You can use Markdown sytnax in table.

import md from "markdown-it"
import complexTable from "markdown-it-complex-table"
import hljs from "highlight.js"

const mdString = `
\`\`\`yaml:table
[Emphasis, Lists, Code Blocks]
---
- "**bold**"
- |
  - first
  - second
- |
  ~~~python
  import os
  print(f'Hello, {os.getlogin()}')
  ~~~
\`\`\`
`

const htmlString = md({
  highlight: (code, info) => {
    if (info && hljs.getLanguage(info)) {
      return hljs.highlight(code, { language: info }).value
    }
    return ""
  },
}).use(complexTable).render(mdString)

htmlString is the following.

<table>
    <thead>
        <tr>
            <th scope="col">Emphasis</th>
            <th scope="col">Lists</th>
            <th scope="col">Code Blocks</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><strong>bold</strong></td>
            <td>
                <ul>
                    <li>first</li>
                    <li>second</li>
                </ul>
            </td>
            <td>
                <pre><code class="language-python"><span class="hljs-keyword">import</span> os
<span class="hljs-built_in">print</span>(<span class="hljs-string">f'Hello, <span class="hljs-subst">{os.getlogin()}</span>'</span>)
</code></pre>
            </td>
        </tr>
    </tbody>
</table>