Casi todos los blogueros de tecnología, creadores de contenido o desarrolladores necesitan mostrar fragmentos de código resaltados en su blog. Eso puede ser un dolor de cabeza en sí mismo. Sin embargo, también puede ser necesario resaltar una línea o líneas dentro de ese fragmento y, lamentablemente, esa función no forma parte de la mayoría de las incrustaciones de código. Afortunadamente, existe el complemento SyntaxHighlighter Evolved. Le mostraremos cómo usarlo para mantener el código lo más limpio y legible posible.
Suscríbete a nuestro canal de Youtube
Instalar y activar el complemento es sencillo. Puede encontrarlo en el repositorio de complementos de WP.org , pero asegúrese de obtener el realizado por Alex Mills (Viper007Bond) . Hay muchos complementos con nombres y características similares, pero sabemos que este es confiable y se mantiene actualizado. Además, este viene con un bloque especializado para el editor Gutenberg . Sin mencionar una serie de parámetros que le permiten personalizar su experiencia, lo que la convierte en nuestra elección para este tipo de tareas.
En el menú Configuración en su panel de WordPress, encontrará un nuevo elemento llamado SyntaxHighlighter . Continúe y haga clic en él. Allí, puede ajustar cada pequeña cosa que necesite para incrustar los fragmentos de código en su sitio de WordPress.
Configuración del resaltador de sintaxis
La página de configuración del complemento es relativamente sencilla. Un elemento particular que nos gusta de este complemento es que obtienes una buena cantidad de personalizaciones con respecto a cómo se muestra el código en tu sitio. Puede agregar clases de CSS a la inserción, ajustar el relleno de números de línea, elegir temas de color, usar pestañas inteligentes y ajuste de línea, y decidir cómo cargar resaltado de lenguaje de codificación individual en una escala de todo el sitio.
Queremos mencionar tres configuraciones particulares que creemos que la mayoría de la gente debería conocer.
Versión del complemento, números de línea y tamaño de pestaña
El primero es qué versión del complemento carga. Si bien el complemento en sí se mantiene actualizado en el repositorio, dependiendo de cómo desee mostrar mejor su código, puede elegir entre las versiones 2.x y 3.x del complemento . Ambos son seguros, sin embargo, cada uno ofrece características específicas que el otro no ofrece (al menos en el momento de escribir este artículo).
Si lo más importante es que los usuarios copien su código, entonces la versión 3.x funcionará bien. Sin embargo, si el suyo es más para la visualización que para la utilidad real, el ajuste de palabras de la versión 2.x puede ser más adecuado para usted porque evita la necesidad de barras de desplazamiento en grandes fragmentos de código.
Luego tiene si mostrar o no los números de línea. Para grandes piezas de código y tutoriales, los números de línea son invaluables. Sin embargo, cuando tiene fragmentos cortos, no hay necesidad de etiquetarlos continuamente como líneas 1 y 2. Quitarlos puede limpiar bastante la apariencia del código.
Y luego está el siempre controvertido tamaño de la pestaña . La opción predeterminada es 4, pero puede cambiarla a cualquier número que desee. Incluyendo el valor correcto de 2. (Sí, nos damos cuenta de que no hay un valor correcto. Simplemente nos gustan los 2 espacios para las pestañas).
Su código y códigos cortos
Si se desplaza hasta la parte inferior de la página Configuración , verá una vista previa de código grande, así como una gran cantidad de parámetros de código abreviado. Su tiempo estaría bien invertido repasándolos, solo para ver qué puede hacer todo el complemento para resaltar sus fragmentos de código. Además, cualquier cambio que haya realizado anteriormente sobre cómo se muestra el código en la configuración anterior se reflejará aquí. Así que asegúrese de presionar guardar después de cambiar cualquiera de las opciones.
Si bien algunas personas no son muy fanáticas de los códigos abreviados porque pueden vincularlo a ciertos complementos, creemos que vale la pena usarlos porque son inteligentes y fáciles de recordar. Si nada más, debe recordar dos cosas y luego el complemento funcionará de la mejor manera para usted.
- o
01020304050607or or or...well, you get it</li><li>[highlight 5-9]</li></ul>Or some variation thereof. If you can remember those, you're pretty solid for most things you will use the plugin for.While you can use the long-form language identifiers, the SyntaxHighlighter is built well enough to make things easy on you. Here on the ET blog, whenever you see a code snippet, we have a similar shortcode processor where we just use <strong>code written here, y está formateado y resaltado.
Usando los códigos cortos
En cualquier lugar donde pueda generar un código abreviado, puede usarlos. En Divi o el editor clásico, puede usar el módulo de texto o el editor TinyMCE y simplemente pegar el código entre los códigos cortos. Debido a cómo funciona la pestaña Visual, sugerimos que use la pestaña Texto para mantener un formato de carácter especial.
Si es usuario de Gutenberg/Block Editor, las cosas son igual de simples. Puede, nuevamente, usar el bloque de texto para esto. Incluso más fácil que eso es el bloque HTML personalizado . Al igual que arriba, pegue el código dentro de las etiquetas de shortcode.
Incluso mejor que eso, sin embargo, es el propio bloque SyntaxHighlighter Evolved. Incluido con la instalación del complemento está su propio Bloque Gutenberg, de modo que si no eres una persona de código abreviado y no quieres jugar con los parámetros, no tienes que hacerlo. Simplemente busque el bloque en Formato e insértelo en su publicación o página.
Independientemente de cómo inserte el código, verá la misma representación en la parte frontal de su sitio de WordPress.
Terminando
Hay muchas razones por las que puede necesitar presentar fragmentos de código a su audiencia. Tal vez escriba tutoriales o tal vez publique soluciones a problemas comunes para que el público las tome y las use cuando las necesite. Pero a veces, una inserción de GitHub simplemente no proporciona el tipo exacto de experiencia que desea para sus usuarios. Ahí es cuando necesitas un complemento como SyntaxHighlighter Evolved. Con unos pocos clics, un poco de personalización y un bloque de Gutenberg o un código abreviado, su audiencia leerá su código sin problemas.
¿Qué usos podrías encontrar en tu sitio para resaltar código como este?
Imagen destacada del artículo por Adil Bouyghajden / shutterstock.com