Markdown 콘텐츠 표시

이전: 명령 결과

명령 팔레트는 간단한 명령 목록 이외의 다양한 콘텐츠 표시를 지원합니다. markdown을 사용하여 서식이 지정된 텍스트, 설명서 및 대화형 콘텐츠를 표시하는 확장을 만들 수 있습니다. 이 기능은 특히 다음과 같은 경우에 유용합니다.

• 도움말 설명서 또는 사용자 가이드 표시
• 파일 미리 보기 또는 요약 표시
• 서식이 지정된 지침 또는 자습서 제공
• 포함된 명령을 사용하여 대화형 콘텐츠 만들기

이 문서에서는 명령 팔레트 확장에 markdown 콘텐츠를 표시하는 페이지를 만드는 방법을 보여 줍니다.

지금까지 ListPage에 명령 목록을 표시하는 방법만 보여 주었습니다. 그러나 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

이 예제에서는 간단한 markdown 문자열을 표시하는 새 ContentPage 코드가 만들어집니다. '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. ExtensionName 선택 <>
5. Enter 키를 누르면 문서를 열 수 있습니다.

markdown 콘텐츠에 이미지 추가

0.95 이상에서 PowerToys 명령 팔레트를 사용하면 다음 스키마 중 하나를 사용하여 추가 원본의 markdown 콘텐츠에 이미지를 추가할 수 있습니다.

• 파일 스킴: file: 스킴을 사용하여 이미지를 로드할 수 있습니다.
  • 이 체계는 명령 팔레트 확장명/호스트 경계를 통과할 때 올바른 해상도를 보장하기 위해 파일 URI를 절대 경로로 의도적으로 제한합니다. 대부분의 경우 타사 확장은 경로를 제공합니다. 그러나 명령 팔레트 호스트는 실제 로드를 수행하고, 그렇지 않으면 자체에 상대적인 경로를 확인합니다.
• 데이터 구성표: 스키마를 사용하여 URI data: 에서 이미지를 로드할 수 있습니다(Base64 및 URL로 인코딩된 양식 모두).
  • 참고: 0.95 이상에서 PowerToys 변경이 도입되기 전에 5MB보다 크거나 크기가 4000×4000픽셀을 초과하는 이미지 또는 1MB를 초과하는 markdown 파일과 같이 매우 큰 입력을 처리할 때 markdown 컨트롤이 중단되거나 응답하지 않습니다. 변경 내용이 있더라도 포함하기 전에 이미지 파일 크기를 5MB 미만으로 유지하고 이미지 크기를 적절한 크기로 조정하는 것이 좋습니다. 최상의 결과를 위해 이미지를 압축하고 매우 큰 markdown 콘텐츠를 가능한 경우 더 작은 섹션으로 분할합니다.
• ms-appx scheme: 이 체계는 이제 이미지를 로드하는 데 지원됩니다.
  • 참고: 명령 팔레트 호스트는 로드를 ms-appx: 수행하므로 해상도는 확장이 아닌 호스트에 적용되므로 유용성이 제한됩니다.
• ms-appdata scheme: 이 체계는 이제 이미지를 로드하는 데 지원됩니다.
  • ms-appx: ms-appdata: 마찬가지로 해상도는 확장이 아닌 호스트에 적용됩니다. 이렇게 하면 타사 확장의 유용성이 제한됩니다.

또한 Command Palette 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: 최대 높이(픽셀)

확장의 markdown 콘텐츠에 이미지를 사용하는 예제는 GitHub 리포지토리의 SamplePagesExtension 일반 샘플 프로젝트의 PowerToys 페이지를 참조하세요.

다음 단계: 양식으로 사용자 입력 가져오기

관련 콘텐츠

• PowerToys 명령 팔레트 유틸리티
• 확장성 개요
• 확장 샘플