Laurel Keck

Tables in Jekyll

Jekyll has the ability to process and display data from YAML, JSON, CSV, and TSV file types. I’ve spent the last couple of days messing around with options within a CSV to see what works and what doesn’t formatting-wise.

  1. Table Using Markdown
  2. CSV Using Markddown
  3. CSV Using HTML
  4. Conclusion

Table Using Markdown

Markdown

| Type     | Result                         |
| ---      | ---                            |
| base     | Plain text.                    |
| bold     | I would like a **big** coffee. |
| emphasis | I would like a *big* coffee.   |
| link     | Check out the [official docs](https://jekyllrb.com/docs/datafiles/) for more info on using data files with Jekyll. |

Displays As

Type Result
base Plain text.
bold I would like a big coffee.
emphasis I would like a big coffee.
link Check out the official docs for more info on using data files with Jekyll.

CSV Using Markdown

This one didn’t go so well. The rows and columns are correct, but it’s just showing the markdown syntax instead of converting it to HTML. Either there’s trick with syntax to include markdown in the CSV, or it’s just not possible currently.

CSV Text

Type,Result
base,"Plain text."
bold,"I would like a **big** coffee."
emphasis,"I would like a *big* coffee."
link,"Check out the [official docs](https://jekyllrb.com/docs/datafiles/) for more info on using data files with Jekyll."

Displays As

Type Result
base Plain text.
bold I would like a **big** coffee.
emphasis I would like a *big* coffee.
link Check out the [official docs](https://jekyllrb.com/docs/datafiles/) for more info on using data files with Jekyll.

CSV Using HTML

This option worked really well. The text shows up correctly and the link works. I did figure out by opening the file both in Atom and LibreOffice that the quotation marks around the url need to be doubled in order to render correctly.

CSV Text

Type,Result
base,"Plain text."
bold,"I would like a <strong>big</strong> coffee."
emphasis,"I would like a <em>big</em> coffee."
link,"Check out the <a href=""https://jekyllrb.com/docs/	datafiles/"">official docs</a> for more info on using data files with Jekyll."

Displays As

Type Result
base Plain text.
bold I would like a big coffee.
emphasis I would like a big coffee.
link Check out the official docs for more info on using data files with Jekyll.

Conclusion

All three options are readable, and both the Markdown table and the CSV with HTML in it look very similar, though the row colors are for some reason inverted on the tables made from the CSVs. After viewing the rendered source, the deciding factor for me was what the actual HTML looked like. The Markdown table had a very clean, tidy structure whereas the HTML from the CSV was much more spread out and labeled with extra classes that I don’t need in this instance. There might also be a way to change the way the HTML from the CSV looks, but I’m satisfied for the moment that for the purposes of my website log anyway, the Markdown table works just fine.

It seems I went on a journey that took me to the exact place I started. I did learn something from this exploration, and I hope you did too.