Skip to content

tw-studio/markdown-it-easy-tables

Repository files navigation

markdown-it-easy-tables

build status npm version npm downloads MIT license

Welcome to markdown-it-easy-tables! 🎉

This markdown-it plugin makes tables in Markdown both easy to write and easy to read.


Convert Markdown like this...

```table
Rank    City           Country         Population (millions)   Attractions
-       -              -------         -:                      ---------------------
1       Paris          France          2.2                     Eiffel Tower, Louvre Museum
2       Tokyo          Japan           14.0                    Tokyo Tower, Shibuya Crossing
3       Rome           Italy           2.9                     Colosseum, Vatican City
4       Sydney         Australia       5.4                     Sydney Opera House, Bondi Beach
5       New York City  United States   8.4                     Statue of Liberty, Times Square
```

... into HTML like this🪄

Rank City Country Population (millions) Attractions
1 Paris France 2.2 Eiffel Tower, Louvre Museum
2 Tokyo Japan 14.0 Tokyo Tower, Shibuya Crossing
3 Rome Italy 2.9 Colosseum, Vatican City
4 Sydney Australia 5.4 Sydney Opera House, Bondi Beach
5 New York City United States 5.4 Statue of Liberty, Times Square

Table of Contents


🎁 Advantages

  • Intuitive. Write tables easily with a simple and intuitive syntax.
  • Readable. Create visually appealing and easy-to-read tables.
  • Headers. Header rows are optional and easy to configure.
  • Align Columns. Adjust column alignments for neat and organized tables.
  • Supports Inline Markdown. Support for most inline markdown like emphasis, code, or links
  • Works with Markdown Extensions. Integrate with Markdown extensions in your code editor.

💿 Installation

$ pnpm add markdown-it-easy-tables

Use it as a markdown-it plugin in your JavaScript:

var md = require('markdown-it')()
            .use(require('markdown-it-easy-tables'))

Or use it with many Markdown extensions (many use markdown-it under the hood) in your favorite code editor (like VSCode).


📝 Usage Rules

The basics:

  1. Fencing: Wrap your tables with the table fence.
  2. Column Spacing: Simply use 2+ spaces to separate columns.
  3. Headers: Underline the first row to mark it as a header.
  4. Inline Markdown: Feel free to use inline markdown for emphasis, code, and more.

In more detail:

1. Fencing

Wrap your tables with the table fence. This can be done using either backticks or tildes.

```table
```

or

~~~table
~~~

2. Column Spacing

Separate each column with 2+ spaces for easy readability. The first row dictates the column boundaries for the whole table.

```table
Column1    Column2    Column3
Data1      Data2      Data3
```

3. Headers

Mark the first row as a header by underlining it in the second row. You can use dashes -, colons :, or a combination of both to denote alignment. Check out these examples for guidance:

Default   Alignment   With   Dashes
-------   ---------   ----   ------

Right   Align   Columns
----:   -:      ---------:

Center  Align   Columns
:----:  :-:     :

Left  Align   Columns
:---  :-      :--------

Minimum   Underline   Length  Is  1
-         -           -       -   -

4. Inline Markdown

Your tables can still have all the perks of Markdown. Feel free to use inline markdown for your data.

```table
**Bold Text**   *Italic Text*
`Code Snippet`  [Link Text](#)
```

🙌 Acknowledgements

Big shout-out to the following projects that made markdown-it-easy-tables possible:


👥 Related Projects

You might also want to check out these similar projects:


📜 License

This project is MIT licensed.