Blocos de código Markdown: cercas, realce e exportação
Escreve cercas Markdown corretas, escolhe a linguagem, resolve linhas longas e exporta uma imagem legível sem perder a fonte copiável.
Uma imagem de código é útil num diapositivo ou anúncio quando o leitor precisa de ver um pequeno exemplo de imediato. Acompanha-a de uma fonte que possa ser copiada. Abre Código para imagem para um fragmento isolado ou mantém os blocos com cerca no documento Markdown quando a explicação em redor for importante.
Um bloco com cerca preserva o código como código, sem interpretar a pontuação como Markdown normal. Coloca a abertura numa linha própria, acrescenta um identificador como javascript e fecha a cerca depois da última linha de código. Usa acentos graves em linha para um identificador curto numa frase; para várias linhas, usa um bloco.
Esta fonte Markdown mostra a própria cerca. A exterior tem quatro acentos graves para permitir mostrar literalmente a interior de três.
```javascript
console.log("Ready");
```
O identificador da linguagem orienta o realce quando o renderizador o suporta. Não executa o código, instala dependências ou confirma que o exemplo funciona. Se as cores parecerem erradas, verifica o identificador e o tema antes de alterares o programa.
Copia o JavaScript seguinte para Código para imagem, seleciona JavaScript e verifica a pré-visualização. O exemplo guarda três nomes de cores e constrói uma cadeia de estado. É código de demonstração, não um teste de desempenho do produto.
const palette = ["cyan", "amber", "coral"];
function renderStatus(format) {
return `${format}: ${palette.length} colors`;
}
console.log(renderStatus("PNG"));
Usa o resultado num resumo de tutorial ou num diapositivo que explique como a função utiliza o comprimento do array. Mantém o título ou a legenda fora do programa para distinguir a explicação da fonte executável.
Uma ligação longa, uma expressão muito aninhada ou um objeto largo podem tornar a imagem difícil de ler. Pergunta primeiro se o leitor precisa do exemplo inteiro. Remove configuração sem relação com o tema apenas se o fragmento continuar a fazer sentido e indica quando o código foi abreviado.
Depois, alarga a área ou reformata a fonte em pontos seguros para a sintaxe. Não introduzas uma quebra dentro de uma cadeia só para caber no cartão. Não dependas da deslocação horizontal: uma imagem estática não revela código fora da área capturada. Verifica a linha mais longa e a chaveta final no ficheiro descarregado.
Escolhe um tema em que comentários, cadeias e pontuação permaneçam legíveis ao tamanho final. A cor deve apoiar a explicação, não transmitir sozinha o significado. Remove tokens, endereços privados e dados pessoais antes de exportar; recortá-los depois deixa uma fonte com informação sensível.
Publica a fonte como texto selecionável ou liga ao exemplo completo. O texto alternativo pode explicar o objetivo do fragmento; uma transcrição longa deve ficar no texto próximo. Em documentos paginados, verifica também as quebras de página: uma boa composição de imagem não garante um bom PDF.
Cria uma imagem de código. Para documentos, consulta como preservar o realce em PDF; para texto e listas em redor, usa o guia prático de Markdown.