Casi todos los blogueros, creadores de contenido o los desarrolladores de tecnología a veces necesitan mostrar fragmentos de código resaltados en su blog. Esto puede ser un dolor de cabeza en sí mismo. Sin embargo, también puede ser necesario resaltar una o más líneas en este fragmento y, lamentablemente, esta funcionalidad no forma parte de la mayoría de las integraciones 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.
Sintaxis Highlighter Evolved
La instalación y activación del complemento es simple. Puede encontrarlo en el repositorio de complementos de WP.org pero asegúrese de que esté bien hecho por Alex Mills (Viper007Bond), porque de hecho, hay muchos resultados. Sin embargo, sabemos que es confiable y está actualizado. Además, este viene con un bloque especializado para el editor de Gutenberg. Por no hablar de una serie de parámetros que te permiten personalizar tu experiencia, lo que la convierte en nuestra elección para este tipo de tareas.
En el menú Parámetros de su panel de WordPress, encontrará un nuevo elemento llamado Sintaxis Alumbrador . Adelante, haz clic en él. Allí puede ajustar todo lo que necesitará para incrustar los fragmentos en su sitio de WordPress.
Configuración 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 incrustación, ajustar el relleno del número de línea, elegir temas color, use pestañas inteligentes y saltos de línea, y decida cómo se carga el lenguaje de codificación individual en todo el sitio.
Queremos definir tres parámetros particulares que la mayoría de las personas deberían saber.
Versión del complemento, números de línea y tamaños de tabulación
La primera es qué versión del complemento está cargando. Aunque el complemento permanece actualizado en el repositorio, puede elegir entre las versiones 2.xy 3.x del complemento , dependiendo de cómo desee mostrar su código. Ambos son seguros, sin embargo, cada uno ofrece características específicas que el otro no tiene (en el momento de escribir este artículo).
Si los usuarios copian su código es lo más importante, la versión 3.x servirá. Sin embargo, si el suyo es más útil para mostrar que la utilidad real, entonces la nueva línea en la versión 2.x puede ser mejor para usted, ya que elimina la necesidad de usar barras de desplazamiento. para fragmentos de código grandes.
Entonces necesitas mostrar o no los números de línea. Para grandes trozos de código y tutoriales, los números de línea son invaluables. Sin embargo, cuando tiene fragmentos cortos, no es necesario etiquetarlos permanentemente como líneas 1 y 2. Quitarlos puede mejorar significativamente la apariencia del código.
Y luego está el tamaño de pestaña todavía controvertido. 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. Solo nos gustan 2 espacios para las pestañas).
Tu código y shortcodes
Si se desplaza hasta el final de la página Parámetros , verá una vista previa del código grande, así como una gran cantidad de parámetros de código corto. Sería bueno que invirtiera su tiempo en revisarlos, solo para ver qué puede hacer todo el complemento para mostrar sus fragmentos. Además, aquí se reflejará cualquier cambio que haya realizado anteriormente en la visualización del código en la configuración anterior. Así que asegúrese de presionar guardar después de cambiar cualquiera de las opciones.
Si bien es posible que algunas personas no sean los mayores fanáticos de los códigos cortos porque pueden vincularlo a ciertos complementos, creemos que vale la pena usarlos porque son inteligentes y fáciles de recordar. Por lo menos, debe recordar dos cosas y luego el complemento funcionará de la mejor manera para usted.
ou ou ou et...bien, vous obtenez</li><li>[highlight 5-9]</li></ul>
O algunas variaciones. Si puede recordar, está seguro de las diferentes cosas que puede hacer con este complemento. Si bien puede usar un identificador largo, el complemento SyntaxHighlighter está lo suficientemente bien desarrollado para simplificar su trabajo.
Usa códigos cortos
En cualquier lugar donde pueda representar un código abreviado, puede usarlos. Dentro 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 usar la pestaña textos para mantener estos caracteres especiales de formato.
Si eres un usuario de Gutenberg / Block Editor, las cosas son así de simple. Puede, nuevamente, usar el bloque de texto para esto. Aún más fácil, el bloque HTML personalizado. Como arriba, pegue el código en las etiquetas de shortcode.
Mejor aún, el bloque SyntaxHighlighter Evolved es él mismo. La instalación del complemento incluye su propio bloque Gutenberg; así que si no eres un shortcode y no quieres perder el tiempo con la configuración, no tienes que hacerlo. Solo encuentra el bloque debajo formateo e insértelo en su mensaje o página.
No importa cómo inserte el código, verá la misma representación en el front-end de su sitio de WordPress.
Para resumir
Es posible que deba presentar fragmentos a su audiencia por varias razones. ¿Quizás escribe tutoriales o publica soluciones a problemas comunes que la audiencia puede tomar y usar como quiera? Pero a veces, una integración de GitHub simplemente no brinda el tipo de experiencia que desea para sus usuarios. Aquí es cuando necesita un complemento como SyntaxHighlighter Evolved.
Con solo unos pocos clics, con un poco de personalización y un bloque o shortcode Gutenberg, su audiencia explorará su código sin problemas.
