Stripped callouts (Markdown counterpart to HTML <details> tag)

Share & showcase
1

I wanted to use the foldable details tag without using HTML, so I stripped down Obsidian’s callout feature to imitate details in Markdown. Where the HTML looks like this:

<details>
	<summary>"Callout" title</summary>
	<p>Collapsible content</p>
</details>

A preview gif of the HTML code.

(The horizontal rule separated my HTML and Markdown; it isn’t part of the code. Ignore my cursor…)

The stripped callout Markdown looks like this:

> [!ds]- "Callout" title
> Collapsible content

A preview gif of the Markdown code.

Like its HTML counterpart, the title/“summary” can be clicked, not just the indicator. And, like with native callouts, the - can be replaced by + to have the content expanded by default; the - and + aren’t necessary for this to work, but you’ll be left with normal text otherwise :stuck_out_tongue:

CSS

The CSS for stripped callouts/Markdown details is below. (I used ds as shorthand for details/summary.)

.callout[data-callout="ds"] {
    --callout-padding: none;
    --callout-title-padding: 0;
    --callout-margin: 0;
    background-color: transparent;

    .callout-icon {display: none}

    .callout-title {cursor:text !important}
    .callout-title-inner {font-weight: normal}

    .callout-fold { /*Dynamically moves the fold indicator to the left margin*/
        display: inline-flex;
        position: absolute;
        margin-inline-start: -22px;
        padding: 0 6px;
        color: var(--text-faint);
        z-index: 1; /*Limits the pointer cursor to the collapse indicator*/
        cursor: pointer;
    }

    .callout-content {
        padding: 0; /*Moves the text flush to the left; remove if you prefer the content indented (or use the value "0 Xpx" to prevent excessive top and bottom spacing)*/
        background: none;
        p {margin-bottom: 0;} /*Removes the excessive spacing when expanded*/
    }
}

Primary Theme adjustments

I use Primary Theme, which adds box shadows to callouts. Adding the following to the CSS will remove all shadows:

    box-shadow: none;
    .callout-title, .callout-content {box-shadow: none}

Also, .callout-title-inner {font-weight: normal} makes the title text look slightly thinner on mobile. Setting the value to 450 seems to reconcile mobile and desktop font weights.

Cheers!

1 Like