2.1 Tag <pre>
As tags <code> e <pre> são usadas no HTML para representar trechos de código e texto pré-formatado.
Elas permitem melhorar a legibilidade e manter o formato do texto original, o que é especialmente útil para mostrar
exemplos de código e outros materiais técnicos.
A tag <pre> (abreviação de "preformatted text") é usada para mostrar o texto em HTML do jeito que ele foi escrito,
preservando todos os espaços, quebras de linha e tabulações. Isso é especialmente útil para apresentar grandes
trechos de código ou outro texto pré-formatado.
Sintaxe:
<pre>
texto
</pre>
Exemplo:
<pre>
function sayHello() {
console.log("Hello, world!");
}
</pre>
Neste exemplo, o texto dentro da tag <pre> será exibido mantendo todos os espaços e quebras de linha
como ele foi escrito no código original.
Características da tag <pre>:
- A tag
<pre>preserva todos os espaços e quebras de linha no texto - Ela exibe o texto em uma fonte monoespaçada
- É frequentemente usada junto com a tag
<code>para destacar código
2.2 Tag <code>
A tag <code> é usada para indicar trechos de código ou outros dados legíveis por máquina no meio do texto. Ela
geralmente é aplicada para destacar linhas de código, variáveis, funções e outros elementos de programação.
<code>código</code>
Exemplo:
<p>Para exibir uma mensagem no console, use a função <code>console.log()</code>.</p>
Neste exemplo, o texto "console.log()" será destacado como código.
Características da tag <code>:
- A tag
<code>exibe o texto em uma fonte monoespaçada (geralmente Courier ou Consolas) - Ela não preserva formatação como quebras de linha ou recuos
- A tag
<code>é frequentemente usada dentro de outras tags, como<p>,<li>ou<pre>
2.3 Usando <pre> e <code>
Para destacar e formatar grandes blocos de código, as tags <pre> e <code> são frequentemente usadas juntas.
Isso permite manter a formatação e destacar o texto como código.
Exemplo:
<pre><code>
function helloWorld() {
console.log('Hello, world!');
}
</code></pre>
<pre>
<code>
function helloWorld() {
console.log('Hello, world!');
}
</code>
</pre>
Como resultado, o navegador exibirá o texto com a formatação mantida e destacando o código.
2.4 Destaque de sintaxe
Para destacar a sintaxe, você pode usar bibliotecas de terceiros, como Prism.js ou Highlight.js, que reconhecem e destacam automaticamente a sintaxe do código na página web.
Exemplo de uso do Highlight.js:
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<pre><code>
function helloWorld() {
console.log('Hello, world!');
}
</code></pre>
<body>
</html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<pre>
<code>
function helloWorld() {
console.log('Hello, world!');
}
</code>
</pre>
<body>
</html>
Como resultado, o bloco de código será automaticamente destacado de acordo com a sintaxe do JavaScript.
As tags <code> e <pre> no HTML são ferramentas poderosas para exibir e formatar
código e outros textos mantendo a formatação original. Use-as à vontade.
GO TO FULL VERSION