Markdown renderizado como o design system. Uma chamada e um documento (uma página de docs, uma resposta de chat, uma nota de release) sai com a cara do tema do próprio app, porque cada bloco desce para os componentes de que o app já é feito. Não existe um segundo renderer "básico" do qual divergir: a aparência padrão é o tema padrão, e MaterialTheme.FromSeed(…) rebrandiza um documento renderizado sem mais nada mudar.

Markdown(source)

{

Style = new MarkdownStyle // opcional; os defaults leem do tema

{

Heading1 = TypeRole.Display, // papéis por nível de título

CodeLineNumbers = true, // numeração nas fences (desligada por padrão)

BlockGap = 18, // ritmo vertical entre blocos

}

O que desce para quê

Markdown

Componente

Título 1–4

Text nos degraus de TypeRole (Heading, Title, TitleSmall, Label)

Parágrafo

UM Text com spans TextRun: negrito, itálico, código inline e links dentro da frase

código inline

um span mono um degrau abaixo do tamanho da prosa, mantendo a caixa de linha do parágrafo

[link](href)

TextRun.Destination, que navega nos DOIS alvos (o Photon faz hit-test do run desde a 0.2.0-preview.28)

Fence de código

CodeBlock, colorido pelas mesmas regras do CodeEditor, com o botão de copiar

fence mermaid ` | um diagrama Mermaid, desenhado nativamente pelo design system

Lista (-, 1.)

marcador na sarjeta + parágrafos com spans, um degrau de aninhamento

> citação

uma caixa com borda no início

Tabela

linhas de Grid sob um cartão com fio de borda

---

Divider

Um parágrafo é um Text com spans, nunca uma Row de Texts, porque uma Row quebra entre runs em vez de entre palavras, então uma frase com três spans de código quebraria nos spans.

A ênfase desenha em todos os alvos

Desde 0.2.0-preview.28

O *itálico* inclina agora: o TypeStyle ganhou o eixo (ele compõe com peso e mono, então **negrito *e itálico*** e código itálico existem os dois), e a cerca que esta página carregava ("itálico parseia mas pinta reto") fechou junto, um laço no componente depois, exatamente como prometido. No Photon o mesmo release fez o parágrafo inteiro desenhar RUN A RUN, então a palavra em negrito, o span de código inline e o link no meio da frase pararam de se dissolver em prosa chapada por lá. Veja Photon para a mecânica dos fragmentos.

Um parser, em todos os lados

O parser (MarkdownParser.Parse / .Inline, público, porque o modelo de blocos é utilizável sem o componente) é escrito no subconjunto do eqc e roda em todos os lados do framework: o mesmo C# parseia durante o SSR e no Photon, e o twin transpilado parseia no browser. É isso que faz o render do servidor e o re-render do cliente concordarem por construção, e o que permite uma mensagem de chat chegando ao estado do cliente re-renderizar com zero idas ao servidor.

A paridade não é desejada, é pinada: um documento canônico e um dumper de forma vivem nas duas suítes (MarkdownParserTests.cs, markdown-parser.spec.ts) com literais esperadas idênticas. Se o twin um dia discordar do parser C#, uma suíte quebra antes de uma página quebrar.

O desenho do scanner (spans de código reivindicam seus caracteres primeiro, uma caminhada da esquerda para a direita, sem regex) vem do site de documentação que o provou em produção; o site mantém o dialeto dele (callouts a partir de citações que abrem em negrito, marcas de versão eq:since) como transformações sobre estes blocos.

Cercas (v1, deliberadas)

•

Ênfase só com asterisco: _underscores_ ficam literais; prosa sobre código é cheia de identificadores_com_underscore.

•

Imagens são lidas como o texto alternativo, linkando para a fonte: um nó Image é um slot explicitamente dimensionado por spec, e o markdown não carrega dimensões para dimensioná-lo.

•

HTML cru nunca passa: superfície de injeção no web, sem sentido no Photon.

•

Só fences: sem blocos por indentação de quatro espaços; callouts no estilo GitHub (> [!NOTE]) são um dialeto de aplicação por enquanto. Uma fence mermaid ` é a exceção que renderiza: veja Mermaid.

PREVIOUSLottie-pt-BR

NEXTMermaid-pt-BR

ON THIS PAGE

O que desce para quê

A ênfase desenha em todos os alvos

Um parser, em todos os lados

Cercas (v1, deliberadas)