Details tag template

Here’s a template for inserting an html \<details\> tag into markdown. It allows markdown syntax inside the summary and the body of a \<details\> tag. This works with Jekyll’s Kramdown dialect of markdown, served by GitHub Pages.

SUMMARY

DETAILS

---

Contents

• Markdown template
• Include file
• Details style
• Examples
  • Markdown syntax, equations, and images inside details tag
  • Nested details tags
• Tooltip

---

Markdown template

Copy and paste these four lines into your markdown document.

{% capture details %}
DETAILS
{% endcapture %}
{% capture summary %}SUMMARY{% endcapture %}{% include details.html %}

Replace DETAILS and SUMMARY with your content.

Include file

The last line of the template references a file: _includes/details.html. Create a file with this code and put it in your _includes folder.

<details>
    <summary>{{ summary | markdownify | remove: '<p>' | remove: '</p>' }}</summary>
    {{ details | markdownify }}
</details>

Details style

Example css styles for the details tag, saved in /assets/main.scss.

//
// <details> tag
//
$grey-color:         #757575;
$grey-color-darkish: darken($grey-color, 15%);
$brand-color:        #2a7ae2;
$details-background-color: #dbdbdb;

details {
    border-radius: 10px;
    padding: 0px 8px;
    margin-bottom: 15px;
}
details[open] {
    background: $details-background-color;
    padding: 0px 8px 8px 8px;
}
summary {
    margin: 0px 0px 8px 0px;
    outline:none;
}
details summary {
    color: $brand-color;
}

Examples

Markdown syntax, equations, and images inside details tag

show the answer

$\text R_\text T = \text R_\text N = 500\,\Omega$

$\text V_{\text T} = \text V_{\text T} \, \text R_{\text N} = 0.002 \cdot 500 = 1\,\text V$

Nested details tags

Outer details tag

This is information in the outer details tag.

Inner details tag

And even more inside an inner details tag.

The markdown source file for this article is in _articles/details.md.

Tooltip

Leading text — tool tip anchor — trailing text.

At this point it is possible to express $r$ in terms of $x$ ,

LEADING TEXT ANCHOR TEXT TRAILING TEXT

And we move on.