Zum Inhalt
Kuonen.UI

Markdown, HTML und RTF

Links Markdown tippen, rechts erscheint das FlowDocument: Überschriften, Hervorhebungen, Code, Verweise, Listen, Zitate und Tabellen. DokumentMarkdown, DokumentHtml und DokumentRtf lesen und schreiben Dokumente; HTML und Markdown werden ohne Ausführung gelesen (Skripte und fremde Verweise fallen weg).

Vorführung: Markdown, HTML und RTFVorführung: Markdown, HTML und RTF

KXAML

MarkdownSeite.kxaml
<Grid xmlns="https://ui.kuonen.org/kxaml"
      xmlns:x="https://ui.kuonen.org/kxaml/x"
      xmlns:dok="using:Kuonen.UI.Controls.Dokumente"
      x:Class="Kuonen.UI.Galerie.Seiten.MarkdownVorfuehrung"
      Height="420" Width="720">
  <!-- Text und Kopplung füllt MarkdownSeite.Fuelle, dieselbe Methode wie die C#-Fassung. -->
  <Grid.ColumnDefinitions>
    <ColumnDefinition />
    <ColumnDefinition />
  </Grid.ColumnDefinitions>
  <TextBox x:Name="Eingabe" AcceptsReturn="True" Margin="0,0,8,0" />
  <dok:FlowDocumentScrollViewer x:Name="Vorschau" Grid.Column="1" />
</Grid>
MarkdownSeite.kxaml.cs
using Kuonen.UI;

namespace Kuonen.UI.Galerie.Seiten;

public sealed partial class MarkdownSeite
{
    protected override Func<UIElement>? KxamlFabrik => () => new MarkdownVorfuehrung();
}

/// <summary>KXAML-Fassung der Seite Markdown, HTML und RTF: das Gerüst steht in MarkdownSeite.kxaml, das Innere füllt MarkdownSeite.Fuelle.</summary>
public sealed partial class MarkdownVorfuehrung
{
    public MarkdownVorfuehrung()
    {
        InitializeComponent();
        MarkdownSeite.Fuelle(Eingabe, Vorschau);
    }
}

C#

MarkdownSeite.cs
using Kuonen.UI;
using Kuonen.UI.Controls;
using Kuonen.UI.Controls.Dokumente;
using Kuonen.UI.Layout;

namespace Kuonen.UI.Galerie.Seiten;

/// <summary>Galerie-Seite: Markdown links tippen, rechts das gesetzte Dokument (Plan 6i).</summary>
public sealed partial class MarkdownSeite : GalerieSeite
{
    public override string Titel => "Markdown, HTML und RTF";

    public override string Beschreibung =>
        "Links Markdown tippen, rechts erscheint das FlowDocument: Überschriften, Hervorhebungen, Code, Verweise, Listen, Zitate und Tabellen. DokumentMarkdown, " +
        "DokumentHtml und DokumentRtf lesen und schreiben Dokumente; HTML und Markdown werden ohne Ausführung gelesen (Skripte und fremde Verweise fallen weg).";

    public override string Stichworte => "Markdown HTML RTF FlowDocumentScrollViewer DokumentMarkdown DokumentHtml DokumentRtf Import Export Vorschau";

    public override string Datei => nameof(MarkdownSeite);

    /// <summary>Der Anfangstext der Eingabe.</summary>
    public const string Anfang =
        "# Markdown\n\nEin **fetter** und *kursiver* Text mit `Code` und einem [Verweis](https://ui.kuonen.org).\n\n- eins\n- zwei\n  - tiefer\n\n> Ein Zitat.\n\n| Ort | Tage |\n|---|---|\n| Bern | 2 |\n";

    public override UIElement Baue()
    {
        var raster = new Grid { Height = 420, Width = 720 };
        raster.ColumnDefinitions.Add(new ColumnDefinition());
        raster.ColumnDefinitions.Add(new ColumnDefinition());
        var eingabe = new TextBox { AcceptsReturn = true, Margin = new Thickness(0, 0, 8, 0) };
        var vorschau = new FlowDocumentScrollViewer();
        Grid.SetColumn(vorschau, 1);
        raster.Children.Add(eingabe);
        raster.Children.Add(vorschau);
        Fuelle(eingabe, vorschau);
        return raster;
    }

    /// <summary>Text und Kopplung (auch von der KXAML-Fassung benutzt).</summary>
    public static void Fuelle(TextBox eingabe, FlowDocumentScrollViewer vorschau)
    {
        eingabe.TextChanged += (_, _) => vorschau.Document = DokumentMarkdown.Lies(eingabe.Text);
        eingabe.Text = Anfang;
        vorschau.Document = DokumentMarkdown.Lies(eingabe.Text);
    }
}