Anzeige von Markdown-Inhalt

Zurück: Befehlsergebnisse

Die Befehlspalette unterstützt umfassende Inhaltsanzeigen über einfache Befehlslisten hinaus. Sie können Erweiterungen erstellen, die formatierten Text, Dokumentationen und interaktive Inhalte mithilfe von Markdown anzeigen. Diese Funktion ist besonders nützlich für:

• Anzeigen von Hilfedokumentationen oder Benutzerhandbüchern
• Anzeigen von Dateivorschauen oder Zusammenfassungen
• Bereitstellen von formatierten Anweisungen oder Lernprogrammen
• Erstellen interaktiver Inhalte mit eingebetteten Befehlen

In diesem Artikel erfahren Sie, wie Sie Seiten erstellen, die Markdowninhalte in der Befehlspalettenerweiterung anzeigen.

Bisher haben wir nur gezeigt, wie eine Liste von Befehlen in einer ListPage angezeigt wird. Sie können jedoch auch umfangreiche Inhalte in Ihrer Erweiterung anzeigen, z. B. Markdown. Dies kann hilfreich sein, um die Dokumentation oder eine Vorschau eines Dokuments anzuzeigen.

Arbeiten mit Markdowninhalten

IContentPage (und seine Toolkitimplementierung ContentPage) ist die Basis für die Anzeige aller Arten von umfangreichen Inhalten in der Befehlspalette. Zum Anzeigen von Markdowninhalten können Sie die MarkdownContent-Klasse verwenden.

1. Fügen Sie im Pages Verzeichnis eine neue Klasse hinzu.
2. Benennen der Klasse MarkdownPage.cs
3. Aktualisieren Sie die Datei auf:

using Microsoft.CommandPalette.Extensions;
using Microsoft.CommandPalette.Extensions.Toolkit;
using System.Text.Json.Nodes;

internal sealed partial class MarkdownPage : ContentPage
{
    public MarkdownPage()
    {
        Icon = new("\uE8A5"); // Document icon
        Title = "Markdown page";
        Name = "Preview file";
    }

    public override IContent[] GetContent()
    {
        return [
            new MarkdownContent("# Hello, world!\n This is a **markdown** page."),
        ];
    }
}

1. <ExtensionName>CommandsProvider.cs öffnen
2. Ersetzen Sie die CommandItems für folgendes:MarkdownPage

public <ExtensionName>CommandsProvider()
{
    DisplayName = "My sample extension";
    Icon = IconHelpers.FromRelativePath("Assets\\StoreLogo.png");
    _commands = [
+       new CommandItem(new MarkdownPage()) { Title = DisplayName },
    ];
}

1. Stellen Sie Ihre Erweiterung bereit
2. In der Befehlspalette, Reload

In diesem Beispiel wird eine neue ContentPage , die eine einfache Markdownzeichenfolge anzeigt, erstellt. Die "MarkdownContent"-Klasse akzeptiert eine Zeichenfolge von Markdown-Inhalten und rendert sie in der Befehlspalette.

Sie können einer Seite auch mehrere Inhaltsblöcke hinzufügen. Sie können beispielsweise zwei Blöcke von Markdowninhalten hinzufügen.

1. Aktualisieren Sie GetContent:

public override IContent[] GetContent()
{
    return [
        new MarkdownContent("# Hello, world!\n This is a **markdown** page."),
+       new MarkdownContent("## Second block\n This is another block of content."),
    ];
}

1. Bereitstellen Ihrer Erweiterung
2. In der Befehlspalette, Reload

Auf diese Weise können Sie verschiedene Inhaltstypen auf einer einzelnen Seite kombinieren und abgleichen.

Hinzufügen von CommandContextItem

Sie können auch Befehle zu einem ContentPage hinzufügen. Auf diese Weise können dem Benutzer zusätzliche Befehle zum Ausführen im Kontext des Inhalts bereitgestellt werden. Wenn Sie beispielsweise eine Seite hatten, auf der ein Dokument angezeigt wurde, könnten Sie einen Befehl hinzufügen, um das Dokument im Datei-Explorer zu öffnen:

1. In Ihrer <ExtensionName>Page.cs fügen Sie hinzu: doc_path, Commands und MarkdownContent.

