2.1 Etiqueta <pre>
Las etiquetas <code> y <pre> se utilizan en HTML para representar fragmentos de código y texto preformateado.
Permiten mejorar la legibilidad y conservar el formato del texto original, lo cual es especialmente útil para mostrar
ejemplos de código y otros materiales técnicos.
La etiqueta <pre> (abreviatura de "preformatted text") se usa para mostrar texto en HTML tal como está escrito,
conservando todos los espacios, saltos de línea y tabulaciones. Esto es especialmente útil para presentar grandes
fragmentos de código o cualquier otro texto preformateado.
Sintaxis:
<pre>
texto
</pre>
Ejemplo:
<pre>
function sayHello() {
console.log("Hello, world!");
}
</pre>
En este ejemplo, el texto dentro de la etiqueta <pre> se mostrará conservando todos los espacios y saltos de línea,
tal como está escrito en el código fuente.
Características de la etiqueta <pre>:
- La etiqueta
<pre>conserva todos los espacios y saltos de línea en el texto - Muestra el texto en una fuente monoespaciada
- Se utiliza a menudo junto con la etiqueta
<code>para resaltar código
2.2 Etiqueta <code>
La etiqueta <code> se utiliza para denotar fragmentos de código o otros datos legibles por máquina dentro del texto.
Se suele aplicar para resaltar líneas de código, variables, funciones y otros elementos de programación.
<code>código</code>
Ejemplo:
<p>Para mostrar un mensaje en la consola, utiliza la función <code>console.log()</code>.</p>
En este ejemplo, el texto "console.log()" estará resaltado como código.
Características de la etiqueta <code>:
- La etiqueta
<code>muestra el texto en una fuente monoespaciada (usualmente Courier o Consolas) - No conserva el formato, como saltos de línea o tabulaciones
- La etiqueta
<code>se usa a menudo dentro de otras etiquetas, como<p>,<li>o<pre>
2.3 Uso de <pre> y <code>
Para resaltar y formatear grandes bloques de código, a menudo se utilizan las etiquetas <pre> y <code> juntas.
Esto permite conservar el formato y resaltar el texto como código.
Ejemplo:
<pre><code>
function helloWorld() {
console.log('Hello, world!');
}
</code></pre>
<pre>
<code>
function helloWorld() {
console.log('Hello, world!');
}
</code>
</pre>
Como resultado, el navegador mostrará el texto conservando el formato y resaltando el código.
2.4 Resaltado de sintaxis
Para resaltar la sintaxis, puedes usar bibliotecas externas como Prism.js o Highlight.js, que reconocen y resaltan automáticamente la sintaxis del código en la página web.
Ejemplo de uso de 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, el bloque de código se resaltará automáticamente de acuerdo con la sintaxis de JavaScript.
Las etiquetas <code> y <pre> en HTML son herramientas poderosas para mostrar y formatear
código y otros textos conservando el formato original. Úsalos con gusto.
GO TO FULL VERSION