Escribir bloques de código en HTML

1. Envuelva la etiqueta <code> y su contenido dentro de la etiqueta <pre> para escribir un bloque de código en HTML
2. Use la etiqueta <code> y la propiedad CSS white-space para escribir un bloque de código en HTML

Este artículo presentará algunos métodos para escribir bloques de fragmentos de código en HTML.

Envuelva la etiqueta <code> y su contenido dentro de la etiqueta <pre> para escribir un bloque de código en HTML

La etiqueta <code> define un fragmento de código informático. El contenido interior se muestra en la fuente monoespaciada predeterminada del navegador.

La etiqueta se utiliza para representar bloques de código en HTML. La etiqueta es una etiqueta en línea.

Significa que si escribimos fragmentos de código dentro de la etiqueta <code>, el contenido dentro de la etiqueta se muestra en una línea. No conserva saltos de línea ni espacios.

La etiqueta <pre> define texto preformateado. Cualquier texto en un elemento <pre> se muestra en una fuente de ancho fijo y el texto conserva tanto los espacios como los saltos de línea.

El texto o contenido dentro de la etiqueta <pre> se mostrará tal como está escrito exactamente en el código fuente HTML. La etiqueta <pre> es un elemento a nivel de bloque.

Si envolvemos la etiqueta <code> y su contenido dentro de la etiqueta <pre>, el contenido dentro de la etiqueta <code> se comportará como un elemento a nivel de bloque. Los contenidos tendrán la fuente monospace, y también se conservarán los saltos de línea y los espacios de los fragmentos de código.

Por ejemplo, escriba código JavaScript y envuelva el código dentro de la etiqueta <código>. A continuación, envuelva el elemento <code> con una etiqueta <pre>.

Código de ejemplo:

<p>Code snippet for addition of two numbers in javascript</p>
<pre>
  <code>
    function add (a,b) {
    sum = a + b;
    return sum;
    }
  </code>
</pre>

El ejemplo anterior mostrará el bloque de código JavaScript.

Use la etiqueta <code> y la propiedad CSS white-space para escribir un bloque de código en HTML

En este método, buscaremos un reemplazo para la etiqueta <pre> usando algunos estilos CSS. Anteriormente, sabíamos que el elemento <code> era un elemento en línea.

Usamos la etiqueta <pre> para convertirlo en un elemento a nivel de bloque. Pero, también podemos hacer que la etiqueta <code> sea un elemento a nivel de bloque configurando su propiedad display en block.

Y podemos conservar los saltos de línea y los espacios de la etiqueta code configurando su propiedad white-space en pre-wrap. Como resultado, mostrará fragmentos de código escritos en código fuente HTML.

Así, podremos crear bloques de código en HTML.

Por ejemplo, cree una etiqueta <código> y escriba un fragmento de código JavaScript dentro de ella. Asigne a la etiqueta <código> un nombre de clase de la sum.

En CSS, seleccione la clase sum y establezca la propiedad display en block y la propiedad white-space en pre-wrap.

Código de ejemplo:

<code class="sum">
  function (a, b) {
  sum = a + b;
  return sum;
  }
</code>

.sum {
  display: block;
  white-space: pre-wrap;
}

Los ejemplos de código anteriores producirán un bloque de código JavaScript.