Jekyll, modify the way some html tags are rendered

问题

I would like to modify the way some html tags are rendered on jekyll. What I need is to add some css classes automatically (in this case the ".table" class to the table html tag).

I'm using the redcarpet markdown processor. I suppose I need to write a plugin that extends the renderer but I can't find any good example...

I came up with this but it's just a copy/paste job and it doesn't work...

require 'redcarpet'

class BootstrapTables < Redcarpet::Render::HTML
  def table(header, body)
    "\n<table class='table'><thead>\n#{ header }</thead><tbody>\n#{ body }</tbody></table>\n"
  end
end

Someone can help?

回答1:

I've tested that you can give a class to a markdown element with kramdown

{:.foo}
| First Header  | Second Header |
| ------------- | ------------- |
| Content Cell  | Content Cell  |
| Content Cell  | Content Cell  |

Your table has the class foo

NB : this answer was given one month ago on SO

回答2:

I found the way and corrected the code, I need a properly configured custom renderer. Using RedcarpetExt as markdown variable in the _config.yaml will activate it.

# Create a custom renderer that extend Redcarpet to customize its behavior.
require 'jekyll'
require 'redcarpet'

class RedcarpetExtender < Redcarpet::Render::HTML
  # Extend the table to be compatible with the Bootstrap css.
  def table(header, body)
    "\n<table class='table-bordered table-hover'><thead>\n#{ header }</thead><tbody>\n#{ body }</tbody></table>\n"
  end
end

class Jekyll::Converters::Markdown::RedcarpetExt
  def initialize(config)
    @site_config = config
  end

  def extensions
    Hash[ *@site_config['redcarpet']['extensions'].map {|e| [e.to_sym, true]}.flatten ]
  end

  def markdown
    @markdown ||= Redcarpet::Markdown.new(RedcarpetExtender, extensions)
  end

  def convert(content)
    return super unless @site_config['markdown'] == 'RedcarpetExt'
    markdown.render(content)
  end
end