Skip to content

Markdown pt BR

Edgar Mesquita edited this page Aug 14, 2026 · 4 revisions

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

Clone this wiki locally