Markdown içeriğini görüntüleme

Önceki: Komut Sonuçları

Komut Paleti, basit komut listelerinin ötesinde zengin içerik görüntülemeyi destekler. Markdown kullanarak biçimlendirilmiş metin, belge ve etkileşimli içerik gösteren uzantılar oluşturabilirsiniz. Bu özellik özellikle şunlar için kullanışlıdır:

• Yardım belgelerini veya kullanıcı kılavuzlarını görüntüleme
• Dosya önizlemelerini veya özetlerini gösterme
• Biçimlendirilmiş yönergeler veya öğreticiler sağlama
• Eklenmiş komutlarla etkileşimli içerik oluşturma

Bu makalede, Komut Paleti uzantınızda markdown içeriğini görüntüleyen sayfaların nasıl oluşturulacağı gösterilmektedir.

Şu ana kadar yalnızca ListPage'de komutların listesinin nasıl görüntüleneceğini gösterdik. Bununla birlikte, uzantınızda markdown gibi zengin içerikleri de görüntüleyebilirsiniz. Bu, belgeyi veya belgenin önizlemesini göstermek için yararlı olabilir.

Markdown içeriğiyle çalışma

IContentPage (ve araç seti uygulaması ContentPage), Komut Paleti'nde tüm zengin içerik türlerini görüntülemek için temeldir. Markdown içeriğini görüntülemek için MarkdownContent sınıfını kullanabilirsiniz.

1. dizinine Pages yeni bir sınıf ekleyin
2. Sınıfı adlandırın MarkdownPage.cs
3. Dosyayı şu şekilde güncelleştirin:

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. Aç <ExtensionName>CommandsProvider.cs
2. CommandItem'leri MarkdownPage ile değiştirin.

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

1. Uzantınızı dağıtın
2. Komut Paleti'nde, Reload

Bu örnekte, basit bir "markdown" dizesini görüntüleyen yeni bir ContentPage oluşturulur. 'MarkdownContent' sınıfı bir markdown içeriği dizesi alır ve bunu Komut Paleti'nde işler.

Sayfaya birden çok içerik bloğu da ekleyebilirsiniz. Örneğin, iki Markdown içeriği bloğu ekleyebilirsiniz.

1. Güncelleme 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. Uzantınızı dağıtın
2. Komut paletinde, Reload

Bu, tek bir sayfadaki farklı içerik türlerini karıştırmanıza ve eşleştirmenize olanak tanır.

CommandContextItem Ekleme

ContentPage öğesine komutlar da ekleyebilirsiniz. Bu, içerik bağlamındayken kullanıcı tarafından çağrılacak ek komutlar eklemenize olanak tanır. Örneğin, belgeyi görüntüleyen bir sayfanız varsa, belgeyi Dosya Gezgini'nde açmak için bir komut ekleyebilirsiniz:

1. <ExtensionName>Page.cs dosyasına doc_path, Commands ve MarkdownContent ekleyin:

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. içindeki doc_path yolunu yerel makinenizdeki bir .txt dosyasına güncelleştirin
2. Uzantınızı dağıtın
3. Komut Paleti'nde, Reload
4. UzantıAdı'nı seçin <>
5. Tuşuna Enter basın, belgeler açılmalıdır

Markdown içeriğine resim ekleme

0,95 ve sonraki sürümlerde PowerToys Komut Paleti ile, aşağıdaki şemalardan birini kullanarak ek kaynaklardan markdown içeriğinize görüntü ekleyebilirsiniz:

• Dosya şeması: Görüntülerin file: şeması kullanılarak yüklenmesini etkinleştirir.
  • Bu şema, dosya URI'lerini Komut Paleti uzantısı/konak sınırından geçerken doğru çözümlemeyi sağlamak amacıyla kasıtlı olarak mutlak yollarla sınırlar. Çoğu durumda, 3. taraf uzantıları yolları sağlar. Ancak, Komut Paleti ana bilgisayarı gerçek yüklemeyi gerçekleştirir ve aksi takdirde yolları kendisine göre çözümler.
• Veri düzeni: URI'lerden görüntülerin data: şemasıyla yüklenmesini sağlar (hem Base64 hem de URL ile kodlanmış formları).
  • Not: 0,95 ve üzeri sürümlerde PowerToys yapılan değişikliklerden önce, 5 MB'tan büyük veya boyutları 4000×4000 pikseli aşan görüntüler veya boyutu 1 MB'ı aşan markdown dosyaları gibi çok büyük girişler işlenirken markdown denetimi yanıt vermemeye başlayabilir veya yanıt vermemeye başlayabilir. Değişiklikler olsa bile, eklemeden önce görüntü dosyası boyutlarının 5 MB'ın altında tutulması ve görüntülerin makul boyutlara yeniden boyutlandırılması önerilir. En iyi sonuçlar için görüntüleri sıkıştırıp çok büyük markdown içeriğini mümkün olduğunca daha küçük bölümlere ayırın.
• ms-appx şema: Bu şema artık görüntülerin yüklenmesi için destekleniyor.
  • Not: Komut Paleti konağı yüklemeyi gerçekleştirdiği için ms-appx: çözünürlük, uzantılara değil konağa uygulanır, bu da yararlılığını sınırlar.
• ms-appdata şema: Bu şema artık görüntülerin yüklenmesi için destekleniyor.
  • benzer şekilde ms-appx:, ms-appdata: çözüm uzantılar için değil konak için geçerlidir. Bu, üçüncü taraf uzantılar için kullanışlılığını sınırlar.

Ayrıca, 0,95 ve sonraki sürümlerde PowerToys Komut Paleti, özgün URI'ye eklenen sorgu dizesi parametresi olarak uygulanan görüntü kaynağı ipuçları kavramını tanıtır.

Bu ipuçları, uzantı geliştiricilerinin markdown içeriğindeki görüntülerin davranışını etkilemesine olanak sağlar.

• --x-cmdpal-fit
  • none: Otomatik ölçeklendirme yok, olduğu gibi görüntü sağlar (varsayılan)
  • fit: Kullanılabilir alana sığacak şekilde ölçeklendirin
• --x-cmdpal-upscale
  • true: Yukarı ölçeklendirmeye izin ver
  • false: Yalnızca ölçek küçültme (varsayılan)
• --x-cmdpal-width: piksel cinsinden istenen genişlik
• --x-cmdpal-height: piksel cinsinden istenen yükseklik
• --x-cmdpal-maxwidth: Piksel cinsinden maksimum genişlik
• --x-cmdpal-maxheight: Piksel cinsinden maksimum yükseklik

Uzantınızın markdown içeriğindeki görüntüleri kullanma örnekleri için GitHub deposundaki SamplePagesExtension genel örnek projesinin PowerToys sayfasına bakın.

Sonraki: Formlarla kullanıcı girişi alma

İlgili içerik

• PowerToys Komut Paleti yardımcı programı
• Genişletilebilirlik genel bakış
• Uzantı örnekleri