Prose
@xui/proseTypography for rendered markdown: styles the raw HTML a renderer produced, with no per-element classes to add. Every rule resolves to a semantic token rather than a grey of its own, and they are descendant selectors, so they reach content that arrived as a string just as readily as content written in a template.
Install
pnpm add @xui/prose Add the barrel to a standalone component's imports:
import { XuiProseImports } from '@xui/prose';@Component({ imports: [XuiProseImports], // …})Examples
Default
Loading preview…
<article xuiProse size="md" density="comfortable" [innerHTML]="document" class="max-w-2xl"></article>Compact
Loading preview…
<article xuiProse size="md" density="compact" [innerHTML]="document" class="max-w-2xl"></article>Sizes
Loading preview…
<div class="flex flex-col gap-8"> <article xuiProse size="sm" [innerHTML]="document"></article> <article xuiProse size="md" [innerHTML]="document"></article> <article xuiProse size="lg" [innerHTML]="document"></article></div>Heading anchors
Loading preview…
<article xuiProse size="md" density="comfortable" class="max-w-2xl"> <h2 xuiProseAnchor="install">Install</h2> <p>Every heading carries its own id, so a link to it is a link to the section.</p> <h3 xuiProseAnchor="peer-dependencies">Peer dependencies</h3> <p>And the id is the one the link points at, because they are the same input.</p></article>API
XuiProseAnchor
h1[xuiProseAnchor],h2[xuiProseAnchor],h3[xuiProseAnchor],h4[xuiProseAnchor],h5[xuiProseAnchor],h6[xuiProseAnchor]Makes a heading a linkable section: it carries the anchor id, and on hover or keyboard focus it offers a link to itself.
Inputs
xuiProseAnchorstringThe heading's anchor id — both the element's id and the link's fragment.linkLabelstringAccessible name of the self-link.'Link to this section'basePathstring | nullPath the fragment hangs off. Defaults to the page the heading is on. Not a bare #id, which resolves against the document's base URL: an Angular application ships <base href="/">, so every anchor on every page but the root would quietly point at the site root instead of down the page. Set this when the heading's page is not the one in the address bar.nullclassClassValueExtra classes, merged into the component's own rather than replacing them.''Typography for rendered markdown: styles the raw HTML a renderer produced, with no per-element classes to add.
Variants
densitycomfortableInputs
classClassValueExtra classes, merged into the directive's own rather than replacing them.''sizeXuiProseVariants['size']The type scale the document is set at.this.config.sizedensityXuiProseVariants['density']How much air the document gets between its blocks.this.config.density