Markdown.Avalonia

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));
    }
}

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%

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%

• 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.

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

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

• 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.

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>

#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.

https://github.com/whistyun/Markdown.Avalonia/pull/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>

Bug fix for...

• TextEditor vertical scrollbar is visible when TextEditor has some height. #57
• ArrayIndexOutOfException is occured when the text which ends with a line break is inputed..

In v0.10.6 the rendering method has changed for drawing emoji.

fix #49

When using custom themes with relative path, MarkdownScrollViewer threw InvalidOperatedException(#46).
This release fix it.

This version uses AvaloniaEdit when the language to be used for syntax highlighting is defined.

light theme	dark theme

For compatibility, TextBlock will continue to be used if no language is defined.

• Enable to include codeblock in list.
• Allow codeblock to display a horizontal scroll viewer when it is too narrow to display all contents.

• CTextBlock has new properties; "TextVerticalAlignment", "LineHeight" and "LineSpacing".
  These properties custormize text placement.
  
• If MarkdownScrollViewer.SaveScrollValueWhenContentUpdated is set as true, This save scroll value even if content is changed.
• Partially implemented character-based wrapping. However whitespaces are preferentially wrapped.
  If we mix CJK words and whitespaces, there may be line breaks at unexpected positions.
  

This version autodetect used theme (Default, Fluent), and change style to fit it.
You use the dark-theme without style change.

... and make the rule of list maker strict for unexpected treating like as "Yes. ...".
In particular

1. roman number order must start with 'i,' ～ 'iii,'. and disallow other character than [cdilmvx].
2. alphabet order must start with 'a,' ～ 'c,'. and, in grammatically, list markers with two or more characters are disallowd (display is allowed).

image width auto fitting when protrude outside Control.

image width auto fitting when protrude outside Control.