Como escrever códigos de exemplo, sem executar

Neste artigo você vai aprender como escrever códigos de exemplo, sem que sejam executados, de qualquer linguagem como: PHP, JS, HTML e etc

Fala programador(a), beleza? Bora aprender a como escrever código que não seja interpretado pelo navegador!

Para exibir código sem executar, precisamos apenas escrever os sinais de maior e menor (< e >) de uma maneira que não sejam reconhecidos como tais

Então utilizamos os códigos que vão imprimir os símbolos, então deixando de serem interpretados pelo navegador

Veja um exemplo:

<p>Este é um parágrafo</p>

Este código vai renderizar um parágrafo desta maneira:

<p>Este é um parágrafo</p>

E não será interpretador pelo navegador, utilizando os atributos e recursos da tag p

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Temos também outra alternativa: a tag pre

Ela vai inserir texto pré-formatado, ou seja, pode representar código na sua página

Veja uma utilização:

<pre>
  body {
    color: red;
  }
</pre>

Desta maneira podemos facilmente representar CSS em uma tela de HTML

Aprenda mais sobre a tag pre neste link

Conclusão

Neste artigo vimos como escrever códigos de exemplo

Utilizamos duas abordagens:

• Utilizando os códigos dos elementos < e >
• E também utilizando a tag pre

As duas formas satisfazem o objetivo do artigo, imprimindo código de exemplo sem o mesmo ser interpretado e sem fazer alterações na página que o exibe

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

Os três símbolos que você precisa escapar:

O navegador não olha só pro maior e menor, beleza?

Existem três caracteres que ele lê como "isso aqui é código, vou interpretar":

o menor que, o maior que e o e comercial

Cada um tem um código próprio que sempre começa com o e comercial e sempre termina com ponto e vírgula

Pra menor que, o nome do código é lt (de less than)

Pra maior que, é gt (de greater than)

E pro próprio e comercial, é amp (de ampersand)

Aqui mora o erro clássico: se o seu texto já tem um e comercial solto, escape ELE primeiro

Senão o navegador pega o e comercial da sua linha e tenta juntar com o que vier depois, e a saída fica quebrada 😀

E a tag code? Qual a diferença pra pre:

Essa é a dúvida que sempre aparece

A tag pre cuida da FORMA: ela preserva espaços, tabulações e quebras de linha exatamente como você escreveu

Já a tag code cuida do SIGNIFICADO: ela avisa ao navegador (e aos leitores de tela, e ao Google) que aquele trecho é código de computador

Ou seja, são coisas diferentes e não competem entre si

O combo mais comum é usar as duas juntas: a pre por fora segurando a formatação e a code por dentro marcando que aquilo é código

Pra um trecho curto no meio de uma frase, code sozinha resolve

Pra um bloco inteiro de várias linhas, pre é obrigatória, senão tudo vira uma linha só

E atenção nisso: nenhuma das duas impede o navegador de interpretar

Elas cuidam da aparência e do sentido, quem impede a interpretação são os códigos dos símbolos que vimos ali em cima

Então dentro da pre você continua precisando escapar o maior e o menor, sempre

E se o código vier de outra linguagem, tipo PHP ou JS?

A lógica é exatamente a mesma, muda só onde a conversão acontece

Quando o texto sai do servidor (PHP, Python, o que for), a troca dos símbolos pelos códigos deles tem que ser feita ANTES de a página ser montada

Toda linguagem de servidor tem sua função pronta pra isso, você não precisa sair trocando caractere na mão

Quando o texto entra pelo JavaScript, a pegada é outra: em vez de jogar o conteúdo como HTML, você insere ele como TEXTO puro

Inserindo como texto, o navegador entende que aquilo é conteúdo e não marcação, e a interpretação simplesmente não acontece

E aqui vale o aviso: isso não é só questão de aparência

Exibir na tela, sem escapar, um texto que veio do usuário é a porta de entrada clássica pra injeção de código na sua página

Então escapar não é firula, é segurança

Perguntas rápidas sobre exibir código na página:

Por que meu código simplesmente sumiu da tela?

Ele não sumiu, ele foi interpretado

O navegador leu suas tags como marcação de verdade e renderizou o resultado em vez do texto

A solução é a mesma do artigo: trocar o maior e o menor pelos códigos deles

A tag pre sozinha resolve?

Não

A pre preserva a formatação, mas não impede o navegador de interpretar o que está dentro dela

Precisa escapar os símbolos do mesmo jeito

O código vai aparecer colorido?

Não por padrão

HTML puro exibe o código, mas em uma cor só

Pra ter aquele visual colorido de editor você precisa de uma ferramenta de destaque de sintaxe por cima, que é outro assunto

Dá pra mostrar código sem ninguém copiar?

Não dá, e nem é o objetivo aqui

Se está na tela, está no código fonte da página

O objetivo é só exibir sem executar, beleza?