feat(markdown): add hover download buttons on rendered SVGs

Attach SVG and PNG (×2) download buttons to every rendered SVG (TikZ,
Mermaid, …) once post-render finishes. Exports always use the original
colors with a white background baked in, regardless of theme.
This commit is contained in:
Julien Calixte
2026-05-16 12:17:04 +02:00
parent f3708b2f9d
commit 9d1b6552cb
4 changed files with 203 additions and 6 deletions

View File

@@ -219,6 +219,47 @@ pre.tikz svg {
font-style: italic;
}
.svg-download-host {
position: relative;
display: inline-block;
max-width: 100%;
}
.svg-download-buttons {
position: absolute;
top: 0.25rem;
right: 0.25rem;
display: flex;
gap: 0.25rem;
opacity: 0;
transition: opacity 150ms ease-in-out;
pointer-events: none;
z-index: 2;
}
.svg-download-host:hover .svg-download-buttons,
.svg-download-host:focus-within .svg-download-buttons {
opacity: 1;
pointer-events: auto;
}
.svg-download-button {
font-size: 0.7rem;
padding-inline: 0.4rem;
height: 1.5rem;
min-height: 1.5rem;
display: inline-flex;
align-items: center;
gap: 0.2rem;
}
.svg-download-button .icon-tabler-download {
width: 0.9rem;
height: 0.9rem;
max-width: none;
filter: none;
}
.tikz-error {
border-left: 3px solid var(--color-error);
padding: 0.5rem 0.75rem;