Pradeep Sadanapalli

technology musings and thoughts I want to remember

Table Styling in Octopress

| Comments

It is only around two weeks since I setup my blog using Octopress/Jekyll framework and I am still in learning mode to get better with using Markdown syntax.

Octopress has very minimal table styling by default. I struggled a bit to build tables in a post. Searched in Octopress documentation, but did not find any info there. My google search for “markdown+table+syntax” led me to John Gruber’s Markdown Page, where I learnt that HTML block-level tags can be used for any markup that is not covered by Markdown’s syntax.

For example, to add an HTML table between two paragraphs in a post:

1
2
3
4
5
6
7
8
9
This is a regular paragraph.

<table>
    <tr>
        <td>Foo</td>
    </tr>
</table>

This is another regular paragraph.

But, that still did not work. I started searching further to understand it little more and quickly realized that there are many Markdown parsers, of which Maruku, RedCarpet, BlueCloth, RDiscount, Kramdown are some of the popular ones.

Briefly,

  • RDiscount is the default engine used in Octopress; It is implemented in C and is fast, but has limited feature set
  • Maruku is a Ruby implementation and has extra feature set than RDiscount; But it does not seem to be actively maintained
  • Kramdown is also a Ruby implementation and faster than Maruku; Kramdown supports extensions such as tables and footnotes
  • RedCarpet and BlueCloth seem to be actively maintained and popular ones too

At this time, I am not in favor of changing my markdown processor from RDiscount just for tables, without further reading and understanding of different markdown parsers. I will try to cover these in a separate post ilater after playing with them a bit further.

To come back to my search on how to use tables in a post, I then landed on this blog post which touched on the exact point I was looking for.

As mentioned, I added data-table.css to source/stylesheets/and inserted the below in source/_includes/head.html.

1
<link href="/stylesheets/data-table.css" media="screen, projection" rel="stylesheet" type="text/css" />

This addresses my need for now.

Comments