Du Markdown, rendu comme le design system. Un appel et un document (une page de docs, une réponse de chat, une note de version) sort dans le thème de l'application elle-même, parce que chaque bloc s'abaisse vers les composants dont l'application est déjà faite. Il n'y a pas de second rendu "basique" dont dériver : l'aspect par défaut est le thème par défaut, et MaterialTheme.FromSeed(…) rebrande un document rendu sans que rien d'autre ne change.

Markdown(source)

{

Style = new MarkdownStyle // facultatif ; les défauts se lisent dans le thème

{

Heading1 = TypeRole.Display, // des rôles par niveau de titre

CodeLineNumbers = true, // gouttière sur le code clôturé (désactivée par défaut)

BlockGap = 18, // rythme vertical entre les blocs

}

Ce qui s'abaisse vers quoi

Markdown

Composant

Titre 1 à 4

Text aux crans de TypeRole (Heading, Title, TitleSmall, Label)

Paragraphe

UN Text avec des spans TextRun : gras, italique, code en ligne, liens dans la phrase

code en ligne

un span mono un cran sous la taille de la prose, qui garde la boîte de ligne du paragraphe

[lien](href)

TextRun.Destination, qui navigue sur LES DEUX cibles (Photon teste le run au clic depuis la 0.2.0-preview.28)

Code clôturé

CodeBlock, coloré par les mêmes règles que celles du CodeEditor, avec son bouton de copie

clôture mermaid ` | un diagramme Mermaid, dessiné nativement par le design system

Liste (-, 1.)

gouttière de marqueur + paragraphes en spans, un cran d'imbrication

> citation

une boîte bordée au début

Tableau

des lignes de Grid sous une carte encadrée d'un filet

---

Divider

Un paragraphe est un Text avec des spans, jamais une rangée de Texts, parce qu'une rangée casse entre les runs au lieu de casser entre les mots, donc une phrase avec trois fragments de code envelopperait aux fragments.

L'emphase se dessine sur chaque cible

Depuis 0.2.0-preview.28

*italique* penche désormais : TypeStyle a gagné l'axe (il compose avec le poids et avec mono, donc **gras *italique*** et le code en italique existent tous deux), et la limite que cette page portait ("l'italique se parse mais se peint droit") s'est fermée avec lui, une boucle dans le composant plus tard, exactement comme promis. Sur Photon la même version a fait dessiner le paragraphe entier RUN PAR RUN, donc le mot en gras, le fragment de code en ligne et le lien en milieu de phrase ont cessé de s'y dissoudre en prose plate. Voir Photon pour la mécanique des fragments.

Un parseur, de chaque côté

Le parseur (MarkdownParser.Parse / .Inline, public, parce que le modèle de blocs est utilisable sans le composant) est écrit dans le sous-ensemble d'eqc et tourne de chaque côté du framework : le même C# parse pendant le SSR et sur Photon, et son jumeau transpilé parse dans le navigateur. C'est ce qui fait que le rendu du serveur et le re-rendu du client s'accordent par construction, et ce qui permet à un message de chat qui arrive en flux dans l'état du client de se re-rendre avec zéro aller-retour serveur.

La parité n'est pas espérée, elle est épinglée : un document canonique et un dumpeur de formes vivent dans les deux suites de tests (MarkdownParserTests.cs, markdown-parser.spec.ts) avec des littéraux attendus identiques. Si le jumeau venait à contredire le parseur C#, une suite casse avant qu'une page ne casse.

La conception du scanner (les fragments de code réclament leurs caractères d'abord, un seul parcours de gauche à droite, pas de regex) vient du site de documentation qui l'a éprouvée en production ; le site garde son propre dialecte (les encarts issus de citations à tête en gras, les marques de version eq:) comme des transformations au-dessus de ces blocs.

Limites (v1, délibérées)

•

L'emphase se fait à l'astérisque seulement : _les tirets bas_ restent littéraux ; la prose sur du code est pleine d'identifiants_avec_tirets_bas.

•

Les images se lisent comme leur texte alt pointant vers la source : un nœud Image est par spécification un emplacement explicitement dimensionné, et le markdown ne porte aucune dimension pour en dimensionner un.

•

Le HTML brut ne passe jamais : une surface d'injection sur le web, dénuée de sens sur Photon.

•

Du code clôturé seulement : pas de blocs indentés de quatre espaces ; les encarts d'alerte de GitHub (> [!NOTE]) sont pour l'instant un dialecte au niveau de l'application. Une clôture mermaid ` est l'exception qui se rend : voir Mermaid.

PREVIOUSFormulaires

NEXTMermaid

ON THIS PAGE

Ce qui s'abaisse vers quoi

L'emphase se dessine sur chaque cible

Un parseur, de chaque côté

Limites (v1, délibérées)