public class <ExtensionName>Page : ContentPage
{
+   private string doc_path = "C:\\Path\\to\\file.txt";
    public <ExtensionName>Page()
    {
        Icon = new("\uE8A5"); // Document icon
        Title = "Markdown page";
        Name = "Preview file";

+       Commands = [
+           new CommandContextItem(new OpenUrlCommand(doc_path)) { Title = "Open in File Explorer" },
+       ];
    }
    public override IContent[] GetContent()
    {
        return [
            new MarkdownContent("# Hello, world!\n This is a **markdown** document."),
            new MarkdownContent("## Second block\n This is another block of content."),
+           new MarkdownContent($"## Press enter to open `{doc_path}`"),
        ];
    }
}

1. Aktualisieren des Pfads in der doc_path .txt-Datei auf Ihrem lokalen Rechner
2. Erweiterung bereitstellen
3. In der Befehlspalette, Reload
4. Erweiterungsname auswählen <>
5. Drücken Sie Enter die TASTE, die Dokumente sollten geöffnet werden.

Hinzufügen von Bildern zum Markdowninhalt

Mit der Befehlspalette in PowerToys 0.95 und höher können Sie Ihren Markdowninhalten Bilder aus zusätzlichen Quellen hinzufügen, indem Sie eines der folgenden Schemas verwenden:

• Dateischema: Ermöglicht das Laden von Bildern mithilfe des file: Schemas.
  • Dieses Schema schränkt Datei-URIs absichtlich auf absolute Pfade ein, um die korrekte Auflösung sicherzustellen, wenn sie durch die Grenze der Befehlspalettenerweiterung und des Hosts übermittelt werden. In den meisten Fällen stellen Drittanbietererweiterungen die Pfade bereit. Der Befehlspalettenhost führt jedoch das eigentliche Laden durch und löst ansonsten Pfade relativ zu sich selbst auf.
• Datenschema: Ermöglicht das Laden von Bildern aus URIs mit dem data: Schema (sowohl Base64- als auch URL-codierte Formulare).
  • Hinweis: Bevor die in 0,95 und höher eingeführten Änderungen vorgenommen wurden PowerToys , kann das Markdown-Steuerelement hängen oder nicht mehr reagieren, wenn sehr große Eingaben verarbeitet werden, z. B. Bilder, die größer als 5 MB sind, oder mit Dimensionen, die 4000×4000 Pixel überschreiten, oder Markdowndateien mit einer Größe von mehr als 1 MB. Selbst bei den Änderungen wird empfohlen, die Bilddateigrößen unter 5 MB beizubehalten und die Größe von Bildern vor dem Einbetten auf angemessene Abmessungen zu ändern. Um optimale Ergebnisse zu erzielen, komprimieren Sie Bilder, und teilen Sie möglichst große Markdowninhalte in kleinere Abschnitte auf.
• ms-appx Schema: Dieses Schema wird jetzt für das Laden von Bildern unterstützt.
  • Hinweis: Da der Befehlspalettenhost das Laden ausführt, ms-appx: gilt die Auflösung für den Host und nicht für die Erweiterungen, die ihre Nützlichkeit einschränken.
• ms-appdata Schema: Dieses Schema wird jetzt für das Laden von Bildern unterstützt.
  • Ähnlich wie ms-appx:die ms-appdata: Auflösung gilt für den Host, nicht für die Erweiterungen. Dies beschränkt seine Nützlichkeit für Drittanbietererweiterungen.

Darüber hinaus führt die Befehlspalette in PowerToys 0.95 und später das Konzept von Bildquellenhinweisen ein, die als Abfragezeichenfolgenparameter an den ursprünglichen URI angehängt implementiert werden.

Mit diesen Hinweisen können Erweiterungsentwickler das Verhalten von Bildern innerhalb des Markdowninhalts beeinflussen.

• --x-cmdpal-fit
  • none: Keine automatische Skalierung, stellt das Bild wie (Standard) bereit.
  • fit: Skalieren, um auf den verfügbaren Platz zu passen
• --x-cmdpal-upscale
  • true: Upscaling zulassen
  • false: Nur Herunterskalierung (Standardwert)
• --x-cmdpal-width: Gewünschte Breite in Pixeln
• --x-cmdpal-height: Gewünschte Höhe in Pixeln
• --x-cmdpal-maxwidth: Maximale Breite in Pixeln
• --x-cmdpal-maxheight: Maximale Höhe in Pixeln

Beispiele für die Verwendung von Bildern im Markdown-Inhalt Ihrer Erweiterung finden Sie auf der Seite "SampleMarkdownImages " im generischen SamplePagesExtension-Beispielprojekt im PowerToys GitHub-Repository.

Nächstes: Abrufen von Benutzereingaben mit Formularen

Verwandte Inhalte

• PowerToys Befehlspalette-Tool
• Übersicht über die Erweiterbarkeit
• Erweiterungsbeispiele