Resalta la sintaxis de tus fragmentos de código
Comentarios desactivados en Resalta la sintaxis de tus fragmentos de códigoEn el proceso de realización del tema actual de blog, siempre tuve en cuenta que la mayoría de las entradas —y muy probablemente las próximas— contienen bloques de código, por ello me urgía tener una herramienta que me permitiera el resaltado automático de la sintaxis independientemente de cual fuera. Es innegable que el resaltado del código es un recurso importantísimo, de este modo el contenido se hace más accesible aumentando el grado de legibilidad.
Durante el tiempo de investigación busqué con afán algún plugin ligero, que hiciera el trabajo bien, entre otros detalles. Noté —como siempre— que existen varios y todos hacen lo que promueven, pero el que más me llamó la atención por sus sencillez y facilidad fue Prism.
Entre las características que hicieron que seleccionara este magnífico plugin están:
- Selección de lenguajes: se puede personalizar el plugin seleccionando solamente los lenguajes requeridos.
- Súpersimple: incluye solamente dos archivos prism.css (este se puede incluir en el style.css y prescindir de él) y prism.js (core)
- No jQuery: una de mis metas para el desarrollo del tema era no usar jQuery, este plugin está hecho en javascript plano.
- Súperligero: el core minificado y con compresión gzip solo pesa 1.6KB. Cada lenguaje adicional añade de 0.3 a 0.5KB y los temas oscilan alrededor de 1KB.
- Intuitivo: las clases de CSS para los lenguajes se heredan, solamente es necesario definir el lenguaje una vez para múltiples bloques de código.
- Extensible: se pueden definir nuevos lenguajes o extender los existentes.
- Estilos de CSS fáciles: todos los estilos se definen a través de CSS, con nombres de clases sensibles como .comment, .string, .property, etc.
Para incluir Prism en el tema solamente es necesario inyectar el js en el código HTML a través del archivo functions.php:
wp_enqueue_script( 'prism', get_template_directory_uri() . '/js/prism.js' );
O si eres de los obsesivos-compulsivos (como yo) y prefiere cargar los scripts al final del documento HTML, es necesario añadir el código anterior justo antes de <?php wp_footer(); ?> del archivo footer.php del tema.
Para evitar una petición http adicional innecesaria (faster, faster!), agregar el código CSS en el archivo de estilos principal del tema (style.css).
La utilización del plugin más sencilla no puede ser, simplemente se utilizan los elementos semánticos correctos con la siguiente sintaxis:
<pre><code class="language-???">código</code></pre>
Ejemplos:
<pre><code class="language-css">p { color: blue; }</code></pre>
Resulta en:
p { color: blue; }
<pre><code class="language-bash">if [ ! -e $LOCK ]; then
touch $LOCK
rsync -avz foo bar
rm $LOCK
else
echo "rsync ya se está ejecutando"
fi</code></pre>
Resulta en:
if [ ! -e $LOCK ]; then
touch $LOCK
rsync -avz foo bar
rm $LOCK
else
echo "rsync ya se está ejecutando"
fi
Vale la pena mencionar que sitios muy importantes como Mozilla Developer utilizan este gran plugin.
Nota: Prism no brinda soporte para IE 6-8 (meh!) los que estén interesados en leer código probablemente usen un navegador web moderno.