Create Hugo shortcodes for tabsets, callouts, and code filenames

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

• #134 — Style filename labels on code blocks

Find the existing video shortcode and the Lua filters that currently implement tabsets, callouts, and code filenames. Read how the video pattern separates Hugo rendering from syntax translation, then apply that pattern to each feature. Done means all three work in .md posts through shortcodes while .qmd authors retain the native Quarto syntax.