Agregando al blog bloques de código

Probando highlight.js

Fecha: 2024-07-04

Después de trabajar un rato y experimentar con distintas opciones, finalmente le agregué soporte al blog para poder insertar bloques de código.

Antes de agregar esta funcionalidad, fue necesario considerar dos puntos principales:

• Debe funcionar en el backend.
• Debe ser lo suficientemente simple para poder mezclarlo con nuestro sistema de plantillas. ¹

Por suerte, la librería highlight.js cubre el requisito de funcionalidad en el backend y el de simplicidad, ya que solo consiste en un parser que toma nuestro código y, dependiendo del tipo de la variable, le agrega una etiqueta HTML con una clase CSS que nos permite personalizar los colores.

Otra ventaja es que se puede instalar fácilmente, aunque si queremos utilizar los estilos que vienen por defecto, hay que extraerlos de su directorio entre los módulos de Node (node_modules/highlight.js/styles). Desde aquí podemos copiarlos para servirlos por nuestro servidor, o insertarlos junto a las plantillas.

En mi caso, para poder combinarlo, utilizo un par de funciones que toman el código sin procesar, se lo pasan a highlight para que le agregue sus etiquetas, le añadimos un par de etiquetas extra a nuestra conveniencia y un poco más de CSS propio.

javascript
import hljs from 'highlight.js';

function codeTag(inCode,language='javascript'){
  return "<code class='is-monospaced hljs'>"
    +( hljs.highlight( inCode.trim(), { language } ).value)
    +'</code>';
}

function codeBlock( language='xml', inCode='') {
 return `<pre>
    <p>${language}</p>
    ${ codeTag(inCode, language) }
    </pre>`
}

Tenerlo de esta forma permite incluir código en la página:

javascript
${ codeBlock('lua',`
local name = nil
function holaMundo()
    print('Hola mundo en lua ')
end
`)}

lua
local name = nil
function holaMundo()
    print('Hola mundo en lua ')
end

Y también poder introducir líneas de código junto con el texto:

html
<p>Lo cual luce así:  ${ codeTag(`holaMundo()`)}</p>

Lo cual luce así: holaMundo()

Con esto el blog se encuentra mejor preparado para mostrar ejemplos de código y explicaciones técnicas. 🙂