Skip to content

Instantly share code, notes, and snippets.

@towbi
Last active March 6, 2022 17:17
Show Gist options
  • Save towbi/a67fda47e075d2b7fa4764bb42605063 to your computer and use it in GitHub Desktop.
Save towbi/a67fda47e075d2b7fa4764bb42605063 to your computer and use it in GitHub Desktop.
Jekyll plugin for a tag block mimicking the behaviour of the HTML5 "details" element
# _plugins/details_tag.rb
module Jekyll
module Tags
class DetailsTag < Liquid::Block
def initialize(tag_name, markup, tokens)
super
@caption = markup
end
def render(context)
site = context.registers[:site]
converter = site.find_converter_instance(::Jekyll::Converters::Markdown)
# below Jekyll 3.x use this:
# converter = site.getConverterImpl(::Jekyll::Converters::Markdown)
caption = converter.convert(@caption).gsub(/<\/?p[^>]*>/, '').chomp
body = converter.convert(super(context))
"<details><summary>#{caption}</summary>#{body}</details>"
end
end
end
end
Liquid::Template.register_tag('details', Jekyll::Tags::DetailsTag)
@towbi
Copy link
Author

towbi commented Aug 19, 2017

Updated Gist for Jekyll 3.x and incorporated @willymcallister's suggestion

@karmanyaahm
Copy link

@towbi thanks for making this and the blog post. However, when I put a list inside this details tag, which is also inside a list, it has indentation issues. I fixed this by changing the body= line to

body = converter.convert(super(context)).gsub("\n", "").chomp

This works for my use case, however it might cause problems with pre tags, which I haven't run into personally yet.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment