Cómo añadir resaltado de sintaxis a tu web

Uno de los mayores problemas que encontramos las personas que escribimos sobre programación es la necesidad de mostrar el código fuente de manera sencilla. Esto se hace normalmente mediante algún sistema de resaltado de sintaxis, el cual nos permite colorear cada conjunto de palabras claves.

Añadiendo resaltado de sintaxis a tu web

El resaltado de sintaxis está presente en todos los editores de código, pero también lo podemos usar en una web mediante Prism.

Este desarrollo nos va a permitir mediante el uso de un fichero JavaScript que contiene los patrones y otro CSS que cuenta con los colores, conseguir un resaltado de sintaxis profesional, que no tiene nada que envidiar al de tu entorno de desarrollo. Este desarrollo además es compatible con multitud de lenguajes (más de 100) y cuenta con temas y plugins para que podamos adaptar el aspecto final. Finalmente podemos decir que tal es la calidad, que algunas empresas como Mozilla lo usan en su documentación online.

¿Cómo funciona el resaltado de sintaxis?

Seguramente algunos os preguntaréis, pero cómo es posible de identificar que un bloque de código es un comentario o que return es una palabra reservada. La solución a esta cuestión es que usa expresiones regulares para identificar aquellos bloques singulares que deben ser resaltados.

Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\w\W]*?\*\//,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0}],
string:{pattern:/(["'])(\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},
"class-name":{pattern:/((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/i,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},
keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,
"boolean":/\b(true|false)\b/,
"function":/[a-z0-9_]+(?=\()/i,
number:/\b-?(?:0x[\da-f]+|\d*\.?\d+(?:e[+-]?\d+)?)\b/i,
operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,
punctuation:/[{}[\];(),.:]/};

En el fragmento superior podéis ver cómo está construido el resaltado de sintaxis para C y C++.

Cómo usarlo en tu web

Una vez que tengas enlazados los ficheros de Prism, sólo utilizar el siguiente esquema para que funcione el resaltador de sintaxis.

<pre>
    <code class="language-javascript">
        var selector = document.getElementById("selector");
    </code>
</pre>

Cómo usarlo en WordPress

Como muchos de vosotros sabréis WordPress es la mayor plataforma de creación de contenido a nivel mundial y usa un sistema de plugins para añadir funcionalidad al mismo. En este caso, podemos utilizar el plugin APH Prism Highlighter para incluir toda la funcionalidad anterior de un modo sencillo. Este plugin tiene soporte para definir el estilo del resaltado de sintaxis y los lenguajes a utilizar, incluyendo al mismo tiempo un botón de acceso directo para incluir código en tu web.

Espero que este artículo sobre el resaltado de sintaxis haya sido de tu agrado y te agradecería tus comentarios y tu difusión.

Saludos