Skip to content
IzzyBlazor 0.1.0-alpha.17

Enter all results ↑ ↓ move Esc close

Prose

Styles plain HTML, such as rendered Markdown.

JavaScript off: what the HTML and CSS do on their own.

Styles plain HTML inside it, such as Markdown output or a CMS field: headings, paragraphs, links, lists, quotes, code, tables, images and rules, in the library's type and colors.

Usage

razor
<Prose>@((MarkupString)html)</Prose>

HTML from Markdown

Use Prose around HTML you trust, such as rendered Markdown, to style its headings, links, lists, quotes, code and tables.

Preview

Getting started

IzzyBlazor renders on the server, so pages work before any script loads. Read the install guide, then add the package:

dotnet add package IzzyBlazor

What you get

  • Forms that post with JavaScript off
  • Tables with sorting, paging and filters in the URL
  • Dialogs, menus and toasts, using popover and dialog
The best component is the one that still works when everything else fails.
ModeScriptCircuit
StaticOptionalNo
ServerYesYes

Press Ctrl + K to search.

Code

Markdown.razor 
@* HTML from Markdown or a CMS, styled in the library's type: headings, links, lists, quotes,
   code, tables and rules. *@
<Prose MaxWidth="Length.Prose" Grow>@((MarkupString)Html)</Prose>

Sizes

Use Size to set the text to Sm for asides, Md (the default) or Lg for long reading.

Preview

Refunds

Cancel within 14 days for a full refund. After that, we refund the unused part of your plan.

Refunds

Cancel within 14 days for a full refund. After that, we refund the unused part of your plan.

Code

Sizes.razor 
<Grid Columns="new() { Base = 1, Sm = 2 }" Gap="6" Grow>
    <Prose Size="ProseSize.Sm">@((MarkupString)Html)</Prose>
    <Prose Size="ProseSize.Lg">@((MarkupString)Html)</Prose>
</Grid>

Details

The rules have the lowest weight (:where()), so library components inside keep their own look, and your own classes win. Only render HTML you trust or have sanitized.

Mode support

What works in each mode, Prose
FeatureOffStaticLive
EverythingYesYesYes

Off: JavaScript disabled. Static: a static SSR page with IzzyBlazor's script. Live: an interactive page (Server, WebAssembly or Auto).

Accessibility

  • It only styles the HTML inside it: heading levels, alt text, table headers and link text come from that HTML, so check what your Markdown or CMS produces.
  • Links are underlined, not marked by color alone.

Parameters

Prose parameters
PropTypeDefault
SizeText size.ProseSizeProseSize.Md
AsThe element to render: div on a Box; components built on it set their own (List a ul, Section a section).string"div"
ChildContentThe content.RenderFragment?

Plus 25 surface props, 16 item props and 4 common props.

Full API

See also

  • Heading: headings 1 to 6, with fluid sizes and section links.
  • TextBlock: body text with every text style.
  • Code: inline code or a block, highlighted on the server.
  • Demos: Release notes.