Skip to content

Support Quarto callouts: collapse to details, callout-* headings out of TOC - #63

Closed
RensDimmendaal wants to merge 1 commit into
mainfrom
callout-details
Closed

Support Quarto callouts: collapse to details, callout-* headings out of TOC#63
RensDimmendaal wants to merge 1 commit into
mainfrom
callout-details

Conversation

@RensDimmendaal

@RensDimmendaal RensDimmendaal commented Sep 7, 2026

Copy link
Copy Markdown
Contributor

This PR adds Quarto-style callouts to the dialect. They are common in nbdev docs and also supported by github flavored markdown (GFM).

Quarto's collapsible callouts (::: {.callout-note collapse="true"}) are common in nbdev docs, but were not handled explicitly. They were directly converted into .callout-* classes. On top of that the headers inside them appeared in the table of contents, see:

image

After this PR:

image

With them being an explicit part of the dialect it also becomes easier to do the GFM style export:

Note

like this:

> [!NOTE]
> like this:

Excluded:

  • title="..." as the label in the ::: block. Quarto supports this, but I think it's easier to leave out. nbdev only uses the header syntax inside the block.
  • GFM lowering (> [!NOTE], <details>). This will be a follow-up PR where we add a mdhtml2gfm exporter (insteadof the current md2gfm).

Comment thread docs/DIALECT.md

```html
<dl><dt id="def-mdhtml">MDHTML</dt><dd>HTML for Markdown-oriented documents.</dd></dl><div id="tip-box" class="callout" data-kind="tip"><h3>A fenced div</h3><p>Normal <strong>Markdown</strong> lives here.</p></div>
<dl><dt id="def-mdhtml">MDHTML</dt><dd>HTML for Markdown-oriented documents.</dd></dl><div id="card-1" class="card" data-kind="sample"><h3>A fenced div</h3><p>Normal <strong>Markdown</strong> lives here.</p></div>

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I rewrote this example to avoid confusion with the dialect's real callouts.

Comment thread examples/sample.css
@@ -1,5 +1,5 @@
/* Demo stylesheet for the attributes sample.md passes through: run
`viewmd sample.md --head sample.css --head sample.js` from examples/.
`viewmd sample-render.md --head sample.css --head sample.js` from examples/.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe this is the right command to see the pairs of raw codefences with their rendered examples.

@RensDimmendaal
RensDimmendaal requested a review from jph00 September 7, 2026 09:37
@RensDimmendaal RensDimmendaal added the enhancement New feature or request label Sep 7, 2026
@jph00

jph00 commented Sep 9, 2026

Copy link
Copy Markdown
Contributor

Reimplemented this locally with some refactoring.

@jph00 jph00 closed this Sep 9, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants