Tesserae - MarkdownBlock

MarkdownBlock

Description

Renders Markdown text as sanitized HTML. The component uses the bundled marked and DOMPurify libraries (via the Markdown helper) so untrusted input is safe to display.

Usage

markdown-block-sample.cs

using Transpose.Core;
using Tesserae;
using static Transpose.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var md = MarkdownBlock(@"# Hello

This is **Markdown** rendered inside a Tesserae component.

- It supports lists
- And `inline code`
- And [links](https://curiosity.ai)
");
            document.body.style.overflow = "hidden";
            MountCenteredToBody(md);
        }
    }
}

API reference

class

MarkdownBlock

public class MarkdownBlock : ComponentBase<MarkdownBlock, HTMLElement>, ICanWrap

A component that renders Markdown text as sanitized HTML. Uses the bundled marked and DOMPurify libraries via Markdown.

Namespace: Tesserae
Inheritance: ComponentBase<MarkdownBlock, HTMLElement> → MarkdownBlock
Implements: ICanWrap

Constructors

Name	Description
MarkdownBlock	Initializes a new instance of the `MarkdownBlock` class.

Constructor

MarkdownBlock

public MarkdownBlock(string text = "")

Initializes a new instance of the MarkdownBlock class.

Parameters

text: The Markdown source text to render.

Properties

Name	Description
Text	Gets or sets the Markdown source text. Setting this re-renders the sanitized HTML.
HTML	Gets the rendered sanitized HTML (derived from `Text`).
CanWrap	Gets or sets whether the rendered Markdown can wrap.

Property

MarkdownBlock.Text

public string Text { get ; set ; }

Gets or sets the Markdown source text. Setting this re-renders the sanitized HTML.

Property

MarkdownBlock.HTML

public string HTML

Gets the rendered sanitized HTML (derived from Text).

Property

MarkdownBlock.CanWrap

public bool CanWrap { get ; set ; }

Gets or sets whether the rendered Markdown can wrap.

Methods

Name Description

OnAfterRender Registers a callback invoked every time the Markdown source is re-parsed into the inner HTML element. The callback receives the inner element so that callers can post-process the rendered tree (e.g. wrap <code> blocks with custom controls, rewrite links, attach copy buttons, ...). The callback is fired immediately with the current rendered content so the first pass does not require the caller to also trigger an explicit render. Re-registering replaces any previously-attached callback.

Render Renders the component.

Name	Description
OnAfterRender	Registers a callback invoked every time the Markdown source is re-parsed into the inner HTML element. The callback receives the inner element so that callers can post-process the rendered tree (e.g. wrap `<code>` blocks with custom controls, rewrite links, attach copy buttons, ...). The callback is fired immediately with the current rendered content so the first pass does not require the caller to also trigger an explicit render. Re-registering replaces any previously-attached callback.
Render	Renders the component.

Method

MarkdownBlock.OnAfterRender

public MarkdownBlock OnAfterRender(Action<HTMLElement> callback)

Registers a callback invoked every time the Markdown source is re-parsed into the inner HTML element. The callback receives the inner element so that callers can post-process the rendered tree (e.g. wrap <code> blocks with custom controls, rewrite links, attach copy buttons, ...). The callback is fired immediately with the current rendered content so the first pass does not require the caller to also trigger an explicit render. Re-registering replaces any previously-attached callback.

Method

MarkdownBlock.Render

public override HTMLElement Render()

Renders the component.

MarkdownBlock

Description

Usage

API reference

Constructors

MarkdownBlock

Parameters

Properties

MarkdownBlock.Text

MarkdownBlock.HTML

MarkdownBlock.CanWrap

Methods

MarkdownBlock.OnAfterRender

MarkdownBlock.Render

See also