Markdown es

Markdown

🌐 Esta página en: English · Português · Español · Français · Deutsch

Desde 0.2.0-preview.26

Markdown, renderizado como el design system. Una llamada y un documento (una página de docs, una respuesta de chat, una nota de versión) sale con el tema propio de la aplicación, porque cada bloque baja a los componentes de los que la aplicación ya está hecha. No hay un segundo renderizador "básico" del que desviarse: el aspecto por defecto es el tema por defecto, y MaterialTheme.FromSeed(…) cambia la marca de un documento renderizado sin que nada más cambie.

Markdown(source)

Markdown(source)
{
    Style = new MarkdownStyle          // opcional; los valores por defecto se leen del tema
    {
        Heading1 = TypeRole.Display,   // roles por nivel de encabezado
        CodeLineNumbers = true,        // gutter en el código con cerca (apagado por defecto)
        BlockGap = 18,                 // ritmo vertical entre bloques
    },
}

Qué baja a qué

Markdown	Componente
Encabezado 1 a 4	Text en los peldaños de TypeRole (Heading, Title, TitleSmall, Label)
Párrafo	UN Text con spans TextRun: negrita, cursiva, código en línea, enlaces dentro de la frase
código en línea	un span mono un paso por debajo del tamaño de la prosa, conservando la caja de línea del párrafo
[enlace](href)	TextRun.Destination, que navega en LOS DOS destinos (Photon hace hit-test del run desde la 0.2.0-preview.28)
Código con cerca	CodeBlock, resaltado por las mismas reglas que usa el CodeEditor, con su botón de copiar
cerca ```mermaid	un diagrama Mermaid, dibujado de forma nativa por el design system
Lista (-, 1.)	gutter de marcador + párrafos con spans, un peldaño de anidamiento
> cita	una caja con borde al inicio
Tabla	filas de Grid bajo una tarjeta con marco de línea fina
---	Divider

Un párrafo es un Text con spans, nunca una fila de Texts, porque una fila rompe entre runs en lugar de entre palabras, así que una frase con tres fragmentos de código envolvería en los fragmentos.

El énfasis se dibuja en todos los destinos

Desde 0.2.0-preview.28

*cursiva* ahora se inclina: TypeStyle ganó el eje (compone con el peso y con mono, así que **negrita *cursiva*** y el código en cursiva existen los dos), y la valla que esta página llevaba ("la cursiva se parsea pero se pinta recta") se cerró con él, un bucle en el componente después, exactamente como prometía. En Photon la misma versión hizo que el párrafo entero se dibujara RUN POR RUN, así que la palabra en negrita, el fragmento de código en línea y el enlace a mitad de frase dejaron de disolverse en prosa plana ahí. Vea Photon para la mecánica de los fragmentos.

Un parser, todos los lados

El parser (MarkdownParser.Parse / .Inline, público, porque el modelo de bloques es usable sin el componente) está escrito en el subconjunto de eqc y corre en cada lado del framework: el mismo C# parsea durante el SSR y en Photon, y su gemelo transpilado parsea en el navegador. Eso es lo que hace que el render del servidor y el re-render del cliente coincidan por construcción, y lo que permite que un mensaje de chat que entra como stream al estado del cliente se re-renderice con cero idas y vueltas al servidor.

La paridad no se aspira, se fija: un documento canónico y un volcador de formas viven en las dos suites de pruebas (MarkdownParserTests.cs, markdown-parser.spec.ts) con literales esperados idénticos. Si el gemelo llegara a discrepar del parser de C#, una suite se rompe antes que una página.

El diseño del escáner (los fragmentos de código reclaman sus caracteres primero, un solo recorrido de izquierda a derecha, sin regex) viene del sitio de documentación que lo probó en producción; el sitio conserva su propio dialecto (los callouts a partir de citas encabezadas en negrita, las marcas de versión eq:) como transformaciones sobre estos bloques.

Vallas (v1, deliberadas)

• El énfasis es solo con asterisco: _los guiones bajos_ se quedan literales; la prosa sobre código está llena de identificadores_con_guiones_bajos.
• Las imágenes se leen como su texto alt enlazando a la fuente: un nodo Image es por especificación una ranura de tamaño explícito, y markdown no lleva dimensiones con las que dimensionar una.
• El HTML en crudo nunca pasa: una superficie de inyección en la web, sin sentido en Photon.
• Solo código con cerca: no hay bloques con indentación de cuatro espacios; los callouts de alerta de GitHub (> [!NOTE]) son por ahora un dialecto a nivel de aplicación. Una cerca ```mermaid es la excepción que sí se renderiza: vea Mermaid.