Markdown

Render and edit markdown content using native controls — no WebView required on MAUI. Includes a read-only MarkdownView renderer and a full MarkdownEditor with formatting toolbar and live preview. Uses Markdig for parsing with support for tables, task lists, and more.

• 
• 

Frameworks

.NET MAUI

Blazor

Viewer	Editor

Note

This is a separate NuGet package from the main controls library.

dotnet add package Shiny.Maui.Controls.Markdown

Add the XAML namespace:

xmlns:md="http://shiny.net/maui/markdown"

MarkdownView

A read-only markdown renderer that converts markdown text to native MAUI controls.

<md:MarkdownView Markdown="{Binding DocumentContent}" Padding="16" />

Properties

Property	Type	Default	Description
Markdown	string	""	Markdown content to render
Theme	MarkdownTheme?	null	Rendering theme (auto Light/Dark if null)
IsScrollEnabled	bool	true	Enable/disable scrolling

Events

Event	EventArgs	Description
LinkTapped	LinkTappedEventArgs	Fired when a link is tapped

Handle links in code-behind:

markdownView.LinkTapped += (sender, args) =>
{
    if (args.Url.StartsWith("internal://"))
    {
        // Handle internal navigation
        args.Handled = true; // Prevents default browser launch
    }
};

MarkdownEditor

A full editor with formatting toolbar, live preview toggle, and customizable toolbar items.

<md:MarkdownEditor Markdown="{Binding NoteContent, Mode=TwoWay}"
                   Placeholder="Start writing markdown..."
                   Padding="8" />

Properties

Property	Type	Default	Description
Markdown	string	""	Markdown content (TwoWay)
Theme	MarkdownTheme?	null	Preview theme (auto Light/Dark if null)
Placeholder	string	"Write markdown here..."	Placeholder text
ToolbarItems	IReadOnlyList<MarkdownToolbarItem>?	Default set	Formatting toolbar buttons
IsPreviewVisible	bool	false	Toggle preview pane (TwoWay)
ToolbarBackgroundColor	Color?	null	Toolbar background
EditorBackgroundColor	Color?	null	Editor background

Events

Event	EventArgs	Description
LinkTapped	LinkTappedEventArgs	Forwarded from preview link taps
TextChanged	TextChangedEventArgs	Fired when editor text changes

Toolbar Items

The default toolbar includes: Bold, Italic, Inline Code, H1-H3, Bullet/Numbered/Task Lists, Link, Quote, and Code Block. Use MarkdownToolbarItems.All for all 15 items, or build a custom set:

editor.ToolbarItems = new[]
{
    MarkdownToolbarItems.Bold,
    MarkdownToolbarItems.Italic,
    MarkdownToolbarItems.Link,
    MarkdownToolbarItems.CodeBlock
};

MarkdownTheme

Comprehensive theming for rendered markdown. Auto-resolves Light/Dark based on Application.Current?.RequestedTheme when null.

// Use built-in themes
markdownView.Theme = MarkdownTheme.Light;
markdownView.Theme = MarkdownTheme.Dark;

// Or customize
markdownView.Theme = new MarkdownTheme
{
    TextColor = Colors.Navy,
    LinkColor = Colors.Green,
    H1FontSize = 36,
    BlockSpacing = 16
};

Theme Properties

Category	Properties
Colors	TextColor, MutedTextColor, LinkColor, CodeBackgroundColor, CodeTextColor, CodeBlockBackgroundColor, CodeBlockTextColor, BlockquoteBorderColor, BlockquoteBackgroundColor, HorizontalRuleColor, TableBorderColor, TableHeaderBackgroundColor
Font Sizes	BaseFontSize (16), H1FontSize (32), H2FontSize (24), H3FontSize (20), H4FontSize (18), H5FontSize (16), H6FontSize (14), CodeFontSize (14)
Spacing	BlockSpacing (12), ListIndent (24), CodeFontFamily

Supported Markdown

Bold, italic, strikethrough, H1-H6 headings, unordered/ordered/task lists, inline code, fenced code blocks, links (with LinkTapped event), images, blockquotes, tables, horizontal rules, and line breaks.

Blazor Usage

Install the NuGet package:

dotnet add package Shiny.Blazor.Controls.Markdown

Add the @using directive — typically in _Imports.razor:

@using Shiny.Blazor.Controls.Markdown

MarkdownView

<MarkdownView Markdown="@content" />

@code {
    string content = """
        # Hello World
        This is **bold** and *italic* text.

        - Item 1
        - Item 2
        """;
}

MarkdownEditor

<MarkdownEditor Markdown="@noteContent"
                MarkdownChanged="v => noteContent = v"
                Placeholder="Start writing markdown..."
                IsPreviewVisible="@showPreview"
                IsPreviewVisibleChanged="v => showPreview = v" />

<button @onclick="() => showPreview = !showPreview">
    Toggle Preview
</button>

@code {
    string noteContent = "";
    bool showPreview;
}

Note

On Blazor, colors within MarkdownTheme are CSS strings. LinkTapped is EventCallback<string> with the URL as the parameter. Two-way bound properties use Changed callbacks (e.g. Markdown/MarkdownChanged).

AI Skill

Claude CodeGitHub Copilot

Step 1 — Add the marketplace:

claude plugin marketplace add shinyorg/skills

Step 2 — Install the plugin:

claude plugin install controls@shiny

Step 1 — Add the marketplace:

copilot plugin marketplace add https://github.com/shinyorg/skills

Step 2 — Install the plugin:

copilot plugin install controls@shiny

View controls Plugin