Client script
A dependency-free ES module enhances the rendered markdown. The integration
injects it on every page; it runs on the elements matching
selector, with the
features and
labels of the integration. Events are delegated
on document; per-element setup re-runs on every astro:page-load, so it
keeps working across View Transitions.
Table wrappers and heading anchors come from the build. The module adds them
only to markup that skipped the processor (set:html, HTML from a CMS).
| Enhancement | Behaviour |
|---|---|
| Heading links | Adds an anchor link to h1–h6 where the build did not. Fills in a missing id with a github-slugger-compatible slug, de-duplicated across the page. |
| Table of contents | Marks the :::toc entry whose section is on screen with aria-current="location". |
| Copy buttons | Adds a copy button to every pre. Without clipboard access it selects the code instead. The only clipboard write in the package. |
| Image lightbox | Wraps each image in a button that opens it in a modal <dialog>. Closes on Esc, the ✕ button or a click outside the image. |
| Responsive tables | Wraps a table in a horizontally scrollable container where the build did not. |
| Code tabs | Drives the :::code-tabs tablist. |
| Spoilers | Reveals a spoiler on click or Enter/Space. |
Keyboard
| Element | Keys |
|---|---|
| Code tabs | ← → move between tabs, Home End jump to first/last. Panels are focusable so wide samples can be scrolled. |
| Spoilers | Tab to focus, Enter or Space to reveal. Hover does not reveal. |
| Lightbox | Tab to an image, Enter or Space to open, Esc to close. Focus returns to the image. |
<details> animates in CSS, no script: height where the browser supports
interpolate-size, a fade elsewhere.
Under prefers-reduced-motion: reduce JAAMD’s CSS transitions are disabled.
With scripting disabled, tables still scroll, heading anchors work and every code tab panel is shown.
Image lightbox
Opening and closing are the browser’s own: the image button and the ✕ button
are invoker commands
on the <dialog>, and closedby="any" closes it on a click outside the image.
| Browser | Lightbox | Click outside closes |
|---|---|---|
| Chrome / Edge | 135+ | 134+ |
| Firefox | 144+ | 141+ |
| Safari | 26.2+ | not yet: Esc and ✕ only |
Older browsers show the image as a plain image.
Excluding images from the lightbox
Linked images are skipped automatically, so badges keep navigating:
[](https://github.com/you/repo)Opt a standalone image out with data-no-lightbox:
<img src="/diagram.svg" alt="Architecture diagram" data-no-lightbox />