Saltar al contenido principal

Mostrar fragmentos de código en Blogger (2024)

· 2 min de lectura
Yayo Arellano
Yayo Arellano
Software Engineer

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 líneas 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>

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

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