Cómo mostrar fragmentos de código resaltados en su sitio de WordPress


Casi todos los bloggers de tecnología, creadores de contenido o desarrolladores necesitan a veces mostrar fragmentos de código resaltados en su blog. Eso puede ser un dolor de cabeza en sí mismo. Sin embargo, resaltar una línea o líneas dentro de ese fragmento también puede ser necesario, y desafortunadamente esa característica 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.

(incrustar) https://www.youtube.com/watch?v=gBHk6QwlYsQ (/ incrustar)

Suscríbase a nuestro canal de Youtube

Sintaxis Highlighter Evolved

Fragmentos de código resaltados

Instalar y activar el complemento es sencillo. Puede encontrarlo en el repositorio de complementos de WP.org, pero asegúrate de hacerlo Alex Mills (Viper007Bond). Hay muchos complementos con nombres y funciones similares, pero sabemos que este es confiable y está 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 que lo convierte en nuestra elección para este tipo de tarea.

Fragmentos de código resaltados

Bajo la Configuraciones menú en su panel de WordPress, encontrará un nuevo elemento etiquetado Sintaxis Highlighter. Continúa y haz 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 de resaltado de sintaxis

La página de configuración del complemento es relativamente sencilla. Un elemento particular que nos gusta de este complemento es que obtiene una buena cantidad de personalizaciones con respecto a cómo se muestra el código en su sitio. Puede agregar clases CSS a la inserción, ajustar el relleno del número de línea, elegir temas de color, usar pestañas inteligentes y ajuste de palabras, y decidir cómo cargar el resaltado de lenguaje de codificación individual en una escala de todo el sitio.

Fragmentos de código resaltados

Queremos mencionar tres configuraciones particulares que creemos que la mayoría de las personas deberían conocer.

Versión del complemento, números de línea y tamaño de pestaña

La primera 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, puedes elegir entre las versiones 2.xy 3.x del complemento. Ambos son seguros, sin embargo, cada uno ofrece características específicas que el otro no (al menos al momento de escribir este artículo).

Si los usuarios que copian su código es lo más importante, entonces la versión 3.x funcionará bien. Sin embargo, si el suyo es más para mostrar que para la utilidad real, el ajuste de texto de la versión 2.x puede ser más adecuado para usted porque evita la necesidad de barras de desplazamiento en fragmentos grandes de código.

Luego tiene si mostrar o no los números de línea. Para piezas grandes de código y tutoriales, los números de línea son invaluables. Sin embargo, cuando tiene fragmentos cortos, no es necesario etiquetarlos continuamente como líneas 1 y 2. Eliminarlos puede limpiar bastante el aspecto del código.

Y luego está el siempre controvertido tamaño de 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. Solo nos gustan los 2 espacios para pestañas).

Su código y códigos cortos

Si te desplazas hacia la parte inferior de la Configuraciones página, verá una vista previa de código grande, así como una gran cantidad de parámetros de código corto. Tendría que dedicar mucho tiempo a revisarlos, solo para ver qué puede hacer todo el complemento para resaltar los fragmentos de código. Además, cualquier cambio que haya realizado anteriormente en la forma en que 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.

Fragmentos de código resaltados

Si bien algunas personas no son los mayores fanáticos de los códigos cortos porque pueden vincularlo con ciertos complementos, creemos que vale la pena usarlos porque son inteligentes y son fáciles de recordar. Por lo menos, debe recordar dos cosas y luego el complemento funcionará de la mejor manera para usted.

  • o
     or  or  or...well, you get it
  • (highlight 5-9)
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 code written here

, y está formateado y resaltado.

Usando los códigos cortos

En cualquier lugar donde pueda renderizar un shortcode, 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. Sugerimos, debido a cómo funciona la pestaña Visual, que use el Texto pestaña para que estos mantengan un formato de caracteres especial.

Fragmentos de código resaltados

Si eres 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.

Fragmentos de código resaltados

Sin embargo, incluso mejor que eso, es el bloque SyntaxHighlighter Evolved. La instalación del complemento incluye su propio Bloque Gutenberg, de modo que si no es una persona de código corto y no quiere jugar con los parámetros, no tiene que hacerlo. Simplemente encuentra el bloque debajo Formateo e insértelo en su publicación o página.

Fragmentos de código resaltados

Independientemente de cómo inserte el código, verá la misma representación en el front-end de su sitio de WordPress.

Fragmentos de código resaltados

Terminando

Hay muchas razones por las que puede necesitar presentar fragmentos de código a su audiencia. Tal vez escriba tutoriales o publique soluciones a problemas comunes para que el público los tome y use según lo necesite. Pero a veces, una inserción de GitHub simplemente no proporciona el tipo exacto de experiencia para sus usuarios que desea. Es entonces cuando necesita un complemento como SyntaxHighlighter Evolved. Con unos pocos clics, un poco de personalización y un bloque Gutenberg o un código corto, su audiencia va a leer su código sin ningún problema.

¿Qué usos podrías encontrar en tu sitio para resaltar código como este?

Imagen destacada del artículo de Adil Bouyghajden / shutterstock.com