Mostrar contenido de Markdown

Anterior: Resultados del comando

La paleta de comandos admite la visualización de contenido enriquecido más allá de listas de comandos simples. Puede crear extensiones que muestren texto con formato, documentación y contenido interactivo mediante Markdown. Esta funcionalidad es especialmente útil para:

• Mostrar documentación de ayuda o guías de usuario
• Mostrar resúmenes o vistas previas de archivos
• Proporcionar instrucciones o tutoriales con formato
• Creación de contenido interactivo con comandos insertados

En este artículo se muestra cómo crear páginas que muestran el contenido de Markdown en la extensión de paleta de comandos.

Hasta ahora, solo hemos mostrado cómo mostrar una lista de comandos en un listPage. Sin embargo, también puede mostrar contenido enriquecido en su extensión, como markdown. Esto puede ser útil para mostrar la documentación o una vista previa de un documento.

Trabajar con contenido de Markdown

IContentPage (y su implementación del kit de herramientas, ContentPage) es la base para mostrar todos los tipos de contenido enriquecido en la paleta de comandos. Para mostrar el contenido de Markdown, puede usar la clase MarkdownContent .

1. En el Pages directorio , agregue una nueva clase.
2. Asigne un nombre a la clase MarkdownPage.cs
3. Actualice el archivo a:

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. Abrir <ExtensionName>CommandsProvider.cs
2. Reemplace los CommandItem por el MarkdownPage.

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

1. Implementación de la extensión
2. En la paleta de comandos, Reload

En este ejemplo, se crea una nueva ContentPage que muestra una cadena markdown simple. La clase "MarkdownContent" toma una cadena de contenido de Markdown y la representa en la paleta de comandos.

También puede agregar varios bloques de contenido a una página. Por ejemplo, puede agregar dos bloques de contenido de Markdown.

1. Actualice 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. Implementación de la extensión
2. En la paleta de comandos, Reload

Esto le permite mezclar y hacer coincidir diferentes tipos de contenido en una sola página.

Agregar CommandContextItem

También puede agregar comandos a ContentPage. Esto te permite agregar comandos adicionales que el usuario puede invocar dentro del contexto del contenido. Por ejemplo, si tuviera una página que mostrara un documento, podría agregar un comando para abrir el documento en el Explorador de archivos:

1. En su <ExtensionName Page.cs>, agregue doc_path, Commands y 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. Actualizar la ruta de acceso de doc_path a un archivo .txt en su equipo local
2. Implementación de la extensión
3. En la paleta de comandos, Reload
4. Seleccione ExtensionName.<>
5. Presione Enter la tecla , los documentos deben abrirse.

Adición de imágenes al contenido de Markdown

Con la paleta de comandos en PowerToys 0.95 y versiones posteriores, puede agregar imágenes al contenido de Markdown desde orígenes adicionales mediante uno de los esquemas siguientes:

• Esquema de archivos: habilita la carga de imágenes mediante el file: esquema .
  • Este esquema restringe intencionadamente los URIs de archivo a rutas de acceso absolutas para garantizar la resolución correcta cuando se pasa a través del límite de extensión/host de la paleta de comandos. En la mayoría de los casos, las extensiones de terceros proporcionan las rutas de acceso. Sin embargo, el host de la Command Palette realiza la carga real y, de lo contrario, resolvería las rutas de acceso relativas a sí mismo.
• Esquema de datos: habilita la carga de imágenes desde URIs con el esquema data: (en formas de Base64 y codificadas en URL).
  • Nota: Antes de los cambios introducidos en PowerToys 0,95 y versiones posteriores, el control Markdown podría bloquearse o dejarse de responder al procesar entradas muy grandes, como imágenes mayores de 5 MB o con dimensiones superiores a 4000×4000 píxeles o archivos markdown que superen 1 MB de tamaño. Incluso con los cambios, se recomienda mantener los tamaños de archivo de imagen por debajo de 5 MB y cambiar el tamaño de las imágenes a dimensiones razonables antes de insertar. Para obtener los mejores resultados, comprima imágenes y divida contenido de Markdown muy grande en secciones más pequeñas siempre que sea posible.
• ms-appx esquema: ahora este protocolo es compatible para cargar imágenes.
  • Nota: Dado que el host de la paleta de comandos realiza la carga, ms-appx: la resolución se aplica al host y no a las extensiones, lo que limita su utilidad.
• ms-appdata protocolo: Este protocolo ahora es compatible para la carga de imágenes.
  • De forma similar a ms-appx:, ms-appdata: la resolución se aplica al host, no a las extensiones. Esto limita su utilidad para las extensiones de terceros.

Además, la Paleta de Comandos en PowerToys 0.95 y versiones posteriores presenta el concepto de sugerencias de origen de imágenes, implementadas como parámetros de cadena de consulta adjuntos al URI original.

Estas sugerencias permiten a los desarrolladores de extensiones influir en el comportamiento de las imágenes dentro del contenido de Markdown.

• --x-cmdpal-fit
  • none: no hay escalado automático, proporciona la imagen tal como está (valor predeterminado)
  • fit: escala para ajustar el espacio disponible
• --x-cmdpal-upscale
  • true: Permitir escalado vertical
  • false: solo reducción de escala (valor predeterminado)
• --x-cmdpal-width: ancho deseado en píxeles
• --x-cmdpal-height: el alto deseado en píxeles
• --x-cmdpal-maxwidth: ancho máximo en píxeles
• --x-cmdpal-maxheight: altura máxima en píxeles

Consulte la página SampleMarkdownImages del proyecto de ejemplo genérico SamplePagesExtension en el repositorio de GitHub para obtener ejemplos de uso de imágenes en el PowerToys contenido de Markdown de la extensión.

Siguiente: Recibir la entrada del usuario mediante formularios

Contenido relacionado

• PowerToys Utilidad de la paleta de comandos
• Visión general de la extensibilidad
• Ejemplos de extensión