EMPIEZA AQUÍ
Primeros pasos
ARQUITECTURA
Visión general de la arquitectura
Componentes write-once
Superficie declarativa
Arquitectura de paquetes
Componentes
Estilos
Localización
Analytics y GTM
WRITE-ONCE
Almacenamiento
Formularios
Markdown
Mermaid
Renderizado de email
COMPILACIÓN
Resolución de tipos externos
RUNTIME
Runtime (TypeScript)
Rendimiento
SERVIDOR
Assets
BunPackage
Seguridad
ECOSISTEMA
Image
Gráficos
Lottie
DESARROLLO
Roadmap
DocsWrite-once
MarkdownEdit this page
4 min readDesde 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.
1
2
3
4
5
6
7
8
9
10
11
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.