Jekyll \ kramdown - 添加 `.table` class 到生成的 tables

Question

杰基尔 3.2.1 + kramdown。我有一个使用 bootstrap css 的主题。生成的 <table> 应根据 bootstrap css 的要求用 class="table" 修饰。

我看到其他建议将 {: class=table} 或 {.table} 添加到降价 table 但我真的不喜欢这个解决方案，因为它 'pollutes' 纯降价 html\css 细节。我希望我的 markdown 可以按原样阅读并且与目标格式无关。

首选解决方案是自定义 Jekyll 或 kramdown，这样 markdown tables 将使用此 class 自动生成。这可能吗？

Answer 1

当然，您可以使用 kramdown api 创建自定义解析器。

但是，这可能会让人头疼，而且它不适用于 GitHub 页。

您还可以编写 JavaScript，将 class 添加到表格中。由于您使用的是 Bootstrap（因此是 JQuery），您应该可以这样做：

$("table").addClass("table");

Answer 2

如果所有表格都将具有 class，则将样式应用于 table 标记可能会更容易。这样你就可以避免污染你的 Markdown 和标记。为避免分叉或修改 Bootstrap，您甚至可以 table 使用 Sass:

扩展这些样式

table {
  @extend .table;
}

Answer 3

您可以向 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

然后，当你想渲染 markdown 时，使用那个输出转换器：

Kramdown::Document.new(output).to_html_bootstrap4

你需要把它放在 jekyll 进行转换的地方（我想注册一个新的转换器 class）。

Jekyll \ kramdown - 添加 `.table` class 到生成的 tables

Jekyll \ kramdown - add `.table` class to generated tables

markdown

jekyll

kramdown