Bloque de código

Vamos con un bloque que aunque es bastante sencillo en algunas circunstancias nos puede aportar hacer uso de él. Yo suelo utilizarlo mucho para las entradas de WordPress y de la Raspberry. La principal ventaja que nos da este bloque, es que podemos incluir las indentaciones tal y como las veríamos en cualquier editor de código, sin necesidad de memorizar ciertos fragmentos de caracteres que sí hay que incluir cuando lo escribimos en HTML puro.

Además, aunque no lo apreciemos porque la web está en nuestro lenguaje de origen, si alguien visita nuestra página con otro idioma predeterminado, una vez realiza la traducción desde el navegador o con un servicio externo, si rodeamos esas partes con la etiqueta <code> los traductores dejan pasar esos fragmentos. Me he encontrado muchas páginas que lo escriben en un párrafo, es decir, que no lo tienen codificado correctamente. Como no lo identifican bien, los traductores también cambian esas secciones. En realidad no tiene sentido que lo hagan puesto que el código está en un determinado idioma y funciona únicamente con esas instrucciones.

De hecho, podemos pensar que esa página ha puesto mal el código y al final terminamos haciendo exactamente la misma búsqueda en otros sitios con la intención de encontrar el mismo ejemplo que necesitamos. Esto también sucede con instrucciones de comandos que buscamos para después introducirlos en la consola.

Usando el bloque de código desde WordPress

Para hacer uso de este bloque, normalmente me limito a poner /código en el hueco donde quiero introducir el fragmento. Y una vez tengo el cuadro de texto listo para escribir me limito a pegar el contenido desde cualquier otra aplicación, sobre todo si el código que quiero poner incluye tabulaciones, ya que el propio editor de WordPress las pasa por alto y nos salta al siguiente elemento del panel. También lo hago cuando el código es muy extenso. Otras veces, cuando son fragmentos pequeños y no me importa tanto la visualización o son comandos de consola, lo escribo en el propio editor a mano.

El editor en el bloque de código nos respeta los saltos de línea y las tabulaciones, pero sin cerrar la etiqueta <code>. En otros bloques también se puede hacer pero a veces el resultado hay que revisarlo. Lo bueno del editor en general es que entiende que cuando escribimos cualquier símbolo lo estamos haciendo para que se vea tal cual en la publicación, con lo que los caracteres que pueden crear conflictos los sustituye al vuelo. Aquí tenéis el enlace del bloque de código en WordPress, veréis que a parte del ajuste del CSS personalizado, no permite ajustar nada más.

Caracteres de escape en HTML

En HTML es complejo escribir ciertos caracteres, porque el propio lenguaje los tiene reservados para hacer uso de ellos. Si se quiere que esos caracteres se vean en nuestra página hay que añadir los códigos de escape correspondientes. Podemos usar estos símbolos en la etiqueta <code> o en cualquier otra. Aquí tenéis una tabla con un listado de todos los caracteres de escape en HTML (en inglés).

Como la lista que aparece en esa web es inmensa y muchos de ellos códigos ya no se usan o lo hacen en muy raras ocasiones, a continuación añado una tabla de los que utilizo con más frecuencia. Quizá os preguntáis cómo voy a añadir los códigos de caracteres para que puedan verse. Es muy sencillo, hay un código que es el &amp; que nos permite mostrar el caracter & con el texto que queramos justo después.

Caracter	Código de escape
tabulador		
Nueva línea	

Espacio	 
&	&
<	&lt;
>	&gt;
» (Comilla compuesta)	&quot;
‘ (comilla simple)	&apos;

Para escribir 30 es >20 y <40 tendríamos que hacerlo de la siguiente forma.

30 es >20 y <40.

Es decir escribiendo el código correspondiente, y sin dejar ningún espacio continuaremos escribiendo los caracteres que acompañarán al texto que queramos mostrar junto con nuestro símbolo que no queramos que interprete el propio HTML.