Cómo y por qué he incorporado Prism.js en mi web

Una de las cosas importantes que quería hacer para mis tutoriales era implantar un sistema de resaltado de código con el que estuviera contento, tanto a la hora de trabajar como visualmente, también quería entrar en mis tutoriales y poder copiar parte del código para poder reutilizarlo, tener el control de lo que quiero mostrar y añadir ciertas funcionalidades a mi bloque de código.

Tenemos varias opciones para resaltar nuestro código, desde escribir el código entre etiquetas <pre> y <code> y luego darle algunos estilos con CSS, también hay mucha gente que hace capturas de pantalla de su editor de código (esta opción nunca fue valorada para mi) para luego incorporarlas como imágenes, también en WordPress existen varios plugins de resaltado (highlighter) con lo que puedes conseguir un resultado casi idéntico al que tengo ahora, pero supondría depender de otro plugin y de sus actualizaciones. Y por último, está la opción por la que me he decantado, que es utilizar Prism.js, una pequeña herramienta con la que genero una librería de javascript con las funcionalidades que quiero para mi resaltado sintaxis y también me genera un archivo CSS para darle estilos a mi código.

¿Qué cosas interesantes me gustan de prism.js?

• Disponible hasta 8 temas de color para elegir.
• El núcleo pesa 2kb pero aumenta según le añades lenguajes de programación y funcionalidades.
• Dispone de plugins para extender su funcionalidad.
• Increíblemente rápido, soporta el paralelismo con los web workers si están disponibles.
• Dispone de muchos ejemplos para copiar y pegar.
• La definición del lenguaje se hereda.
• Dispone de hooks para extender su funcionalidad, podemos hacer nuestros propios plugins.
• Soportado por todos los navegadores a excepción de internet explorer hasta la versión 10.
• Lo utilizan grandes marcas como smashing magazine, css tricks, React, sitepoint…
• En la web tienes una pagina donde puedes hacer Tests.
• Puedes ver en su web unos cuantos tutoriales muy fáciles de seguir.

¿Cómo lo vamos a desarrollar? (Pequeña receta)

1. 1. Lo primero que tenemos que hacer es darle al botón DOWNLOAD que nos llevará a una herramienta para generar los archivos Javascript y CSS necesarios.
2. 2. Comenzamos con la personalización, lo primero que hacemos es seleccionar el tipo de compresión que queremos para nuestros ficheros, podemos generar una versión de desarrollo y una versión minificada (esta versión tiene una mejor performans).
3. 3. Ahora toca elegir el theme y los estilos que va a llevar. Tienes 8 temas distintos para todos los gustos.
4. 4. Seguimos eligiendo los lenguajes de programación, es importante saber cuales vamos a utilizar en los snippets de código que vamos a mostrar. Ten en cuenta que por cada lenguaje que añades aumenta el peso del fichero de javascript.
5. 5. La última personalización te permite elegir entre una serie de plugins que extienden la funcionalidad para tu sintaxis de marcado. Te dejo una captura para que veas las funciones que puedes añadir.

1. 6. Descargamos los archivos Javascript y CSS
2. 7. La idea principal por la que he optado para este proyecto, a sido la de crear mi propio plugin de syntax highligter. Este plugin es donde voy a subir los archivos descargados y también donde voy a crear un archivo principal con extensión .php en el que tendré la cabecera del plugin y unas funciones para registrar y encolar los archivos que acabamos de descargar. He creado dentro del plugin una carpeta /js y otra /css para tener los archivos mejor organizados.
3. Otra forma de hacer esto sería, añadiendo los archivos directamente a nuestro tema hijo y registrar y encolar los archivos a través del archivo functions.php también del tema hijo. El inconveniente de hacerlo de esta forma es qué, si un día queremos cambiar nuestro tema, tendremos que acordamos de trasladar todo este código y archivos al nuevo tema que hayamos instalado o lo mas probable sera que no nos acordemos y que perdamos toda la configuración y dejemos de ver los snippets que hemos ido creando durante mucho tiempo.
4. Ahora puedes ver el código que he utilizado en el archivo principal de mi plugin. Siéntete libre de copiarlo y adaptarlo a tu estructura de carpetas. También puedes descargarlo de mi repositorio de github.

1. 8. Una vez tenemos el plugin subido con sus carpetas y archivos activado, tenemos que ir a una publicación y añadir un bloque HTML, en este bloque utilizaremos las etiquetas que nos indica Prism.js en las que tiene que ir nuestro fragmento de código. En la etiqueta <code> tenemos que indicarle el leguaje que vamos a mostrar.

<pre><code class="language-php">

 // Aquí iria nuestro snippet de PHP

</code></pre>

1. 9. Un pequeño truco que utilizo yo para cuando tengo un snippet donde mezclo varios lenguajes de programación por ejemplo HTML y PHP. Esto es muy habitual en snippets de WordPress, entonces para que se me vean los dos lenguajes bien pintados añado <script type=»text/plain»></script>

<pre><code class="language-php">
<script type="text/plain">

 // Aquí iria nuestro snippet de HTML y PHP

</script>
</code></pre>

Con estos dos snippets anteriores ya podríamos empezar a introducir códigos para compartir con nuestros lectores. Espero que hayas entendido todos los pasos, como ves son unos pasos muy sencillos de hacer. Personalizas tu librería añadiéndoles los plugins que necesites o quieras, descargas los archivos CSS y JS, creas un plugin con un archivo con el nombre del plugin.php, le añades una cabecera y registras y encolas los archivos descargados que colocas previamente en unas carpetas, subes el plugin a tu WordPress y juegas con los últimos snippets de la receta, Si tienes algún problema en algún paso o no lo entiendes, deja un comentario y quizá te pueda ayudar.

Esto daría para más tutoriales. ¿Qué más podemos hacer?

• Subir el plugin al un repositorio de Github, aquí te dejo el mío ie-syntax-highlighter
• Añadir mas funcionalidades u opciones al plugin.