Create Hugo shortcodes for tabsets, callouts, and code filenames

[cwickham]

Tabsets, callouts, and code filenames are currently implemented as Quarto Lua filters that emit HTML and CSS directly. This means they only work in .qmd posts.

To support these features in .md posts too, each should follow the same pattern used for videos:

1. Create a Hugo shortcode that owns the rendering logic (HTML + CSS)
2. Simplify the Lua filter to just translate Quarto's native syntax into calls to the shortcode

This gives .md authors access to these features via shortcode syntax, while .qmd authors keep using the native Quarto syntax they already know.

Features

• Tabsets — Quarto's ::: {.panel-tabset} → {{</* tabset */>}} shortcode
• Callouts — Quarto's ::: {.callout-note} etc. → {{</* callout */>}} shortcode
• Code filenames — Quarto's {filename="doc.qmd"} → shortcode or render hook that adds a filename label

Related

• Style filename labels on code blocks #134 — Style filename labels on code blocks