Numbered :cite[2] citations that link to a ::sources list of links, each with a link back. A Comark plugin for HTML, Vue, React, and Svelte.
pnpm add comark comark-sourcesimport { createHtmlRenderer } from "@comark/html";
import sources, { components } from "comark-sources/html";
const render = createHtmlRenderer({ plugins: [sources()], components });Pigeons home by the sun :cite[1], and some by smell too :cite[2,3].
::sources
1. [Magnetoreception](https://en.wikipedia.org/wiki/Magnetoreception)
2. [Pigeon intelligence](https://en.wikipedia.org/wiki/Pigeon_intelligence)
3. [How do homing pigeons navigate?](https://www.sciencefocus.com/nature/how-do-homing-pigeons-navigate)
::Each citation becomes a superscript link to its source, and each source gets a ↩ link back to every citation of it. Resting the pointer on a citation, or focusing it, shows a card with the source's title, its site, and the icon the list shows for it, such as a comark-chips favicon. Citations are plain sup links that work in any renderer. The ::sources component draws the list and the card.
The plugin adds every problem to meta.issues: a citation with no number or of a source the list doesn't have, citations with no list, a second list, a source without a link, and content beside the list. Each issue names its block and says how to fix it.
| Renderer | Import |
|---|---|
@comark/html |
comark-sources/html: the styles and the card's script are inlined |
@comark/vue |
comark-sources/vue |
@comark/react |
comark-sources/react |
@comark/svelte |
comark-sources/svelte |
Each entry exports the parse plugin as default and the renderer's components. The Vue, React, and Svelte components add the styles and start the card when they mount; import comark-sources/style.css with your styles so a server-rendered page doesn't shift.
For manual integration, comark-sources/client exports css and start(css), which returns a function to stop the card.
The styles follow shadcn/ui: they read its CSS variables, such as --background and --border, when the page has them, and use its neutral theme otherwise. Set the shared --comark-* tokens to theme every plugin at once; the rules sit in a comark CSS layer, so any plain rule of your own wins.