OsirionHtmlRenderer

OsirionHtmlRenderer sanitizes an HTML string and writes it into the page. When the HTML contains code blocks, it also loads Prism to highlight them, with optional line numbers and copy buttons. Use it for HTML you hold outside the CMS, such as Markdown you converted yourself or a field from an API.

Usage

<OsirionHtmlRenderer HtmlContent="@html" />

@code {
    private string html = "<h2>Release notes</h2><p>Version 4.0 sanitizes content by default.</p>";
}

Code blocks are <pre><code class="language-..."> elements, the form Markdown processors produce. With line numbers and copy buttons:

<OsirionHtmlRenderer HtmlContent="@articleHtml"
                     ShowLineNumbers="true"
                     EnableCopyButton="true" />

@code {
    private string articleHtml =
        """
        <p>Register the services:</p>
        <pre><code class="language-csharp">builder.Services.AddOsirion(builder.Configuration);</code></pre>
        """;
}

Parameters

LanguageClasses is obsolete: the component never read it. Unmatched attributes are written to the <article>.

Behavior

Sanitizing

With the default SanitizeHtml="true", the HTML goes through the registered IHtmlContentSanitizer, or the built-in allow-list when none is registered. Script, event handler attributes, javascript:, vbscript: and data: URLs, forms, iframes, inline styles, <style> and SVG are removed; class, id, role and aria-* are kept, so language-* classes survive. AddOsirion registers the sanitizer; to change the allow-list, call AddOsirionHtmlSanitizer with your changes:

using Osirion.Blazor.Core.Extensions;

builder.Services.AddOsirionHtmlSanitizer(options =>
    options.AllowElement("iframe", "src", "title", "allow", "allowfullscreen"));

Sanitizing runs before the copy button wrapper is added, so the button's own handler is not stripped.

Syntax highlighting

Highlighting loads only when the HTML contains a code block. The component then requests Prism 1.29.0 from cdnjs, plus one language file for each language it finds, and every file carries its Subresource Integrity hash. A language that is not in that release is skipped. Short names are mapped to Prism's: cs to csharp, js to javascript, ts, py, rb, yml, sh, ps1, and razor or blazor to cshtml; html and xml use Prism's built-in markup.

To serve Prism yourself, set PrismBaseUrl, for example /lib/prism/1.29.0/. Keep the release layout (prism.min.js, components/prism-{language}.min.js, themes/prism-okaidia.min.css, plugins/line-numbers/...). Files from your own address load without an integrity check.

The scripts are rendered as part of the page rather than called through JavaScript interop, so highlighting also works under static SSR, and it runs again after enhanced navigation. Without JavaScript, code blocks show as plain preformatted text.

Copy button and line numbers

• The Copy button copies the code's text with the Clipboard API, or an older fallback outside secure contexts, and briefly reads "Copied!". Its accessible name includes the language, for example "Copy C# code to clipboard".
• With line numbers on, each number becomes a toggle button (Enter or Space with the keyboard). Clicking one highlights that line; Ctrl, Cmd or Shift adds lines to the selection, and a polite live region announces the change.

Content Security Policy

The accessible theme is an inline <style> element and the Copy button uses an inline onclick attribute. Under a policy without 'unsafe-inline', set UseAccessibleTheme="false" (and provide your theme as a file) and leave EnableCopyButton off.

Styling

The output is wrapped in <article class="osirion-html-renderer osirion-content">, with osirion-wcag-theme added when the accessible theme is in use. The component also links _content/Osirion.Blazor.Core/css/osirion-html-renderer.min.css, which styles headings, lists, tables, links and code inside the article from the theme tokens (--osirion-text-primary, --osirion-font-family-base, --osirion-font-family-mono and others).

Two custom properties are yours to set:

• --osirion-syntax-background-color: background of the copy button wrapper, its header and the code block inside it.
• --osirion-code-background: background of inline <code>.

The copy button wrapper uses osirion-code-wrapper, osirion-code-header, osirion-language-label and osirion-copy-button (with copied after a copy); the button also takes the CSS framework's button class. A highlighted line has osirion-line-highlighted.

Related

• Core rendering components
• Callouts
• CMS Web components