Skip to content

How to customise style

whistyun edited this page Oct 25, 2021 · 2 revisions

Built-in styles (MarkdownStyleName)

MarkdownScrollViewer has MarkdownStyleName property. This property change font-size, margin, table-style, etc.

<mdxam:MarkdownScrollViewer
        MarkdownStyleName="GithubLike"
        />
StyleName image
Standard
Compact
GithubLike
Sasabune

Dark mode

For use with library that support dark mode, such as FluentWPF, Sasabune style is provided.

This style monitors the Foreground and changes severals colors to adjust for Foreground.

light mode dark mode
im

Full customise (MarkdownStyle)

MarkdownScrollViewer has MarkdownStyle property. It can change style for each control in Markdown.

For example Heading1/Heading2 is Paragraph which has "Heading1"/"Heading2" tag.

<mdxam:MarkdownScrollViewer xml:space="preserve">
    # Heading 1
    
    ## Heading 2
    
    content

    <mdxam:MarkdownScrollViewer.MarkdownStyle>
        <Style TargetType="FlowDocument">
            <Style.Resources>
                <Style TargetType="Paragraph">
                    <Style.Triggers>
                        <Trigger Property="Tag" Value="Heading1">
                            <Setter Property="FontSize"   Value="42" />
                            <Setter Property="Foreground" Value="Red" />
                            <Setter Property="FontWeight" Value="Light" />
                        </Trigger>

                        <Trigger Property="Tag" Value="Heading2">
                            <Setter Property="FontSize"   Value="20" />
                            <Setter Property="Foreground" Value="Blue" />
                            <Setter Property="FontWeight" Value="Light" />
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Style.Resources>
        </Style>
    </mdxam:MarkdownScrollViewer.MarkdownStyle>
</mdxam:MarkdownScrollViewer>

If you want include build-in style, use Style.BasedOn please.

<Style 
    TargetType="FlowDocument"
    BasedOn="{x:Static mdxam:MarkdownStyle.Standard}">
    <Style.Resources>
        <Style TargetType="Paragraph">
            <Setter Property="Margin" Value="4, 2, 0, 6"/>
            <Style.Triggers>
                <Trigger Property="Tag" Value="Heading1">
                    <Setter Property="FontSize"   Value="42" />
                    <Setter Property="Foreground" Value="Red" />
                    <Setter Property="FontWeight" Value="Light" />
                    <Setter Property="Margin" Value="0"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Style.Resources>
</Style>

The existing style can be look here.
[MdXaml] https://github.com/whistyun/MdXaml/blob/master/MdXaml/Markdown.Style.xaml
[MdXaml_migfree] https://github.com/whistyun/MdXaml/blob/master/MdXaml/MarkdownMigFree.Style.xaml