Отображение содержимого markdown

Предыдущий: Результаты команды

Палитра команд поддерживает отображение полнофункционированного содержимого за пределами простых списков команд. Вы можете создавать расширения, отображающие форматированный текст, документацию и интерактивное содержимое с помощью markdown. Эта возможность особенно полезна для:

• Отображение справочной документации или пользовательских руководств
• Отображение предварительных версий или сводок файлов
• Предоставление отформатированных инструкций или руководств
• Создание интерактивного содержимого с помощью внедренных команд

В этой статье показано, как создать страницы, отображающие содержимое markdown в расширении палитры команд.

До сих пор мы показали, как отобразить список команд в ListPage. Однако вы также можете отображать в расширении форматированный контент, например markdown. Это может быть полезно для отображения документации или предварительного просмотра документа.

Работа с содержимым Markdown

IContentPage (и его реализация набора средств , ContentPage) является основой для отображения всех типов форматированного содержимого в палитре команд. Чтобы отобразить содержимое markdown, можно использовать класс MarkdownContent .

1. В каталоге Pages добавьте новый класс
2. Имя класса MarkdownPage.cs
3. Обновите файл следующим способом:

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
2. Замените все CommandItem на MarkdownPage.

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

1. Развертывание расширения
2. В палитре команд Reload

В этом примере создается новый ContentPage, который отображает простую markdown строку. Класс MarkdownContent принимает строку содержимого markdown и отображает его в палитре команд.

Вы также можете добавить несколько блоков содержимого на страницу. Например, можно добавить два блока содержимого Markdown.

1. Обновление 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. Развертывание расширения
2. В палитре команд Reload

Это позволяет сочетать различные типы содержимого на одной странице.

Добавление CommandContextItem

Вы также можете добавить команды в объект ContentPage. Это позволяет добавлять дополнительные команды, вызываемые пользователем в контексте содержимого. Например, если у вас была страница, отображающая документ, можно добавить команду, чтобы открыть документ в проводнике:

1. В вашем файле <ExtensionName>Page.cs добавьте doc_path, Commands и 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. Обновление пути в doc_path файле .txt на локальном компьютере
2. Развертывание расширения
3. В палитре команд Reload
4. Выбор <имени расширения>
5. Нажмите клавишу Enter, документы должны открыться.

Добавьте изображения в содержимое языка разметки Markdown

С помощью палитры команд в PowerToys версии 0.95 и более поздних версий вы можете добавлять изображения в содержимое markdown из дополнительных источников с помощью одной из следующих схем:

• Схема файлов: позволяет загружать изображения, используя схему file:.
  • Эта схема намеренно ограничивает URI файлов абсолютными путями, чтобы обеспечить правильное разрешение при передаче через расширение палитры команд или границу узла. В большинстве случаев сторонние модули предоставляют пути. Однако хост палитры команд выполняет фактическую загрузку и в противном случае разрешает пути относительно себя.
• Схема данных: позволяет загружать изображения из URI, используя схему data: как в формате Base64, так и в формате URL-кодирования.
  • Примечание. До внесения изменений в PowerToys версии 0,95 и более поздних версий элемент управления markdown может зависать или не отвечать на запросы при обработке очень больших входных данных, таких как изображения размером более 5 МБ или с измерениями, превышающими 4000×4000 пикселей, или файлы markdown, превышающие 1 МБ. Даже при изменении рекомендуется сохранить размер файла изображения ниже 5 МБ и изменить размер изображений до разумных измерений перед внедрением. Для получения наилучших результатов следует выполнить сжатие изображений и разделение очень большого содержимого markdown на небольшие разделы, где это возможно.
• Теперь поддерживается схема ms-appx для загрузки изображений.
  • Примечание. Так как хост палитры команд выполняет загрузку, ms-appx: разрешение применяется к хосту, а не к расширениям, что ограничивает его полезность.
• Теперь поддерживается схема ms-appdata для загрузки изображений.
  • Похожим образом, как и разрешение ms-appx:, разрешение ms-appdata: применяется к узлу, а не к расширениям. Это ограничивает его полезность для сторонних расширений.

Кроме того, палитра команд в PowerToys версии 0.95 и более поздних версиях содержит концепцию подсказок для источников изображений, реализованных в качестве параметров строки запроса, на основе исходных URI.

Эти указания позволяют разработчикам расширений влиять на поведение изображений в содержимом markdown.

• --x-cmdpal-fit
  • none: нет автоматического масштабирования, предоставляет изображение как по умолчанию
  • fit: масштабирование в соответствии с доступным пространством
• --x-cmdpal-upscale
  • true: разрешить масштабирование
  • false: только уменьшение масштаба (по умолчанию)
• --x-cmdpal-width: требуемая ширина в пикселях
• --x-cmdpal-height: желаемая высота в пикселях
• --x-cmdpal-maxwidth: максимальная ширина в пикселях
• --x-cmdpal-maxheight: максимальная высота в пикселях

См. страницу SampleMarkdownImages в проекте SamplePagesExtension в репозитории PowerToys GitHub для примеров использования изображений в содержимом markdown вашего расширения.

Далее: получение входных данных пользователей с помощью форм

Связанный контент

• PowerToys Служебная программа палитры команд
• Обзор расширяемости
• Примеры расширений