Bagikan melalui

Tampilkan konten markdown

Sebelumnya: Hasil Perintah

Sejauh ini, kami hanya menunjukkan cara menampilkan daftar perintah dalam ListPage. Namun, Anda juga dapat menampilkan konten kaya di ekstensi Anda, seperti markdown. Ini dapat berguna untuk menampilkan dokumentasi, atau pratinjau dokumen.

Bekerja dengan konten markdown

IContentPage (dan implementasi toolkit-nya, ContentPage) adalah dasar untuk menampilkan semua jenis konten kaya di Palet Perintah. Untuk menampilkan konten markdown, Anda dapat menggunakan kelas MarkdownContent .

Sebagai contoh sederhana, kita dapat membuat halaman berikut:

Nota

Jika bekerja dari bagian sebelumnya, ubah kode di bawah ini dari MarkdownPage ke <ExtensionName>Page.

public class MarkdownPage : ContentPage
{
    public MarkdownPage()
    {
        Icon = IconHelpers.FromRelativePath("Assets\\StoreLogo.png");
        Title = "Markdown page";
    }

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

Dalam contoh ini, MarkdownPage baru yang menampilkan string markdown sederhana dibuat. Kelas MarkdownContent mengambil string konten markdown dan merendernya di Palet Perintah.

Anda juga dapat menambahkan beberapa blok konten ke halaman. Misalnya, Anda dapat menambahkan dua blok konten markdown:

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."),
    ];
}

Ini memungkinkan Anda untuk mencampur dan mencocokkan berbagai jenis konten pada satu halaman.

Menambahkan perintah

Anda juga dapat menambahkan perintah ke ContentPage. Ini memungkinkan Anda untuk menambahkan perintah tambahan untuk dipanggil oleh pengguna dalam konteks konten. Misalnya, jika Anda memiliki halaman yang menampilkan dokumen, Anda dapat menambahkan perintah untuk membuka dokumen di File Explorer:


public class MarkdownExamplePage : ContentPage
{
    public MarkdownExamplePage()
    {
        Icon = new("\uE8A5"); // Document icon
        Title = "Markdown page";
        Name = "Preview file";

        Commands = [
            new CommandContextItem(new OpenUrlCommand("C:\\Path\\to\\file.txt")) { Title = "Open in File Explorer" },
        ];
    }
    public override IContent[] GetContent()
    {
        return [
            new MarkdownContent("# Hello, world!\n This is a **markdown** document.\nI live at `C:\\Path\\to\\file.txt`"),
        ];
    }
}

Berikutnya: Mendapatkan input pengguna dengan formulir

Konten terkait