Casi todos los blogueros de tecnología, creadores de contenido o desarrolladores tienen que mostrar fragmentos de código resaltados en su blog de vez en cuando. Esto puede ser un dolor de cabeza en sí mismo. Sin embargo, también puede ser necesario resaltar la línea o líneas en este fragmento y, lamentablemente, esta característica no forma parte de la mayoría de los códigos incrustados. Afortunadamente, hay un complemento SyntaxHighlighter Evolved. Le mostraremos cómo usarlo para mantener su código lo más limpio y legible posible.
Suscríbete a nuestro canal de YouTube
Resaltador de sintaxis evolucionado
Instalar y activar el enchufe es simple. Puede encontrarlo en el repositorio de complementos de WP.orgpero asegúrate de haberlo hecho Alex molinos (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 de Gutenberg. Sin mencionar los muchos parámetros que le permiten personalizar la experiencia que lo convierten en nuestra elección para este tipo de tareas.
Por debajo Ajustes en el panel de control de WordPress, encontrará el nuevo elemento marcado con Resaltado de sintaxis. Continúe y haga clic en él. Allí puede personalizar todo lo que necesita para incrustar 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. Una cosa particular que nos gusta de este complemento es que obtienes una gran cantidad de personalizaciones con respecto a cómo se muestra el código en tu sitio. Puede agregar clases de CSS para incrustar, personalizar el relleno de números de línea, elegir temas de color, usar tarjetas inteligentes y ajuste de palabras, y decidir cómo cargar lenguajes de codificación individuales en todo el sitio.
Nos gustaría mencionar tres configuraciones específicas que creemos que la mayoría de la gente debería conocer.
Versión de enchufe, números de línea y tamaño de tarjeta
La primera es la versión del complemento que está cargando. Si bien el complemento en sí se actualiza en el repositorio según 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 no existen (al menos en el momento de escribir este artículo).
Si los usuarios que copian su código son los más importantes, la versión 3.x estará bien. Sin embargo, si su aplicación es más visible que una herramienta real, la versión 2.x de ajuste de línea puede ser más adecuada para usted, ya que evita la necesidad de usar barras de desplazamiento en grandes fragmentos de código.
Luego tiene la opción de ver los números de línea. Para grandes fragmentos de código y tutoriales, los números de línea son invaluables. Sin embargo, si tiene fragmentos cortos, no es necesario que los marque constantemente como líneas 1 y 2. Eliminarlos puede mejorar en gran medida la apariencia de su código.
Y luego siempre es controvertido. tamaño de pestaña. La opción es 4 por defecto, pero puede cambiarla a cualquier número. Incluyendo el valor correcto de 2. (Sí, nos damos cuenta de que no hay un valor válido. Solo nos gustan 2 espacios para las pestañas).
Su código y accesos directos
Si te desplazas hacia abajo Ajustes página, verá una gran vista previa del código, así como una gran cantidad de parámetros de shortcode. Su tiempo estaría bien invertido en navegar a través de ellos, solo para ver qué puede hacer el complemento para que sus fragmentos de código se destaquen. Además, cualquier cambio realizado anteriormente en la forma en que se muestra el código en la configuración anterior se reflejará aquí. Así que recuerda presionar el botón Guardar después de cambiar cualquier opción.
Si bien algunas personas no son grandes admiradoras de los atajos, ya que pueden vincularlo a algunos complementos, consideramos que vale la pena usarlos, ya que son inteligentes y fáciles de recordar. Si nada más, hay dos cosas que debe recordar y luego el complemento funcionará mejor para usted.
- o
or 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 herey está formateado y resaltado.
Uso de códigos cortos
Donde sea que pueda representar un código abreviado, puede usarlo. 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 accesos directos. Le sugerimos que utilice las Visual Cards debido a su forma de funcionamiento. Texto para conservar el formato de caracteres especiales.
Si eres usuario del editor Gutenberg/Block, todo es igual de sencillo. Puede reutilizar un bloque de texto para esto. Aún más simple es el bloque HTML personalizado. Como arriba, pegue el código dentro de las etiquetas de shortcode.
Aún mejor, sin embargo, es el propio bloque SyntaxHighlighter Evolved. Su propio bloque de Gutenberg se incluye con la instalación del complemento, por lo que, a menos que sea un acortador de código y no quiera jugar con los parámetros, no tiene que hacerlo. Solo encuentra el bloque debajo Formateo 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 interfaz del sitio de WordPress.
Concluyendo
Hay muchas razones por las que puede necesitar presentar fragmentos de código a su audiencia. Tal vez esté escribiendo tutoriales, o tal vez esté publicando correcciones para problemas comunes que la audiencia puede tomar y usar cuando sea necesario. Pero a veces, la integración en GitHub simplemente no brinda a los usuarios la experiencia exacta que desea. 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 desgarrará su código sin esfuerzo.
¿Qué usos puedes encontrar en tu sitio para que este código se destaque?
El artículo presentaba una imagen de Adil Bouyghajden / shutterstock.com
