Class SfMarkdownViewer

A .NET MAUI control for rendering and displaying Markdown content with support for CSS-based styling, interactive hyperlinks, and Mermaid diagram visualization. The control offers fine-grained style customization through MarkdownStyleSettings, enabling precise control over the appearance of headings, body text, tables, and other markdown elements.

Inheritance
System.Object
SfView
SfMarkdownViewer
Implements
Microsoft.Maui.Graphics.IDrawable
Microsoft.Maui.IAbsoluteLayout
Microsoft.Maui.ILayout
Microsoft.Maui.IView
Microsoft.Maui.IElement
Microsoft.Maui.ITransform
Microsoft.Maui.IContainer
System.Collections.Generic.IList<Microsoft.Maui.IView>
System.Collections.Generic.ICollection<Microsoft.Maui.IView>
System.Collections.Generic.IEnumerable<Microsoft.Maui.IView>
System.Collections.IEnumerable
Microsoft.Maui.ISafeAreaView
Microsoft.Maui.IPadding
Microsoft.Maui.ICrossPlatformLayout
Microsoft.Maui.IVisualTreeElement
Inherited Members
Namespace: Syncfusion.Maui.MarkdownViewer
Assembly: Syncfusion.Maui.MarkdownViewer.dll
Syntax
public class SfMarkdownViewer : SfView, IDrawableLayout, IDrawable, IAbsoluteLayout, ILayout, IView, IElement, ITransform, IContainer, IList<IView>, ICollection<IView>, IEnumerable<IView>, IEnumerable, ISafeAreaView, IPadding, ICrossPlatformLayout, IVisualTreeElement, ISemanticsProvider
Examples
    <sync:SfMarkdownViewer Source="# Hello World">
        <sync:SfMarkdownViewer.Settings>
            <sync:MarkdownStyleSettings 
                H1FontSize="32px"
                H1Color="#2C3E50"
                H2FontSize="24px"
                H2Color="#34495E"
                H3FontSize="18px"
                H3Color="#7F8C8D"
                BodyTextColor="#2C3E50"
                BodyFontSize="14px"
                TableHeaderFontSize="18px"
                TableHeaderTextColor="#2C3E50"
                TableDataFontSize="18px"
                TableDataTextColor="#2C3E50"
                TableBackground="#F8F9FA"
                CssStyleRules="body { line-height: 1.6; margin: 16px; }" />
        </sync:SfMarkdownViewer.Settings>
    </sync:SfMarkdownViewer>

Constructors

SfMarkdownViewer()

Initializes a new instance of the SfMarkdownViewer class.

Declaration
public SfMarkdownViewer()

Fields

SettingsProperty

Identifies the Settings bindable property.

Declaration
public static readonly BindableProperty SettingsProperty
Field Value
Type
Microsoft.Maui.Controls.BindableProperty
Remarks

The Settings property defines the markdown style settings to customize the appearance of markdown elements.

SourceProperty

Identifies the Source bindable property.

Declaration
public static readonly BindableProperty SourceProperty
Field Value
Type
Microsoft.Maui.Controls.BindableProperty
Remarks

The Source property defines the the markdown content to be rendered.

Properties

Settings

Gets or sets the markdown style settings to customize the appearance of markdown elements.

Declaration
public MarkdownStyleSettings Settings { get; set; }
Property Value
Type Description
MarkdownStyleSettings

This property takes Settings instance as value.
Examples
    <sync:SfMarkdownViewer Source="# Hello World">
        <sync:SfMarkdownViewer.Settings>
            <sync:MarkdownStyleSettings 
                H1FontSize="32px"
                H1Color="#2C3E50"
                H2FontSize="24px" />
        </sync:SfMarkdownViewer.Settings>
    </sync:SfMarkdownViewer>

Source

Gets or sets the markdown content to be rendered.

Declaration
public string Source { get; set; }
Property Value
Type Description
System.String

This property accepts a System.String value which can be:

  • Direct markdown content as a string (e.g., "# Hello World")
  • A URL pointing to a markdown file (e.g., "https://example.com/readme.md")
  • A local file path to a markdown file (e.g., "file:///storage/emulated/0/docs/readme.md") The content will be fetched and rendered accordingly.
Examples
    <sync:SfMarkdownViewer Source="# Hello World"/>
    (or)
    <sync:SfMarkdownViewer Source="https://example.com/readme.md" />
    (or)
    <sync:SfMarkdownViewer Source="file:///storage/emulated/0/docs/readme.md" />

Methods

Finalize()

Finalizer that unhooks the event to prevent memory leaks.

Declaration
protected override void Finalize()

GetHtmlText()

Gets the current markdown content converted to HTML.

Declaration
public string GetHtmlText()
Returns
Type Description
System.String

The HTML representation of the markdown content including images

GetMarkdownText()

Gets the current markdown content as plain text.

Declaration
public string GetMarkdownText()
Returns
Type Description
System.String

The markdown text content

GetText()

Gets the current markdown content as plain text without markdown formatting.

Declaration
public string GetText()
Returns
Type Description
System.String

Plain text without markdown formatting (e.g., without #, ##, ###, etc.)

OnBindingContextChanged()

Declaration
protected override void OnBindingContextChanged()
Overrides

OnParentSet()

Declaration
protected override void OnParentSet()

Events

HyperlinkClicked

Occurs when a hyperlink is clicked in the Markdown content

Declaration
public event EventHandler<MarkdownHyperlinkClickedEventArgs> HyperlinkClicked
Event Type
Type
System.EventHandler<MarkdownHyperlinkClickedEventArgs>

Implements

Microsoft.Maui.Graphics.IDrawable
Microsoft.Maui.IAbsoluteLayout
Microsoft.Maui.ILayout
Microsoft.Maui.IView
Microsoft.Maui.IElement
Microsoft.Maui.ITransform
Microsoft.Maui.IContainer
System.Collections.Generic.IList<>
System.Collections.Generic.ICollection<>
System.Collections.Generic.IEnumerable<>
System.Collections.IEnumerable
Microsoft.Maui.ISafeAreaView
Microsoft.Maui.IPadding
Microsoft.Maui.ICrossPlatformLayout
Microsoft.Maui.IVisualTreeElement