Si haces uso de WordPress en tu sitio web o blog y eres un desarrollador web, entonces es probable que a menudo presentes fragmentos de código en tutoriales. Aunque es posible mostrar código fuente sin ningún tipo de formato, es una buena idea organizar el código para que las personas puedan copiar y pegar de forma más sencilla.
Aparte de añadir espaciado por línea de texto, existe la posibilidad de hacer lucir tu código fuente como si hubiera sido sacado de un editor: posee diferenciación por colores, líneas numeradas y sangría en ciertas líneas para que el código luzca mucho más organizado. Es posible mostrar código fuente en tus entradas mediante el uso de plugins WordPress gratuitos, los cuales te mencionamos a continuación:
Code Snippets CPT
Code Snippets CPT crea un nuevo tipo de entrada llamado “Snippets” en donde puede mantener tu librería de código y añadir taxonomías para clasificar cada fragmento de código que decidas añadir. Puedes incrustar estos “snippets” con opción de resaltado de sintaxis en entradas o página mediante un útil botón en donde encontrarás los fragmentos de códigos más recientes de tu librería.
Con Code Snippets CPT puedes copiar fragmento de código, elegir el lenguaje para la sintaxis, activar la vista completa, acceder a una vista completa del código, así como tener vistas previas en vivo en el editor visual de WordPress.
Preserve Code Formatting
Preserve Code Formatting, como su nombre indica, previene que WordPress modifique tu código, además conserva el espaciado que has establecido para tu código cuando creas una entrada con el editor visual de WordPress.
Asimismo, Preserve Code Formatting evita que otros plugins modifiquen tu código, mantiene el código añadido en comentarios y previene que los códigos cortos sean procesados.
WP-SynHighlight
WP-SynHighlight es un plugin que añade opción de resaltado de sintaxis en entradas y comentarios desde el editor visual de WordPress. Posee botones en su interfaz que pueden ayudarte con las opciones de resaltado, de modo que no es necesario que memorices nada. También puedes activar el resaltado de sintaxis en tiempo real si es realmente conveniente para ti.
Con WP-SynHighlight tienes una serie de opciones a tu disposición para el resaltado de tu código.
SyntaxHighlighter Evolved
SyntaxHighlighter Evolved te permite ingresar código resaltado sin mayores problemas. Hace uso del paquete de JavaScript SyntaxHighlighter de Alex Gorbachev en su funcionamiento, además es compatible con todos los parámetros que ofrece este útil paquete mediante el uso de códigos cortos.
SyntaxHiglighter Evolved es compatible con los lenguajes más populares como HTML, PHP, Python, JavaScript, CSS Ruby, Groovy, etc.
Crayon Syntax Highlighter
Crayon Syntax Highlighter es un plugin desarrollado en PHP y jQuery que es compatible con una gran cantidad de lenguajes y temas WordPress. Con este plugin puedes resaltar URL o texto, así como administrar archivos de lenguaje y definir elementos personalizados para cada lenguaje usando expresiones regulares.
Crayon Syntax Highlighter te permite añadir números de línea, copiar y pegar código, minimizay y expandir código, abrir código en una nueva ventana, combinar varios lenguajes, activar compatibilidad para código en comentarios, tener vista previa, entre otras útiles opciones.
WP-Syntax
WP-Syntax es un plugin que activa la opción de resaltado de código mediante GeSHi. Es compatible con una gran variedad de lenguajes, puedes activar y desactivar los números de línea según te convenga. También, mantiene el formato de cualquier fragmento de código que copies y pegues en el editor.
WP-Syntax evita conflictos con otros plugins al poner en funcionamiento filtros que sustituyen los fragmentos de código primero y luego les añade la opción de formato y resaltado. De esta forma, se obtiene un código fuente con las opciones de resaltado que has especificado.
Enlighter
Enlighter es un plugin sencillo de utilizar para mostrar código en WordPress. Se ha desarrollado en PHP y usa JavaScript, además ha sido basado en EnlighterJS para poder dar un gran formato a tu código. Para usar este plugin solo debe elegir el estilo del editor o añadir un código corto a los scripts que deseas destacar en tu sitio.
Enlighter incluye una herramienta para personalizar temas de manera que puedes modificar los temas predeterminados sin necesidad de añadir código CSS. Posee una vista previa, un editor visual completo, adición de códigos cortos en comentarios y widgets, editor de texto con opciones de código corto y etiquetas rápidas, opciones de configuración avanzada, entre otros.
Enlighter es compatible con una gran variedad de lenguajes como CSS, C++, HTML, Java, PHP, Python, JavaScript, Shell, etc.
Code Prettify
Code Prettify es un plugin que hace uso de la librería de Google Code Prettify para aplicar el resaltado de código de forma automática a todas las etiquetas <pre> y <code> en la página.
HTML Editor Syntax Highlighter
HTML Editor Syntax Highlighter, como su nombre indica, añade la opción de resaltado de código en entradas y páginas mediante el uso de Codemirror.js. Con este plugin puedes guardar rápidamente tus entradas y páginas presionando Ctrl+S y acceder al modo de página completa mediante F11. Ofrece también resaltado de sintaxis para códigos cortos y tiene una gran variedad de temas.
Better File Editor
Better File Editor es un plugin para mostrar código que añade número de línea, resaltado de sintaxis y muchas otras opciones al editor de temas y plugins en el panel de control. Posee un editor de código completo basado en Ace y viene con una serie de temas entre los que puedes elegir para cambiar el aspecto de tu editor.
Better File Editor es compatible con más de 50 lenguajes como AppleScript, C#, LESS, CoffeeScript, Jade, JSP, Lua, MySQL, Powershell, Scala, etc.
Developer Formatter
Developer Formatter es un plugin para mostrar código en páginas. Hace uso del sistema de resaltado GeSHi, de manera que es compatible con más de 100 lenguaje como PHP, HTML, Java, Python, Delphi, C++, etc.
Con Developer Formatter puedes esconder la barra de herramientas en bloques de códigos, configurar el inicio de las líneas de texto, resaltar sintaxis en etiquetas PRE, comentarios y con al atributo “Style” activo.
My Syntax Highlighter
My Syntax Highlighter es un plugin sencillo de emplear en el que puedes incrustar código fuente en páginas y entradas de tu sitio, sin perder el formato del código ni realizar ningún otro tipo de cambio manual. Se añade el resaltado de código mediante la librería CodeMirror, de esta manera tu código se mantiene organizado y los usuarios pueden fácilmente buscar la parte que más le interesa del tutorial o consejo que has compartido en tu página o blog.
My Syntax Highlighter utiliza la herramienta Shortcode-Processor para evitar que WordPress procese los fragmentos en código HTML, de esta forma se mantiene el formato de tu código fuente.
En conclusión…
Mostrar código fuente de forma organizada y mucho más atractiva de forma visual puede lograrse fácilmente gracias a la ayuda de los plugins mencionados. Son perfectos si eres un desarrollador y quieres dar formato rápidamente a tu código fuente. De esta manera, ayudas a tus usuarios a encontrar código de forma más sencilla, son particularmente útil si estás trabajando con códigos que poseen muchas líneas.
Todos los plugins WordPress gratuitos que mencionamos se encuentran en el directorio oficial, de modo que es seguro emplearlos pues cumplen con las normas de esta plataforma.
