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 |
- 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.
$ 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).
The basics:
- Fencing: Wrap your tables with the
table
fence. - Column Spacing: Simply use 2+ spaces to separate columns.
- Headers: Underline the first row to mark it as a header.
- Inline Markdown: Feel free to use inline markdown for emphasis, code, and more.
In more detail:
Wrap your tables with the table
fence. This can be done using either backticks or tildes.
```table
```
or
~~~table
~~~
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
```
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
- - - - -
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](#)
```
Big shout-out to the following projects that made markdown-it-easy-tables
possible:
- markdown-it — Markdown parser, done right.
- markdown-it-testgen
- markdown-it-textual-uml
You might also want to check out these similar projects:
This project is MIT licensed.