@fluid-ds/markdown

Themable Markdown rendering web component for Fluid, backed by marked. Expansion pack.

<fluid-markdown>
  ### Hello

  This is **markdown** with [links](https://example.com).
</fluid-markdown>

Install

pnpm add @fluid-ds/markdown

import "@fluid-ds/markdown/define";

Use

Three ways to supply content:

<!-- Inline text -->
<fluid-markdown>### Inline</fluid-markdown>

<!-- value property -->
<fluid-markdown value="### From a property"></fluid-markdown>

<!-- Remote URL -->
<fluid-markdown src="/CHANGELOG.md"></fluid-markdown>

The rendered output respects the Fluid tokens, headings, code, links, blockquotes, and tables all adopt your brand colors. Override the component tokens to restyle:

[data-fluid-brand="custom"] {
  --fluid-markdown-link-fg: var(--fluid-color-primary);
  --fluid-markdown-code-bg: var(--fluid-surface-muted);
}

License

MIT, © Fluid contributors. marked is MIT-licensed.