5

Jekyll 3.2.1 + kramdown. I have a theme that uses bootstrap css. Generated <table>s should be decorated with class="table" as bootstrap css requires.

I have seen other suggestions to add {: class=table} or {.table} to the markdown table but I really dislike this solution as it 'pollutes' the pure markdown with html\css details. I want my markdown to be readable as is and agnostic to the target format.

Preferred solution would be to customize Jekyll or kramdown such that markdown tables will be generated with this class automatically. Is this possible?

itaysk
  • 5,852
  • 2
  • 33
  • 40

3 Answers3

9

It's probably easier to apply the styles to the table tag if all tables are going to have that class. This way you avoid polluting both your Markdown and markup. To avoid forking or modifying Bootstrap you could even have table extend those styles with Sass:

table {
  @extend .table;
}
Ross
  • 2,701
  • 16
  • 25
  • 1
    Thanks. I used this guide to include bootstrap's source in Jekyll, then extended the table class as you suggested. http://veithen.github.io/2015/03/26/jekyll-bootstrap.html – itaysk Sep 30 '16 at 10:07
4

Sure, you can use the kramdown api to create a custom parser.

However, this might be a bit of a pain in the neck, and it won't work with GitHub pages.

You could also write JavaScript that adds the class to the tables. Since you're using Bootstrap (and therefore JQuery), you should be able to do something like this:

$("table").addClass("table");
Kevin Workman
  • 41,537
  • 9
  • 68
  • 107
1

You can add a new output converter to Kramdown:

module Kramdown
  # Add some bootstrap4 specific defaults to markdown output
  class Converter::HtmlBootstrap4 < Converter::Html
    def convert_table(el, indent)
      el.attr["class"] ||= 'table'
      super
    end
  end
end

Then, when you want to render the markdown, use that output converter:

Kramdown::Document.new(output).to_html_bootstrap4

You'd need to put that in wherever jekyll does the conversion (I think registering a new converter class).

danshep
  • 21
  • 2