Supports text selection, copy button in a code block and header scroll event

Text Selection

MarkdownScrollViewer has new property SelectionEnabled to enable text selection.

<!-- xmlns:md="https://github.com/whistyun/Markdown.Avalonia" -->
<md:MarkdownScrollViewer SelectionEnabled="True"
    ...
    />

At the moment, only plain text copies are provided due to functional limitations of the Avalonia.

Copy button in a code block

This package display a lang and copy button.

A button label can be changed using Style.

<Styles xmlns="https://github.com/avaloniaui">
  <Style Selector=".CodeBlock Button.CopyButton TextBlock">
    <Setter Property="Text" Value="📋"/>
  </Style>
</Styles>

Header scroll event

MarkdownScrollViewer has new event HeaderScrolled to notify that the header has been scrolled.

MainWindow.axaml:

<!-- xmlns:md="https://github.com/whistyun/Markdown.Avalonia" -->

<Label x:Name="Breadcrumb"
    />

<md:MarkdownScrollViewer
    HeaderScrolled="HeaderScrolled"
    ...
    />

MainWindow.axaml.cs

public partial class MainWindow : Window
{
    private Label _breadcrumb;

    private void HeaderScrolled(object sender, HeaderScrolledEventArgs args)
    {
        _breadcrumb.Content = string.Join(" > ", args.Tree.Select(tag => tag.Text));
    }
}

Add Plugin IFs and syntaxes

Plugin IF

A new plugin IF is provided that adds extended syntax and image format resolvers.
This project provides the following plugins.

• Markdown.Avalonia.Svg: Supports SVG image format.
• Markdown.Avalonia.Html: Supports HTML tags (not complete. Only some tags are supported)
• Markdown.Avalonia.SyntaxHigh: Customise syntax highlighting rules.

New syntax

Markdown.Avalonia has color-text syntax; eg. %{color:red}colortext%.
From this version, you can add background indication.

This means that the following notations will be available.

1. %{ color : red ; background : yellow }some word%
2. %{ background : yellow ; color : red }some word%
3. %{color : red}some word%
4. %{background: yellow}some word%

Add Plugin IFs and syntaxes

Plugin IF

A new plugin IF is provided that adds extended syntax and image format resolvers.
This project provides the following plugins.

• Markdown.Avalonia.Svg: Supports SVG image format.
• Markdown.Avalonia.Html: Supports HTML tags (not complete. Only some tags are supported)
• Markdown.Avalonia.SyntaxHigh: Customise syntax highlighting rules.

New syntax

Markdown.Avalonia has color-text syntax; eg. %{color:red}colortext%.
From this version, you can add background indication.

This means that the following notations will be available.

1. %{ color : red ; background : yellow }some word%
2. %{ background : yellow ; color : red }some word%
3. %{color : red}some word%
4. %{background: yellow}some word%

Support AvaloniaUI 11.0.0-preview6

If you use neither Avalonia.Themes.Simple nor Avalonia.Theme.Fluent, Markdown.Avalonia will not be able to add style for AvaloniaEdit. This means that the code with syntax highlighting will not be displayed.

Please add SimpleTheme or FluentTheme to App.xaml, or some style for AvaloniaEdit.

https://github.com/whistyun/Markdown.Avalonia/wiki/Setup-AvaloniaEdit-for-syntax-hightlighting

Add feature for visual.

• Supports customization of language detection for syntax highlighting.
• Auto-scaling column width based on content width.

Supports customization of language detection for syntax highlighting.

It is possible to use a predefined language name as another name language or declare a language name with an xshd resource.

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

<md:MarkdownScrollViewer>
  <md:MarkdownScrollViewer.Plugins>
    <md:MdAvPlugins>
      <mde:SyntaxHiglight>
        <!-- When using a defined language name as another named language name -->
        <mde:Alias Name="ts"  RealName="js" />
        <!-- When declaring new language name with xshd resource -->
        <mde:Alias Name="peg" XSHD="avares://Markdown.AvaloniaDemo/Assets/Pegasus-Mode.xshd" />
      </mde:SyntaxHiglight>
    </md:MdAvPlugins>
  </md:MarkdownScrollViewer.Plugins>
</md:MarkdownScrollViewer>

Auto-scaling column width based on content width.

Bugfix and support FluentAvalonia

• Displaying the first bold word in an unordered list correctly. whistyun/MdXaml#52
• Change a font used in codeblocks monospaced. #90
• Markdown.Avalonia detects FluentAvalonia and changes a style.

Bugfix

• Displaying the first bold word in an unordered list correctly. whistyun/MdXaml#52
• Change a font used in codeblocks monospaced. #90

New property `UseResource`

In v0.10.12 and v11.0.0-a4, We add the UseResource property.
If this property is set to True, Markdown.Avalonia looks for images from Resources.
The value, which is set to Resources, should be Avalonia.Media.Imaging.Bitmap or Avalonia.Controls.Control

If there is no image in Resources, Markdown.Avalonia searches using the same rules as before.

example

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

<Panel>
  <Panel.Resources>
    <Image x:Key="MyImage" Source="/Assets/ResourceImage.png"/>
  </Panel.Resources>
  
  <md:MarkdownScrollViewer UseResource="True" xml:space="preserve">
    <md:MarkdownScrollViewer.Resources>
      <Button x:Key="MyButton" Content="Hello Button"/>
    </md:MarkdownScrollViewer.Resources>
    
    ## Image ##
    
    ![](MyButton)  
    
    ![](MyImage)
    
  </md:MarkdownScrollViewer>
</Panel>

To be able to remove the dependency of AvaloniaEdit

#65

we provide Markdown.Avalonia.Tight and Markdown.Avalonia.SyntaxHigh.
Markdown.Avalonia.Tight removes the dependency of AvaloniaEdit.
Markdown.Avalonia.SyntaxHigh injects the dependency to Markdown.Avalonia.Tight.

If you want to remove the dependency of AvaloniaEdit, use Markdown.Avalonia.Tight.
Markdown.Avalonia continues to provide Syntaxhightling.

New feature: BlockContainer partial support

#60

This is partial support of https://talk.commonmark.org/t/generic-directives-plugins-syntax/444.
This feature allows to expand markdown functionality with pluggable content handling.

markdown syntax

::: plugin_name
some lines
:::

How to include one plugin.

<reactiveUi:ReactiveUserControl.Resources>
    <markdownEx:MyBlockHandler x:Key="myBlockHandler"/>
</reactiveUi:ReactiveUserControl.Resources>
<md:MarkdownScrollViewer>
    <md:MarkdownScrollViewer.Engine>
        <md:Markdown
                ContainerBlockBlockHandler="{StaticResource myBlockHandler}"/>
    </md:MarkdownScrollViewer.Engine>
</md:MarkdownScrollViewer>

How to include more plugins.

<md:MarkdownScrollViewer>
    <md:MarkdownScrollViewer.Engine>
        <md:Markdown>
            <md:Markdown.ContainerBlockHandler>
                <md:ContainerSwitch>
                    <markdownEx:MyBlockHandler1 x:Key="plugin_name1"/>
                    <markdownEx:MyBlockHandler2 x:Key="plugin_name2"/>
                    <markdownEx:MyBlockHandler3 x:Key="plugin_name3"/>
                </md:ContainerSwitch>
            </md:Markdown.ContainerBlockHandler>
        </md:Markdown>
    </md:MarkdownScrollViewer.Engine>
</md:MarkdownScrollViewer>