-
Notifications
You must be signed in to change notification settings - Fork 26
How to use
whistyun edited this page Jul 8, 2023
·
5 revisions
Markdown.Avalonia supports three methods to render markdown.
- Load .md from AvaloniaResource
- Write markdown in xaml
- With binding
- Setup AvaloniaEdit for syntax hightlighting
MarkdownScrollViewer.Source
accept url.
if you set avares, http or file to this property.
MarkdownScrollViewer reference it and render it.
.csproj
...
<ItemGroup>
<AvaloniaResource Include="MdTxt\Test.md" />
</ItemGroup>
...
.axaml
<UserControl xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:md="https://github.com/whistyun/Markdown.Avalonia"
x:Class="HowToUse.WriteMarkdownInXaml">
<md:MarkdownScrollViewer
Source="avares://YourAssemblyName/MdTxt/Test.md"/>
</UserControl>
MarkdownScrollViewer's Content accept indented markdown.
indent-processing-rule is similar to flexible_heredoc_nowdoc_syntaxes
in PHP7.3: the indentation of the closing tag dictates the amount of whitespace to strip from each line.
<UserControl xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:md="https://github.com/whistyun/Markdown.Avalonia"
x:Class="HowToUse.WriteMarkdownInXaml">
<md:MarkdownScrollViewer xml:space="preserve">
# Heading1
Hello Markdown.Avalonia!
* listitem1
* listitem2
| col1 | col2 | col3 |
|------|------|------|
| one |------|------|
| two |------|------|
</md:MarkdownScrollViewer>
</UserControl>
If you want to change the content dinamically ( for example view help text for user selected content), I suggest to use binding.
MarkdownScrollViewer has Markdown
property to use binding.
xaml
<UserControl xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:HowToUse;assembly=HowToUse"
xmlns:md="https://github.com/whistyun/Markdown.Avalonia"
x:Class="HowToUse.WriteMarkdownInXaml">
<UserControl.DataContext>
<local:UseBindingViewModel/>
</UserControl.DataContext>
<md:MarkdownScrollViewer
Markdown="{Binding MdText}"/>
</UserControl>
viewmodel
using ReactiveUI;
namespace HowToUse
{
public class UseBindingViewModel : ReactiveObject
{
private string _MdText;
public string MdText
{
get => _MdText;
set => this.RaiseAndSetIfChanged(ref _MdText, value);
}
}
}