Markdown View

@sushindustries/ui

Renders Markdown with callouts, CSS-only tabs, custom blocks and highlighted code.

5 min read
View as MarkdownEdit on GitHub

Props

PropTypeDefaultDoes
sourcestring-Raw Markdown. Parsed to a bounded AST, so author content cannot inject markup.
blocks?MarkdownBlocks{}Custom ::start:name blocks (written inside an HTML comment) this document may use, keyed by name. This is how a Markdown file reaches a live React component without this package having to know what that component is.
references?ReferenceMapNO_REFERENCESThings this document may mention, keyed by the exact inline-code text that names them. A matching mention renders as a Ref: a link with a hover card carrying the target's own summary.

Notes

blocks and references are both maps read by exact key, not by pattern - a name or a mention that does not match an entry falls back quietly (an unmatched block keeps its children as prose, an unmatched mention stays plain <code>) rather than throwing. A block's attributes are always strings: data-attributes comes off the parser as JSON, but non-string values in it are dropped, so height="420" in the source is "420" in the block, never the number 420.

UsesCode BlockCode BlockA highlighted code slab with the CLI's colours, a lit top edge, and a copy button that confirms in place.@sushindustries/ui · contentReferenceReferenceAn inline mention that carries a hover card: title, summary and meta for the thing it names, raised by CSS alone.@sushindustries/ui · content