Dos nuevas soluciones para la visualización de código en WordPress

Cuando ejecuta un blog de WordPress que se ocupa del desarrollo de software, diseño web o WordPress, probablemente haya sentido la necesidad de integrar fragmentos de código en sus artículos. Pero WordPress no viene con una opción para mostrar el código correctamente. Por motivos de seguridad, el sistema de gestión de contenido filtra el código fuente que se implementa en artículos y widgets. Cada código ingresado debe enmascararse con entidades HTML. Eso es inconveniente y desagradable, por lo que hoy le mostraremos dos buenas soluciones para la visualización de código en WordPress.

Visualización de código n.º 1: el complemento evolucionado SyntaxHighlighter

SyntaxHighlighter Evolved es uno de los mejores complementos cuando se trata de mostrar código en WordPress. Es muy fácil de usar y ofrece resaltado de código para muchos lenguajes de marcado y programación diferentes. El resultado del artículo parece profesional y el complemento carga el código relativamente rápido.

Como se muestra, las líneas de código individuales también se pueden resaltar. El complemento se usa a través de códigos cortos.

Ejemplos:

Ingrese los siguientes códigos cortos en el editor de WordPress y el complemento convierte automáticamente el código en un diseño atractivo.

PHP:

CSS:

Un extracto de la variedad de configuraciones de este complemento:

• Desarrollador: Alex Mills (Viper007Bond)
• Trabajo en progreso: Sí
• Última versión de: 06.17.2015
• Costos: gratis en WordPress.org
• Licencia: LICENCIA PÚBLICA GENERAL GNU
• Incompatibilidades con otros complementos: aún no se ha oído hablar de ellos
• Página de inicio del desarrollador: Página de demostración de SyntaxHighlighter Evolved
• Descargar en WordPress.org

Ventajas y desventajas

La visualización del código en el sitio web se puede modificar mediante el uso de temas predefinidos, lo cual es un buen juguete. No es realmente necesario, sin embargo. Las ventajas del complemento son la excelente presentación visual de los bloques de código y también el hecho de que los archivos CSS y JavaScript requeridos solo se cargan en el documento cuando realmente hay un fragmento de código en el artículo. Cuando no hay un fragmento, los datos no se cargarán, lo que es beneficioso para el rendimiento del sitio web. Sin embargo, existe la desventaja de que el complemento solo muestra el código, pero no le permite administrarlo. Esto es muy inconveniente para los desarrolladores que a menudo trabajan con muchos fragmentos de código.

Visualización de código n.º 2: Integrar Gists de GitHub

Los Gists de Github son muy populares, ya que puede subcontratar todos sus fragmentos de código y recopilarlos en un solo lugar. De esta manera, siempre tendrá acceso a los fragmentos de código y también podrá compartirlos con otros desarrolladores. La visualización del código es atractiva y depende del lenguaje de programación o marcado utilizado. Entonces, ¿qué podría ser más obvio que implementar Gists en WordPress? Pero eso no funciona tan bien como te gustaría. También se necesita un complemento para esto.

Una cuenta de GitHub no es necesaria, pero tiene sentido

No se necesita una cuenta de GitHub para crear Gists y usarlos en artículos de WordPress. También puede crear Gists de forma anónima. Pero eso no tiene sentido, ya que la gran ventaja que tiene GitHub, ser la administración central de todos los fragmentos, desaparecería entonces. La creación de una cuenta, para beneficiarse de todas las ventajas, es gratuita.

Crear una esencia anónima | Crear una cuenta de GitHub

El complemento oEmbed Gist

Este pequeño complemento es responsable de una fácil incorporación de Gists en los artículos de WordPress. Una vez activado, el funcionamiento es muy sencillo: copiar el enlace al Gist y pegarlo en el editor. ¡Hecho!

Copiando el enlace a la esencia

Pegar el enlace en el editor visual de WordPress

El resultado final en el sitio web

• Desarrollador: Takayuki Miyauchi
• Trabajo en progreso: Sí
• Última versión de: 17.11.2015
• Costos: gratis en WordPress.org
• Licencia: LICENCIA PÚBLICA GENERAL GNU
• Incompatibilidades con otros complementos: aún no se ha oído hablar de ellos
• Página de inicio del desarrollador: no disponible
• Descargar en WordPress.org

Ventajas y desventajas

En mi opinión, no hay inconvenientes, ya que los archivos utilizados para mostrar los fragmentos solo se integran cuando es necesario; al igual que el complemento anterior. La gran ventaja es la administración central de todos sus fragmentos de código una vez que creó una cuenta de GitHub. Todos los bloques de código ubicados en un solo lugar le permiten compartir archivos rápidamente con otros. Una cuenta gratuita no solo le permite administrar sus fragmentos de código, sino también proyectos completos a los que puede invitar a otros desarrolladores y compañeros de trabajo.

Conclusión

Hemos presentado dos soluciones nuevas y funcionales para la integración de código en publicaciones de blog. SyntaxHighlighter definitivamente es bueno cuando no desea mostrar muchos bloques de código o no necesita administrarlos. Sin embargo, cuando trabaje con muchos fragmentos, debe configurar una cuenta gratuita de GitHub y elegir la solución utilizando los Gists incrustados. Hay una razón por la que todos los desarrolladores populares de WordPress tienen una cuenta de GitHub.

¿Busca complementos más recientes? Mira aquí…

(dpe)