Markdown pt BR

Markdown

🌐 Esta página em: English · Português

Desde 0.2.0-preview.26

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)

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 — 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 — 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 — 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.