Resaltando código en artículos de GUTL

Saludos a los lectores y seguidores asiduos del Blog SWL-X. Al parecer algunos no nos adaptamos aún a ciertas funcionalidades introducidas en el Portal GUTL. Muchas de estas vienen incorporadas desde las dos últimas plantillas, lo que nos dice que llevamos más de un año con estas funcionalidades pero pocos han hecho uso de las mismas. En un artículo anterior veíamos como emplear shortcodes [ ], hoy de manera rápida veremos como resaltar código usando etiquetas HTML <></> en nuestros artículos.

Es cierto que en muchos sitios (por ejemplo en el gran Blog humanOS) utilizan plugins que automáticamente resaltan y hasta diferencian el tipo de código que queremos hacer notar en nuestro escrito. Una de las premisas de GUTL es tratar de copiar lo menos posible el estilo de otros sitios (aunque hay que reconocer que Ernesto y Alejandro han dejado la impronta de DesdeLinux en algunas cosillas de GUTL, algo que nos llena de orgullo) y por otro lado emplear la menor cantidad de plugins posibles en aras de ralentizar lo menos posible nuestra Web, algo que cuesta sudor y sangre en ocasiones si tomamos en cuenta lo adolorido que se encuentra nuestro webserver. Imagino que por estas razones, dos de nuestros padres fundadores (Ernesto y Alejandro) introdujeron tiempo atrás una manera un tanto peculiar (aunque no exclusiva de GUTL) de resaltar código pasando clases CSS a las etiquetas code y pre.

Para resaltar código o extensas líneas de código vamos a tener que alternar el editor visual de WordPress con el editor modo Texto, ya que en el visual no funcionan las aperturas y cierres de la etiqueta <code></code> aunque si las de <pre></pre>.

 Cuando usar code y cuando usar pre

Si necesitas insertar una línea de código lo ideal es usar code, por ejemplo para:

sudo aptitude search gimp

Si por el contrario lo que quieres es mostrar múltiples líneas de código lo ideal es usar la etiqueta pre. El detalle radica en que code suele adicionar un espacio entre líneas y para múltiples líneas pre formatea mejor el resultado final. El siguiente ejemplo ahorra más espacio vertical y ofrece un mejor aspecto usando pre:

function conky_main()
 if conky_window == nil then 
 return
 end
local cs = cairo_xlib_surface_create(conky_window.display, conky_window.drawable, conky_window.visual, conky_window.width, conky_window.height)
 local display = cairo_create(cs)
 local updates = conky_parse('${updates}')
 update_num = tonumber(updates)
 if update_num > 5 then
 go_clock()
 end
 cairo_surface_destroy(cs)
 cairo_destroy(display)
end

Si lo hubiéramos hecho con code hubiera quedado de la siguiente manera:
function conky_main()
if conky_window == nil then
return
end
local cs = cairo_xlib_surface_create(conky_window.display, conky_window.drawable, conky_window.visual, conky_window.width, conky_window.height)
local display = cairo_create(cs)
local updates = conky_parse('${updates}')
update_num = tonumber(updates)
if update_num > 5 then
go_clock()
end
cairo_surface_destroy(cs)
cairo_destroy(display)
end

¿ Notan la diferencia? Entonces estamos de acuerdo que para líneas simples usaremos code y para líneas múltiples usaremos pre.  Ojo, cada nueva apertura de etiqueta provoca la salida de una nueva consola en el artículo final, así que deben cuidar bien desde donde y hasta donde usar cada único par de etiquetas.

Porciones de código, comandos simples o símbolos de teclas dentro de un párrafo normal

Lo anterior estamos seguros que ha quedado bastante claro. Ahora bien, hay un detalle, estas etiquetas (code y pre) provocan un salto de línea al ser cerradas y esto no nos serviría cuando queremos resaltar una pequeña porción de código, como por ejemplo el nombre de un comando dentro de un párrafo de texto normal, ya que se provocaría un salto de párrafo indeseado. La solución a este caso la vienen viendo desde que comenzaron a leer este artículo, se trata de la etiqueta kbd. La sintaxis es igual a code y pre solo que no les saltará de párrafo. Claro, a nadie se le ocurrirá resaltar una extensa porción de código dentro de un párrafo de texto normal, por lo que debe quedar como norma usar kbd para porciones cortas dentro de un mismo párrafo.

Un ejemplo en el que esta etiqueta se luce es cuando queremos resaltar una combinación de teclas, por ejemplo en la siguiente oración:

Windows me tiene harto con su Ctrl + Alt + Del.

En la oración anterior cada tecla fue encerrada dentro de un par de etiquetas kbd.

Como nada en la vida es absoluto, puede darse ocasiones en que para líneas múltiples usted entienda que kbd ofrece un mejor aspecto que pre.

Cuidado con los excesos

Analice bien que quiere mostrar a los lectores en su artículo y no abuse del empleo de estas tres etiquetas acá mencionadas. Haga un uso racional y adecuado de shortcodes y resaltados de código.

Creo que interiorizando bien lo explicado acá, en el artículo de los shortcodes y en el de los consejos generales sobre redacción ya estás preparado para dejar tu huella profunda en la Red a través del Portal GUTL. Cualquier duda, si eres redactor, nos vemos en la sección para redactores del Foro.