Afficher le contenu Markdown

Précédent : Résultats des commandes

La palette de commandes prend en charge l’affichage de contenu enrichi au-delà des listes de commandes simples. Vous pouvez créer des extensions qui affichent du texte mis en forme, de la documentation et du contenu interactif à l’aide de Markdown. Cette fonctionnalité est particulièrement utile pour :

• Affichage de la documentation d’aide ou des guides utilisateur
• Affichage des aperçus de fichiers ou des résumés
• Fourniture d’instructions ou de didacticiels mis en forme
• Création de contenu interactif avec des commandes incorporées

Cet article vous montre comment créer des pages qui affichent du contenu markdown dans votre extension de palette de commandes.

Jusqu’à présent, nous n’avons montré comment afficher une liste de commandes dans un ListPage. Toutefois, vous pouvez également afficher du contenu enrichi dans votre extension, tel que Markdown. Cela peut être utile pour afficher la documentation ou un aperçu d’un document.

Travailler avec du contenu markdown

IContentPage (et son implémentation de boîte à outils, ContentPage) est la base pour afficher tous les types de contenu enrichi dans la palette de commandes. Pour afficher du contenu Markdown, vous pouvez utiliser la classe MarkdownContent .

1. Dans le Pages répertoire, ajoutez une nouvelle classe
2. Nommez la classe MarkdownPage.cs
3. Mettez à jour le fichier pour :

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. Ouvrir <ExtensionName>CommandsProvider.cs
2. Remplacez les CommandItem par les MarkdownPage.

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

1. Déployer votre extension
2. Dans la palette de commandes, Reload

Dans cet exemple, un nouveau ContentPage qui affiche une chaîne markdown simple est créé. La classe « MarkdownContent » prend une chaîne de contenu Markdown et la restitue dans la palette de commandes.

Vous pouvez également ajouter plusieurs blocs de contenu à une page. Par exemple, vous pouvez ajouter deux blocs de contenu Markdown.

1. Mettez à jour 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. Déployer votre extension
2. Dans la palette de commandes, Reload

Cela vous permet de combiner et de faire correspondre différents types de contenu sur une seule page.

Ajout de CommandContextItem

Vous pouvez également ajouter des commandes à un ContentPage. Cela vous permet d'ajouter des commandes supplémentaires qui peuvent être appelées par l'utilisateur dans le contexte du contenu. Par exemple, si vous aviez une page qui affichait un document, vous pouvez ajouter une commande pour ouvrir le document dans l’Explorateur de fichiers :

1. Dans votre <ExtensionNamePage.cs>, ajoutez doc_path, Commands et 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. Mettez à jour le chemin d’accès dans doc_path vers un fichier .txt sur votre ordinateur local
2. Déployer votre extension
3. Dans la palette de commandes, Reload
4. Sélectionner <ExtensionName>
5. Appuyez sur Enter la touche, la documentation doit s’ouvrir

Ajouter des images au contenu Markdown

Avec la palette de commandes dans PowerToys la version 0.95 et ultérieure, vous pouvez ajouter des images à votre contenu Markdown à partir de sources supplémentaires à l’aide de l’un des schémas suivants :

• Schéma de fichiers : permet de charger des images à l’aide du file: schéma.
  • Ce schéma limite intentionnellement les URI de fichier aux chemins absolus pour garantir une résolution correcte lorsqu’elles sont transmises par l’extension de palette de commandes/la limite de l’hôte. Dans la plupart des cas, les extensions tierces fournissent les chemins d’accès. Toutefois, l’hôte de palette de commandes effectue le chargement réel et résout les chemins d’accès par rapport à lui-même.
• Schéma de données : permet de charger des images à partir d’URI avec le schéma data: (formes codées en Base64 et encodées en URL).
  • Remarque : Avant les modifications introduites dans PowerToys la version 0.95 et ultérieures, le contrôle Markdown peut se bloquer ou ne répondre pas lors du traitement d’une entrée très volumineuse, telle que des images supérieures à 5 Mo ou avec des dimensions supérieures à 4 000×4000 pixels, ou des fichiers markdown dépassant 1 Mo de taille. Même avec les modifications, il est recommandé de conserver les tailles de fichier image inférieures à 5 Mo et de redimensionner les images en dimensions raisonnables avant l’incorporation. Pour obtenir des résultats optimaux, compressez des images et fractionnez du contenu markdown très volumineux en sections plus petites si possible.
• ms-appx système : Ce système est désormais pris en charge pour l'importation des images.
  • Remarque : Étant donné que l’hôte de palette de commandes effectue le chargement, ms-appx: la résolution s’applique à l’hôte et non aux extensions, ce qui limite son utilité.
• ms-appdata protocole : ce protocole est maintenant pris en charge pour le chargement d'images.
  • Similaire à ms-appx:, ms-appdata: la résolution s’applique à l’hôte, et non aux extensions. Cela limite son utilité pour les extensions tierces.

En outre, la palette de commandes dans PowerToys la version 0.95 et ultérieures introduit le concept d'indications de source d’image, mises en œuvre sous forme de paramètres de chaîne de requête ajoutés à l'URI d'origine.

Ces indicateurs permettent aux développeurs d’extensions d’influencer le comportement des images dans le contenu markdown.

• --x-cmdpal-fit
  • none: Aucune mise à l’échelle automatique, fournit une image telle qu’elle est (par défaut)
  • fit: mise à l’échelle pour s’adapter à l’espace disponible
• --x-cmdpal-upscale
  • true: Autoriser la mise à l’échelle
  • false: Mise à l’échelle descendante uniquement (valeur par défaut)
• --x-cmdpal-width: Largeur souhaitée en pixels
• --x-cmdpal-height: hauteur souhaitée en pixels
• --x-cmdpal-maxwidth: Largeur maximale en pixels
• --x-cmdpal-maxheight: hauteur maximale en pixels

Consultez la page SampleMarkdownImages dans l’exemple de projet générique SamplePagesExtension dans le référentiel GitHub pour obtenir des exemples d’utilisation d’images dans le PowerToys contenu markdown de votre extension.

Étape suivante : Obtenir une entrée utilisateur avec des formulaires

Contenu connexe

• PowerToys Utilitaire de la palette de commandes
• Vue d’ensemble de l’extensibilité
• Exemples d’extensions