I recently stumbled upon HTML5’s
details element and wanted to use it in
Jekyll. Here’s how I did it.
I mostly write in Markdown, so I could just write plain HTML:
However, there are two reasons not to use
details like this:
detailselement is not supported by every browser, so we need some kind of a fallback.
- The text in
summaryis not processed by Jekyll’s markup converter, so the text would be rendered as is, i.e. “Read more about that **thing**”, which is not what we want.
To address the first point, we can use a polyfill. I chose jquery-details, which, as the name suggests, depends on jQuery. Since I didn’t use jQuery until then, I decided to give Zepto a try, which is basically a lightweight jQuery.
I included Zepto and jquery-details in the footer of my page like this:
The above lets jquery-details run over every
details element it finds
and polyfills support for it, if necessary.
The second point can be addressed by adding a custom plugin. Jekyll uses
Liquid as templating engine. In Liquid
you can define custom tags and even
We can create a custom tag block to mimic the semantics of the
element and use it like this:
To create the new tag block, you just put the following tag block implementation in a .rb-file in Jekyll’s plugin folder:
Jekyll will automatically recognize the plugin and it is ready to use.
I added some custom SCSS to make the result appear good in different browsers. The basic functionality works without, but the styling doesn’t really suggest what’s going on.
Coming full circle, now when we write this:
This is what Jekyll (and your browser) renders:
Read more about that thing…
That thing is…