Bloque de código SyntaxHighlighter

Este texto fue traducido usando IA. Si deseas ver el texto original en inglés, haz clic aquí.

Con el bloque SyntaxHighlighter Code, puedes mostrar código formateado en la parte pública de tu sitio.

Si tienes un sitio con plugins habilitados, instala el plugin SyntaxHighlighter Evolved para activar estas funciones.

Para añadir el bloque SyntaxHighlighter Code, haz clic en el icono + Insertador de bloques y busca «SyntaxHighlighter Code». Haz clic en él para añadir el bloque a la entrada o página.

Para más información, visita nuestras instrucciones detalladas sobre cómo añadir bloques.

Cuando hagas clic en el bloque, aparecerá una barra de herramientas con opciones encima de él:

El bloque SyntaxHighlighter Code tiene las siguientes opciones en su barra de herramientas:

• Cambiar el tipo de bloque.
• Arrastrar el bloque.
• Mover el bloque hacia arriba o hacia abajo.
• Alinear al centro, a la derecha o a la izquierda.
• Cambiar el lenguaje de código (configurado como texto sin formato de manera predeterminada).
• Más opciones.

Cuando seleccionas un bloque, encontrarás ajustes adicionales del bloque en la barra lateral derecha. Si no ves la barra lateral, es posible que necesites hacer clic en el icono de Ajustes en la esquina superior derecha para mostrar los ajustes. Este icono tiene el aspecto de un cuadrado con dos columnas desiguales:

Lenguaje de código

Selecciona el Lenguaje de código para elegir qué tipo de código deseas mostrar. Se formateará con la sintaxis correcta en la parte pública de tu sitio. Consulta la lista completa de lenguajes compatibles.

Números de línea

Elige mostrar u ocultar los números de línea junto a tu código.

En el campo de Primer número de línea, puedes establecer el número inicial. De manera predeterminada será 1.

Puedes resaltar líneas añadiendo una lista separada por comas de los números de línea que deseas resaltar. También puedes resaltar un rango de números de línea. Por ejemplo, 1,5,10-20 resaltará las líneas 1, 5 y de la 10 a la 20.

Hacer que las URL sean clicables

Con esta opción activada, cualquier URL en tu código será clicable.

Modo de edición

Activa Habilitar modo de edición con doble clic para permitir que tus visitantes accedan a un editor de código. Pueden hacer doble clic en el código para realizar cambios en su navegador.

Sus cambios no afectarán a tu sitio ni a lo que ven otros visitantes. Los cambios existirán solo de forma local y se perderán al actualizar el navegador.

Para más información, visita nuestras instrucciones detalladas sobre Ajustes avanzados.

Los siguientes lenguajes son compatibles actualmente con el bloque SyntaxHighlighter Code, utilizando la barra de herramientas del bloque o el área de ajustes del bloque:

Como alternativa al bloque, puedes usar una opción de shortcode.

Puedes usar el shortcode de código para mostrar código en el Editor clásico, o colocándolo en un bloque de Shortcode en el editor de bloques. Si tienes un sitio con plugins habilitados, debes instalar y activar este plugin SyntaxHighlighter para usar este shortcode.

El shortcode de código se escribe de la siguiente manera:

El parámetro language (o lang) controla cómo se resalta la sintaxis del código. Puedes usar el shortcode de código para formatear lenguajes que incluyen, entre otros:

Si no se establece el parámetro de lenguaje, se usará por defecto «text» (sin resaltado de sintaxis).

Los shortcodes también aceptan una variedad de parámetros de configuración que puedes usar para personalizar la salida. Todos son completamente opcionales.

• autolinks (true/false) — Hace que todas las URLs en tu código publicado sean clicables. El valor predeterminado es true.
• collapse (true/false) — Si es true, la caja de código estará contraída cuando se cargue la página, requiriendo que el visitante la seleccione para expandirla. Útil para publicaciones de código extensas. El valor predeterminado es false.
• firstline (número) — Usa esto para cambiar el número con el que comienza la numeración de líneas. El valor predeterminado es 1.
• gutter (true/false) — Si es false, la numeración de líneas en el lado izquierdo se ocultará. El valor predeterminado es true.
• highlight (lista de números separados por comas) — Puedes listar los números de línea que deseas resaltar. Por ejemplo «4,7,19».
• htmlscript (true/false) — Si es true, cualquier HTML/XML en tu código será resaltado. Esto es útil cuando mezclas código con HTML, como PHP dentro de HTML. El valor predeterminado es false y solo funcionará con ciertos lenguajes de código.
• light (true/false) — Si es true, el gutter (numeración de líneas) y el margen (ver más abajo) se ocultarán. Esto es útil cuando publicas solo una o dos líneas de código. El valor predeterminado es false.
• padlinenumbers (true/false/entero) — Te permite controlar el relleno de los números de línea. true resultará en un relleno automático, false resultará en ningún relleno, e introducir un número forzará una cantidad específica de relleno.
• title (cadena de texto) — Establece una etiqueta para tu bloque de código. Puede ser útil cuando se combina con el parámetro collapse.