Class MarkdownStyleSettings

Represents the styling configuration for markdown content rendering in SfMarkdownViewer. This class provides granular control over the appearance of markdown elements through individual style properties for fonts and colors, with support for custom CSS overrides. The styling system intelligently merges base styles with custom CSS, allowing for both structured and flexible styling approaches.

Inheritance

System.Object

MarkdownStyleSettings

Namespace: Syncfusion.Maui.MarkdownViewer

Assembly: Syncfusion.Maui.MarkdownViewer.dll

Syntax

public class MarkdownStyleSettings : Element

Remarks

The styling system in MarkdownStyleSettings works in two layers: 1. Base styles: Set through individual properties for precise control over specific elements 2. Custom CSS: Additional styles that can override or complement the base styles

To customize markdown styling, create an instance of MarkdownStyleSettings class, set the desired style properties and/or CssStyleRules, then assign it to the Settings property.

    <sync:SfMarkdownViewer>
        <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; }
                    table { border-collapse: collapse; width: 100%; }
                    th, td { padding: 12px; border: 1px solid #ddd; }
                    code { background-color: #f8f9fa; padding: 2px 4px; border-radius: 4px; }
                " />
        </sync:SfMarkdownViewer.Settings>
    </sync:SfMarkdownViewer>

    SfMarkdownViewer markdownViewer = new SfMarkdownViewer();

    MarkdownStyleSettings styleSettings = new 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; }
            table { border-collapse: collapse; width: 100%; }
            th, td { padding: 12px; border: 1px solid #ddd; }
            code { background-color: #f8f9fa; padding: 2px 4px; border-radius: 4px; }
        "
    };

    markdownViewer.Settings = styleSettings;

Constructors

MarkdownStyleSettings()

Initializes a new instance of the MarkdownStyleSettings class.

Declaration

public MarkdownStyleSettings()

Fields

BodyFontSizeProperty

Identifies the BodyFontSize bindable property.

Declaration

public static readonly BindableProperty BodyFontSizeProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The BodyFontSize property defines the font size for body content.

BodyTextColorProperty

Identifies the BodyTextColor bindable property.

Declaration

public static readonly BindableProperty BodyTextColorProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The BodyTextColor property defines the text color for body content.

CssStyleRulesProperty

Identifies the CssStyleRules bindable property.

Declaration

public static readonly BindableProperty CssStyleRulesProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The CssStyleRules property defines the custom CSS styles to be applied to the markdown content. This property allows you to add additional styling that is not covered by other properties.

H1ColorProperty

Identifies the H1Color bindable property.

Declaration

public static readonly BindableProperty H1ColorProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The H1Color property defines the color for H1 heading elements.

H1FontSizeProperty

Identifies the H1FontSize bindable property.

Declaration

public static readonly BindableProperty H1FontSizeProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The H1FontSize property defines the font size for H1 heading elements

H2ColorProperty

Identifies the H2Color bindable property.

Declaration

public static readonly BindableProperty H2ColorProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The H2Color property defines the color for H2 heading elements.

H2FontSizeProperty

Identifies the H2FontSize bindable property.

Declaration

public static readonly BindableProperty H2FontSizeProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The H2FontSize property defines the font size for H2 heading elements.

H3ColorProperty

Identifies the H3Color bindable property.

Declaration

public static readonly BindableProperty H3ColorProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The H3Color property defines the color for H3 heading elements.

H3FontSizeProperty

Identifies the H3FontSize bindable property.

Declaration

public static readonly BindableProperty H3FontSizeProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The H3FontSize property defines the font size for H3 heading elements.

TableBackgroundProperty

Identifies the TableBackground bindable property.

Declaration

public static readonly BindableProperty TableBackgroundProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The TableBackground property defines the color for table background.

TableDataFontSizeProperty

Identifies the TableDataFontSize bindable property.

Declaration

public static readonly BindableProperty TableDataFontSizeProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The TableDataFontSize property defines the font size for table row elements.

TableDataTextColorProperty

Identifies the TableDataTextColor bindable property.

Declaration

public static readonly BindableProperty TableDataTextColorProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The TableDataTextColor property defines the text color for table row elements.

TableHeaderFontSizeProperty

Identifies the TableHeaderFontSize bindable property.

Declaration

public static readonly BindableProperty TableHeaderFontSizeProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The TableHeaderFontSize property defines the font size for table header elements.

TableHeaderTextColorProperty

Identifies the TableHeaderTextColor bindable property.

Declaration

public static readonly BindableProperty TableHeaderTextColorProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The TableHeaderTextColor property defines the text color for table header elements.

Properties

BodyFontSize

Gets or sets the font size for body content.

Declaration

public string BodyFontSize { get; set; }

Property Value

Type	Description
System.String	This property takes System.String instance as value and its default value is "16px".

Examples

Xaml
C#

    <sync:SfMarkdownViewer>
        <sync:SfMarkdownViewer.Settings>
            <sync:MarkdownStyleSettings BodyFontSize="16px" />
        </sync:SfMarkdownViewer.Settings>
    </sync:SfMarkdownViewer>

    SfMarkdownViewer markdownViewer = new SfMarkdownViewer();
    markdownViewer.Settings = new MarkdownStyleSettings()
    {
        BodyFontSize = "16px"
    };

BodyTextColor

Gets or sets the text color for body content.

Declaration

public string BodyTextColor { get; set; }

Property Value

Type	Description
System.String	This property takes System.String instance as value and its default value is "#1C1B1F".

Examples

Xaml
C#

    <sync:SfMarkdownViewer>
        <sync:SfMarkdownViewer.Settings>
            <sync:MarkdownStyleSettings BodyTextColor="#1C1B1F" />
        </sync:SfMarkdownViewer.Settings>
    </sync:SfMarkdownViewer>

    SfMarkdownViewer markdownViewer = new SfMarkdownViewer();
    markdownViewer.Settings = new MarkdownStyleSettings()
    {
        BodyTextColor = "#1C1B1F"
    };

CssStyleRules

Gets or sets custom CSS styles to be applied to the markdown content.

Declaration

public string CssStyleRules { get; set; }

Property Value

Type	Description
System.String	This property takes System.String instance as value and its default value is System.String.Empty.

Examples

Xaml
C#

    <sync:SfMarkdownViewer>
        <sync:SfMarkdownViewer.Settings>
            <sync:MarkdownStyleSettings CssStyleRules="
                body { line-height: 1.6; margin: 16px; } 
                blockquote { border-left: 4px solid #3498db; padding-left: 1em; margin: 1em 0; } 
                ul li { margin-bottom: 0.5em; }
                a { color: #3498db; text-decoration: none; }
                a:hover { text-decoration: underline; }
            " />
        </sync:SfMarkdownViewer.Settings>
    </sync:SfMarkdownViewer>

    SfMarkdownViewer markdownViewer = new SfMarkdownViewer();
    markdownViewer.Settings = new MarkdownStyleSettings()
    {
        CssStyleRules = @"
            body { line-height: 1.6; margin: 16px; } 
            blockquote { border-left: 4px solid #3498db; padding-left: 1em; margin: 1em 0; } 
            ul li { margin-bottom: 0.5em; }
            a { color: #3498db; text-decoration: none; }
            a:hover { text-decoration: underline; }
        "
    };

H1Color

Gets or sets the color for H1 heading elements.

Declaration

public string H1Color { get; set; }

Property Value

Type	Description
System.String	This property takes System.String instance as value and its default value is "#1C1B1F".

Examples

Xaml
C#

    <sync:SfMarkdownViewer>
        <sync:SfMarkdownViewer.Settings>
            <sync:MarkdownStyleSettings H1Color="#1C1B1F" />
        </sync:SfMarkdownViewer.Settings>
    </sync:SfMarkdownViewer>

    SfMarkdownViewer markdownViewer = new SfMarkdownViewer();
    markdownViewer.Settings = new MarkdownStyleSettings()
    {
        H1Color = "#1C1B1F"
    };

H1FontSize

Gets or sets the font size for H1 heading elements.

Declaration

public string H1FontSize { get; set; }

Property Value

Type	Description
System.String	This property takes System.String instance as value and its default value is "28px".

Examples

Xaml
C#

    <sync:SfMarkdownViewer>
        <sync:SfMarkdownViewer.Settings>
            <sync:MarkdownStyleSettings H1FontSize="28px" />
        </sync:SfMarkdownViewer.Settings>
    </sync:SfMarkdownViewer>

    SfMarkdownViewer markdownViewer = new SfMarkdownViewer();
    markdownViewer.Settings = new MarkdownStyleSettings()
    {
        H1FontSize = "28px"
    };

H2Color

Gets or sets the color for H2 heading elements.

Declaration

public string H2Color { get; set; }

Property Value

Type	Description
System.String	This property takes System.String instance as value and its default value is "#1C1B1F".

Examples

Xaml
C#

    <sync:SfMarkdownViewer>
        <sync:SfMarkdownViewer.Settings>
            <sync:MarkdownStyleSettings H2Color="#1C1B1F" />
        </sync:SfMarkdownViewer.Settings>
    </sync:SfMarkdownViewer>

    SfMarkdownViewer markdownViewer = new SfMarkdownViewer();
    markdownViewer.Settings = new MarkdownStyleSettings()
    {
        H2Color = "#1C1B1F"
    };

H2FontSize

Gets or sets the font size for H2 heading elements.

Declaration

public string H2FontSize { get; set; }

Property Value

Type	Description
System.String	This property takes System.String instance as value and its default value is "24px".

Examples

Xaml
C#

    <sync:SfMarkdownViewer>
        <sync:SfMarkdownViewer.Settings>
            <sync:MarkdownStyleSettings H2FontSize="24px" />
        </sync:SfMarkdownViewer.Settings>
    </sync:SfMarkdownViewer>

    SfMarkdownViewer markdownViewer = new SfMarkdownViewer();
    markdownViewer.Settings = new MarkdownStyleSettings()
    {
        H2FontSize = "24px"
    };

H3Color

Gets or sets the color for H3 heading elements.

Declaration

public string H3Color { get; set; }

Property Value

Type	Description
System.String	This property takes System.String instance as value and its default value is "#1C1B1F".

Examples

Xaml
C#

    <sync:SfMarkdownViewer>
        <sync:SfMarkdownViewer.Settings>
            <sync:MarkdownStyleSettings H3Color="#1C1B1F" />
        </sync:SfMarkdownViewer.Settings>
    </sync:SfMarkdownViewer>

    SfMarkdownViewer markdownViewer = new SfMarkdownViewer();
    markdownViewer.Settings = new MarkdownStyleSettings()
    {
        H3Color = "#1C1B1F"
    };

H3FontSize

Gets or sets the font size for H3 heading elements.

Declaration

public string H3FontSize { get; set; }

Property Value

Type	Description
System.String	This property takes System.String instance as value and its default value is "22px".

Examples

Xaml
C#

    <sync:SfMarkdownViewer>
        <sync:SfMarkdownViewer.Settings>
            <sync:MarkdownStyleSettings H3FontSize="22px" />
        </sync:SfMarkdownViewer.Settings>
    </sync:SfMarkdownViewer>

    SfMarkdownViewer markdownViewer = new SfMarkdownViewer();
    markdownViewer.Settings = new MarkdownStyleSettings()
    {
        H3FontSize = "22px"
    };

TableBackground

Gets or sets the color for table background.

Declaration

public string TableBackground { get; set; }

Property Value

Type	Description
System.String	This property takes System.String instance as value and its default value is "#00000000".

Examples

Xaml
C#

    <sync:SfMarkdownViewer>
        <sync:SfMarkdownViewer.Settings>
            <sync:MarkdownStyleSettings TableBackground="#00000000" />
        </sync:SfMarkdownViewer.Settings>
    </sync:SfMarkdownViewer>

    SfMarkdownViewer markdownViewer = new SfMarkdownViewer();
    markdownViewer.Settings = new MarkdownStyleSettings()
    {
        TableBackground = "#00000000"
    };

TableDataFontSize

Gets or sets the font size for table contents.

Declaration

public string TableDataFontSize { get; set; }

Property Value

Type	Description
System.String	This property takes System.String instance as value and its default value is "14px".

Examples

Xaml
C#

    <sync:SfMarkdownViewer>
        <sync:SfMarkdownViewer.Settings>
            <sync:MarkdownStyleSettings TableDataFontSize="14px" />
        </sync:SfMarkdownViewer.Settings>
    </sync:SfMarkdownViewer>

    SfMarkdownViewer markdownViewer = new SfMarkdownViewer();
    markdownViewer.Settings = new MarkdownStyleSettings()
    {
        TableDataFontSize = "14px"
    };

TableDataTextColor

Gets or sets the text color for table contents.

Declaration

public string TableDataTextColor { get; set; }

Property Value

Type	Description
System.String	This property takes System.String instance as value and its default value is "#1C1B1F".

Examples

Xaml
C#

    <sync:SfMarkdownViewer>
        <sync:SfMarkdownViewer.Settings>
            <sync:MarkdownStyleSettings TableDataTextColor="#1C1B1F" />
        </sync:SfMarkdownViewer.Settings>
    </sync:SfMarkdownViewer>

    SfMarkdownViewer markdownViewer = new SfMarkdownViewer();
    markdownViewer.Settings = new MarkdownStyleSettings()
    {
        TableDataTextColor = "#1C1B1F"
    };

TableHeaderFontSize

Gets or sets the font size for table header elements.

Declaration

public string TableHeaderFontSize { get; set; }

Property Value

Type	Description
System.String	This property takes System.String instance as value and its default value is "14px".

Examples

Xaml
C#

    <sync:SfMarkdownViewer>
        <sync:SfMarkdownViewer.Settings>
            <sync:MarkdownStyleSettings TableHeaderFontSize="14px" />
        </sync:SfMarkdownViewer.Settings>
    </sync:SfMarkdownViewer>

    SfMarkdownViewer markdownViewer = new SfMarkdownViewer();
    markdownViewer.Settings = new MarkdownStyleSettings()
    {
        TableHeaderFontSize = "14px"
    };

TableHeaderTextColor

Gets or sets the text color for table header elements.

Declaration

public string TableHeaderTextColor { get; set; }

Property Value

Type	Description
System.String	This property takes System.String instance as value and its default value is "#1C1B1F" (dark slate gray).

Examples

Xaml
C#

    <sync:SfMarkdownViewer>
        <sync:SfMarkdownViewer.Settings>
            <sync:MarkdownStyleSettings TableHeaderTextColor="#1C1B1F" />
        </sync:SfMarkdownViewer.Settings>
    </sync:SfMarkdownViewer>

    SfMarkdownViewer markdownViewer = new SfMarkdownViewer();
    markdownViewer.Settings = new MarkdownStyleSettings()
    {
        TableHeaderTextColor = "#1C1B1F"
    };

Methods

ResetToDefaults()

Resets all markdown style settings to their default values. This method restores the original styling configuration by extracting default values directly from the bindable property definitions, ensuring consistency with the initial property states.

Declaration

public void ResetToDefaults()

Remarks

This method resets the following properties to their defaults: - All heading styles (H1, H2, H3 font sizes and colors) - Body text styling (color and font size) - Table styling (header/row colors, font sizes, and background) - Custom CSS styles

The reset operation triggers property change notifications, which automatically regenerates the CSS styles and updates the rendered markdown content in the viewer.

Examples

// Create styled markdown viewer
SfMarkdownViewer markdownViewer = new SfMarkdownViewer();
markdownViewer.Settings = new MarkdownStyleSettings()
{
    H1FontSize = "36px",
    H1Color = "#FF5733",
    H2FontSize = "28px",
    H2Color = "#33A1FF",
    CssStyleRules = "body { background-color: #f0f0f0; }"
};

// Later, reset all styles to defaults
markdownViewer.Settings.ResetToDefaults();

// All properties are now back to their original default values:
// H1FontSize = "28px", H1Color = "#1C1B1F", etc.