Wyświetlanie zawartości markdown

Poprzedni: Wyniki poleceń

Paleta poleceń obsługuje zaawansowane wyświetlanie zawartości poza prostymi listami poleceń. Można tworzyć rozszerzenia, które wyświetlają sformatowany tekst, dokumentację i zawartość interaktywną przy użyciu języka Markdown. Ta funkcja jest szczególnie przydatna w następujących celach:

• Wyświetlanie dokumentacji pomocy lub przewodników użytkownika
• Wyświetlanie podglądów lub podsumowań plików
• Dostarczanie sformatowanych instrukcji lub samouczków
• Tworzenie interaktywnej zawartości za pomocą poleceń osadzonych

W tym artykule pokazano, jak tworzyć strony, które wyświetlają zawartość w formacie markdown w rozszerzeniu 'Palety poleceń'.

Do tej pory pokazaliśmy tylko, jak wyświetlić listę poleceń w programie ListPage. Można jednak wyświetlić również bogatą zawartość w rozszerzeniu, np. za pomocą markdown. Może to być przydatne w przypadku wyświetlania dokumentacji lub podglądu dokumentu.

Praca z zawartością markdown

IContentPage (i jego implementacja zestawu narzędzi ContentPage) jest bazą do wyświetlania wszystkich typów bogatej zawartości w palecie poleceń. Aby wyświetlić zawartość markdown, możesz użyć klasy MarkdownContent .

1. Pages W katalogu dodaj nową klasę
2. Nadaj klasie nazwę MarkdownPage.cs
3. Zaktualizuj plik do:

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. Otwórz <ExtensionName>CommandsProvider.cs
2. Zastąp CommandItems na MarkdownPage.

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

1. Wdrażanie rozszerzenia
2. W palecie poleceń, Reload

W tym przykładzie zostanie utworzony nowy ContentPage, który wyświetla prosty ciąg markdown. Klasa "MarkdownContent" przyjmuje ciąg zawartości markdown i renderuje ją w palecie poleceń.

Do strony można również dodać wiele bloków zawartości. Można na przykład dodać dwa bloki zawartości markdown.

1. Aktualizacja 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. Wdrażanie rozszerzenia
2. W palecie poleceń, Reload

Umożliwia to mieszanie i dopasowywanie różnych typów zawartości na jednej stronie.

Dodawanie elementu CommandContextItem

Możesz również dodać polecenia do elementu ContentPage. Dzięki temu, w kontekście zawartości, można dodawać dodatkowe polecenia, które mają być wywoływane przez użytkownika. Jeśli na przykład masz stronę, na której został wyświetlony dokument, możesz dodać polecenie, aby otworzyć dokument w Eksploratorze plików:

1. W pliku Page.cs<ExtensionName> dodaj elementy doc_path, Commands i 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. Zaktualizuj ścieżkę w doc_path na plik .txt na swoim komputerze lokalnym.
2. Wdrażanie rozszerzenia
3. W palecie poleceń, Reload
4. Wybierz <ExtensionName>
5. Naciśnij Enter , a dokumenty powinny zostać otwarte

Dodawanie obrazów do zawartości markdown

Za pomocą palety poleceń w wersji PowerToys 0.95 lub nowszej można dodawać obrazy do zawartości markdown z dodatkowych źródeł przy użyciu jednego z następujących schematów:

• Schemat plików: umożliwia ładowanie obrazów przy użyciu schematu file: .
  • Ten schemat celowo ogranicza identyfikatory URI plików do ścieżek bezwzględnych, aby zapewnić właściwe rozpoznanie po przekroczeniu granicy rozszerzenia/hosta palety poleceń. W większości przypadków rozszerzenia innych firm udostępniają ścieżki. Jednak host palety poleceń wykonuje rzeczywiste ładowanie i w przeciwnym razie rozwiąże ścieżki względem siebie.
• Schemat danych: umożliwia ładowanie obrazów z identyfikatorów URI za pomocą schematu data: (formularzy zakodowanych w formacie Base64 i URL).
  • Uwaga: Przed wprowadzeniem zmian w PowerToys wersji 0,95 lub nowszej kontrolka markdown może zawieszać się lub nie odpowiadać podczas przetwarzania bardzo dużych danych wejściowych, takich jak obrazy większe niż 5 MB lub wymiary przekraczające 4000×4000 pikseli lub pliki markdown przekraczające 1 MB rozmiaru. Nawet w przypadku zmian zaleca się zachować rozmiary plików obrazów poniżej 5 MB i zmienić rozmiar obrazów na rozsądne wymiary przed osadzeniem. Aby uzyskać najlepsze wyniki, kompresuj obrazy i podziel bardzo dużą zawartość markdown na mniejsze sekcje, jeśli to możliwe.
• ms-appx scheme: Ten schemat jest teraz obsługiwany do ładowania obrazów.
  • Uwaga: Ponieważ host palety poleceń wykonuje ładowanie, ms-appx: rozwiązanie dotyczy hosta, a nie rozszerzeń, co ogranicza jego użyteczność.
• ms-appdata scheme: Ten protokół jest teraz obsługiwany do ładowania obrazów.
  • Podobnie jak ms-appx:, rozwiązanie ms-appdata: dotyczy hosta, a nie rozszerzeń. Ogranicza to jego użyteczność dla rozszerzeń innych firm.

Ponadto paleta poleceń w wersji PowerToys 0.95 i nowszych wprowadza koncepcję wskazówek źródła obrazów zaimplementowanych jako parametry ciągu zapytania oparte na oryginalnym identyfikatorze URI.

Te wskazówki umożliwiają deweloperom rozszerzeń wywieranie wpływu na zachowanie obrazów w zawartości markdown.

• --x-cmdpal-fit
  • none: Brak automatycznego skalowania, wyświetla obraz w oryginalnej postaci (wartość domyślna)
  • fit: Skalowanie w celu dopasowania do dostępnego miejsca
• --x-cmdpal-upscale
  • true: Zezwalaj na skalowanie upscaling
  • false: Tylko skalowanie w dół (ustawienie domyślne)
• --x-cmdpal-width: Żądana szerokość w pikselach
• --x-cmdpal-height: żądana wysokość w pikselach
• --x-cmdpal-maxwidth: Maksymalna szerokość w pikselach
• --x-cmdpal-maxheight: Maksymalna wysokość w pikselach

Zobacz stronę SampleMarkdownImages w przykładowym projekcie SamplePagesExtension w PowerToys repozytorium GitHub, aby zapoznać się z przykładami używania obrazów w zawartości markdown rozszerzenia.

Dalej: pobieranie danych wejściowych użytkownika za pomocą formularzy

Treści powiązane

• PowerToys Narzędzie Paleta poleceń
• Omówienie rozszerzalności
• Przykłady rozszerzeń