SfMarkdownViewer - CssStyleRules

[Todd Banister]

I am following the documentation on how to apply custom CSS Styles for tables to the SfMarkdownViewer and the XAML currently looks like the following:

<?xml version="1.0" encoding="utf-8"?>

<ContentPage 
    x:Class="UpFrontHq.Mobile.SolitaireRulesPage" 
    Title="Up Front HQ: Scenario Designer"
    Shell.TitleColor="{DynamicResource Title}"
    Shell.ForegroundColor="{DynamicResource Hamburger}"
    Shell.BackgroundColor="{DynamicResource ContentBg}"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:sfMarkdown="clr-namespace:Syncfusion.Maui.MarkdownViewer;assembly=Syncfusion.Maui.MarkdownViewer">
    
    <ContentPage.Resources>
        <ResourceDictionary>
            <x:String x:Key="MdStyle">
                table {
                background: #FAFBFC;
                border-collapse: collapse;
                margin: 16px 0;
                width: 100%;
                border-radius: 6px;
                overflow: hidden;
                }
                th, td {
                border: 1px solid #E0E4EA;
                padding: 10px 16px;
                text-align: left;
                }
                th {
                background: #EDF2FB;
                color: #193466;
                font-size: 17px;
                font-weight: 600;
                }
                tr:nth-child(even) {
                background: #F5F7FB;
                }
            </x:String>
        </ResourceDictionary>
    </ContentPage.Resources>
    
    <sfMarkdown:SfMarkdownViewer
        x:Name="mdViewer">
        <sfMarkdown:SfMarkdownViewer.Settings>
            <sfMarkdown:MarkdownStyleSettings 
                H1FontSize = "26px"
                H2FontSize="22px"
                H2Color = "#0018F9"
                BodyFontSize = "18px"
                CssStyleRules="{StaticResource MdStyle}"/>
        </sfMarkdown:SfMarkdownViewer.Settings>
    </sfMarkdown:SfMarkdownViewer>
</ContentPage>

But when I try to test the page, I receive the following error:

Error CS0246 : The type or namespace name 'px' could not be found (are you missing a using directive or an assembly reference?)

If I remove the CssStyleRules="{StaticResource MdStyle}", the page loads and renders correctly. What did I miss along the way? 

Additionally, does the MarkdownViewer allow for inline CSS formatting within the markdown? I have the following text in the md file:

<div style="text-align: center;">
**Number of Groups**
</div>

The text is not centered and the div text is also displayed in the viewer. 

Thank you very much for your time and assistance,

TB

[Vallarasu Ravichandran]

Hi Todd Banister,

 

Thank you for sharing the details with us, and we sincerely apologize for the delay and any inconvenience caused.

We have reviewed the provided code snippet and tested it on our end, and we did not encounter any issues. For your convenience, we have attached a sample implementation along with the output image for reference.

Regarding your query about inline CSS support, please note that the current version of SfMarkdownViewer does not support HTML formatting or inline CSS within markdown content. Any HTML tags or inline styles will be displayed as plain text and will not be rendered. To achieve custom styling, including alignment or table formatting, you can use the CssStyleRules property as you have done. For more information about CssStyleRules refer to Apply CSS Style Rules in .NET MAUI MarkdownViewer | Syncfusion

 

Kindly review the attached sample and confirm if the issue is resolved on your side. If you continue to experience difficulties, please share additional details about your environment and markdown content so we can assist you further.

 

Regards,

Vallarasu R.

Attachment: MarkdownSample_48d735f0.zip