Skip to content

How to customise style

whistyun edited this page Dec 26, 2020 · 5 revisions

Markdown.Avalonia enable apply style to elements rendered in markdown. You can set style to MarkdownScrollViewer.Styles to change it.

Sample

<!--
    xmlns:md="clr-namespace:Markdown.Avalonia;assembly=Markdown.Avalonia"
    xmlns:ctxt="clr-namespace:ColorTextBlock.Avalonia;assembly=ColorTextBlock.Avalonia"
-->

<md:MarkdownScrollViewer>
    <md:MarkdownScrollViewer.Styles>
        <Style Selector="ctxt|CTextBlock.Heading1">
            <Setter Property="Foreground" Value="AliceBlue"/>
            <Setter Property="Background" Value="DarkBlue"/>
        </Style>

        <Style Selector=".Blockquote ctxt|CTextBlock.Heading1">
            <Setter Property="FontSize" Value="13"/>
        </Style>
    </md:MarkdownScrollViewer.Styles>

    # Heading1

    ## Heading2

    The quick brown fox jumps over the lazy dog.

    > #blockquote
    > p>. and enhance syntax
</md:MarkdownScrollViewer>

Pages by elements

Simple way to check style

If you use visualstudio, AvaloniaforVisualStudio show you effect of style.

vs