¿Alguna vez ha intentado simplemente copiar y pegar fragmentos de código en WordPress? ¡De plano no funciona! WordPress no tiene forma de diferenciar entre un fragmento de código que desea mostrar como código fuente y un fragmento de código que desea representar.
Si a menudo necesita compartir fragmentos de código con sus lectores, definitivamente necesita una mejor manera. Y de eso se trata esta publicación: las mejores herramientas y complementos para ayudarlo a agregar fragmentos de código elegantes y fáciles de leer a WordPress.
Empecemos desde el principio:
WordPress tiene algunas formas integradas de mostrar fragmentos de código. No siempre son los más bonitos, pero son funcionales. Los dos métodos básicos son etiquetas <code></code> o <pre></pre>. Ambos mostrarán sus fragmentos de código, pero tienen diferentes estilos que dependerán de su tema específico.
Por ejemplo, así es como se ven las diferentes etiquetas usando el tema predeterminado de WordPress Twenty Sixteen:
Pero estos son los principales problemas con estas etiquetas predeterminadas:
- Tiene que codificar su fragmento de código como una cadena antes de poder mostrarlo. Esto requiere que pegue su código en un codificador como Code Beautify y luego agregue la salida entre sus etiquetas <code> o <pre>.
- No hay números de línea, lo que facilita mucho la lectura del código.
- No hay resaltado de sintaxis. El resaltado de sintaxis hace que los diferentes elementos del código sean de diferentes colores, lo que nuevamente hace que la lectura del código sea mucho más simple.
Entonces, profundicemos en algunos métodos para agregar fragmentos de código a WordPress que son más fáciles de insertar y más fáciles de leer para los usuarios.
1. Resaltador de sintaxis evolucionado
SyntaxHighlighter Evolved es un complemento popular para incrustar fragmentos de código resaltados y numerados en WordPress. Todo lo que necesita hacer es envolver su código en el código abreviado relevante y se mostrará algo como esto:
También puede usar un estilo diferente para mostrar el código que incluye ajuste de línea, pero como resultado dificulta que los lectores copien y peguen directamente el código:
Características clave:
- Agrega números de línea a fragmentos de código
- Agrega resaltado de sintaxis a fragmentos de código
- Diferentes opciones de tema de color
- Puede colapsar cuadros de código para ocupar menos espacio
- Puede agregar clases de CSS personalizadas para obtener más opciones de estilo
Precio : Gratis | Más información
2. Resaltador de sintaxis Crayon
Crayon Syntax Highlighter es otro complemento popular que agrega números de línea y resaltado de sintaxis a sus fragmentos de código. En comparación con SyntaxHighlighter Evolved, Crayon Syntax Highlighter tiene mucha más personalización. Puede configurar casi todo sobre el complemento en su pestaña de configuración.
También puede hacer cosas como duplicar automáticamente el estilo de Sublime Text (un popular editor de código ):
Características clave:
- Agrega números de línea a sus fragmentos de código
- Agrega resaltado de sintaxis
- Admite 65 idiomas diferentes
- Toneladas de estilos, algunos de los cuales imitan editores de código populares
- Fácil de personalizar cada aspecto de su caja de presentación
Precio: Gratis | Más información
3. oIncrustar esencia
oEmbed es un complemento simple que le permite incrustar fácilmente elementos esenciales. Ya sé tu siguiente pregunta… ¿Qué es lo esencial? Gist proviene de GitHub y es una forma sencilla de compartir fragmentos de código y notas. Para usarlo, solo necesita pegar su código en el Editor Gist y crear un Gist público:
Luego, solo necesita pegar la URL de su esencia en el Editor de WordPress y el complemento incrustará automáticamente su fragmento de código de esta manera:
Características clave:
- Aprovecha GitHub Gist
- Incrustar esencias pegando URL
- Puede incrustar revisiones específicas o archivos individuales de esencias de varios archivos
Precio: Gratis | Más información
4. WP-GeSHi-Destacados
WP-GeSHi-Highlight es otro complemento que agrega números de línea y resaltado de sintaxis al código que pega en el editor de WordPress. Como sugiere el nombre, se basa en el motor de resaltado GeSHi. También le permite usar etiquetas <pre> normales siempre que defina el lenguaje de codificación.
WP-GeSHi-Highlight es liviano, tanto en términos de funcionalidad como de código de salida:
Características clave:
- Agrega resaltado de sintaxis usando GeSHi
- Agrega numeración de línea opcional
- Incrustar usando etiquetas estándar <pre> con el idioma definido
- Ligero: solo agrega una solicitud HTTP
Precio : Gratis | Más información
5. Papelera
Pastebin es otro sitio web para compartir fragmentos de código. Funciona de manera muy similar a la herramienta GitHub Gist que le mostré anteriormente. Y al igual que con GitHub Gist, este complemento hace que sea muy fácil incrustar el código Pastebin en su sitio de WordPress.
Todo lo que necesita hacer es agregar su código a Pastebin, luego puede simplemente pegar la URL de Pastebin en su editor de WordPress para incrustar automáticamente sus fragmentos de código como este:
Si el código tiene resaltado de sintaxis o no, dependerá de la configuración que use en Pastebin.
Características clave:
- Insertar código directamente desde Pastebin
- Incluye números de línea y resaltado de sintaxis (opcional)
- Simplemente pegue la URL en el Editor de WordPress
- También se puede incrustar usando un código abreviado y el ID de Pastebin
Precio: Gratis | Más información
6. Código de pasta
Pastacode lo ayuda a incrustar fragmentos de código utilizando la popular biblioteca PrismJs. Puede resaltar líneas específicas en sus fragmentos de código y cambiar estilos usando uno de los temas incluidos. Pastacode también admite código incrustado de GitHub, Gist, Pastebin, BitBucket o BitBucket, lo que lo hace muy versátil.
Características clave:
- Agregar números de línea a fragmentos de código
- Agregar resaltado de sintaxis a fragmentos de código
- Utiliza la biblioteca PrismJs
- Puede incrustar código de GitHub, Gist, Pastebin y más.
- Puede resaltar líneas específicas de código
Precio: Gratis | Más información
7. Código embellecer
Code Prettify usa la biblioteca de Google Code Prettify para agregar automáticamente resaltado a su <pre> y <code> con su complemento activado, usted y las salidas se verán como a continuación, en lugar de las feas versiones que le mostré al comienzo de esta publicación:
Características clave:
- Funciona con las etiquetas predeterminadas <code> y <pre>
- Utiliza la biblioteca Google Code Prettify
- Adecuadamente minimizado y encolado
Precio : Gratis | Más información
Terminando
Ya sea que desee incrustar fragmentos de código directamente en sus publicaciones o traer código de herramientas externas como GitHub o Pastebin, estos complementos lo ayudarán a lograrlo. Si tuviera que elegir mi favorito absoluto, sería Crayon Syntax Highlighter por la variedad de estilos y temas que puede usar.
¿Tiene un método favorito para mostrar fragmentos de código en sus publicaciones de WordPress? ¡Me encantaría saberlo en los comentarios!
Imagen en miniatura del artículo por Naghiyev / shutterstock.com