jueves, 22 de julio de 2021

Mostrar fragmentos de código en Blogger (2021)

Si quieres mostrar fragmentos de código en tu blog como este:

var edad = 17;

if (edad >= 18) {
	print('Es mayor de edad');
} else {
	print('Es menor de edad');
}  

Puedes utilizar la librería highlight.js. Para agregarla en tu blog debes editar el HTML de tu blog:

Una vez dentro del editor de HTML debes agregar las siguientes lineas de código:

<link href='https://unpkg.com/@highlightjs/cdn-assets@11.0.1/styles/default.min.css' rel='stylesheet'/>
<script src='https://unpkg.com/@highlightjs/cdn-assets@11.0.1/highlight.min.js'/>
<script>
	hljs.configure({cssSelector: &quot;code&quot;});
	hljs.highlightAll();
</script>

El código anterior debe ser agregado justo antes de la etiqueta <head> como se puede ver en la siguiente imagen:


Ahora el código que quieres mostrar lo debes escribir dentro de las etiquetas <pre><code></code></pre> para bloques de código o dentro de <code></code> para código entre líneas.

Por ejemplo para mostrar el fragmento de código al inicio de este artículo se debe escribir de la siguiente forma:

<pre><code>
var edad = 17;
if (edad >= 18) {
	print('Es mayor de edad');
} else {
	print('Es menor de edad');
}
</code></pre>  

Aqui una imagen de cómo se vería en el editor:


Muchas gracias por leer este articulo, espero les sea de ayuda para mejorar las entradas en sus blogs.

    

3 comentarios:

Entradas populares