Presentamos el bloque de código mejorado: resaltado de sintaxis y mucho más

El año pasado, WordPress.com presentó nuevos editores de código y el campo de CSS adicional en el editor de WordPress. Este fue solo el primer paso de un esfuerzo mucho mayor con el que queremos conseguir que la edición de código sea una experiencia más agradable.

Hoy, anunciamos el lanzamiento de la segunda etapa de este camino: presentamos el nuevo y mejorado bloque de código.

No es un bloque nuevo. Es una mejora del bloque de código actual que probablemente ya has estado utilizando, y que incluye varias mejoras sobre el original:

• Resaltado de sintaxis: ofrece resaltado de sintaxis basado en colores para más de 100 lenguajes comunes.
• Configuración: puedes elegir si quieres mostrar el nombre del archivo, el nombre del lenguaje, los números de línea e incluso un botón para poder copiar el código.
• Arrastrar y soltar: arrastrar un archivo de código desde tu ordenador al editor lo transformará automáticamente en el bloque de código con el lenguaje correspondiente.
• Transformaciones: transforma otros bloques compatibles con código en WordPress.com, como el bloque Syntax Highlighter, al nuevo bloque de código.
• Estilos: personaliza los colores de la sintaxis directamente desde el editor o mediante el archivo theme.json si eres desarrollador.

Uso del bloque de código mejorado

No tienes que hacer nada especial para empezar a usar la nueva versión del bloque de código: ya está disponible. Solo tienes que insertar el bloque de código en cualquier lugar del editor de bloques y añadir el código.

De forma predeterminada, al añadir un bloque de código e insertar código, el código aparecerá en texto plano:

El texto plano no incluye ningún resaltado de sintaxis, ya que no es todavía un lenguaje. Para cambiarlo, elige un lenguaje de código en el menú desplegable Ajustes → Lenguaje de la barra lateral:

Se aplicará un resaltado de sintaxis según el lenguaje que hayas seleccionado, ¡y ahora el código es mucho más fácil de leer tanto para ti como para tus visitantes!

Consejo profesional: si escribes tres acentos graves seguidos del nombre del lenguaje (por ejemplo, ```php) y luego pulsas Intro, el editor creará automáticamente una nueva instancia del bloque de código y seleccionará automáticamente el ajuste de Lenguaje.

Si quieres llevar las funcionalidades del bloque de código un paso más allá, también puedes configurar varios otros ajustes además del lenguaje:

• Nombre del archivo: añade un nombre de archivo personalizado que aparecerá en la parte superior izquierda del bloque de código (muy útil si quieres hacer un tutorial).
• Mostrar el nombre del lenguaje: muestra el nombre del lenguaje en la esquina superior derecha del bloque.
• Mostrar un botón para copiar: inserta un botón para copiar el código en la parte superior derecha del bloque, permitiendo que los visitantes del sitio puedan copiar todo el código.
• Mostrar los números de línea: muestra los números de las líneas a la izquierda del código.
• Los números de línea empiezan en: elige el número en el que empiezan las líneas.

Todos estos ajustes harán que tus lectores puedan ver y entender tus ejemplos de código de forma más sencilla:

Personalización de los colores del bloque de código

Hay varias formas de personalizar el resaltado de sintaxis y los colores que aparecen en el bloque de código mejorado. En esta sección, iremos viendo cada una de ellas, desde la más rápida y sencilla hasta las técnicas más avanzadas.

Selección de un estilo de bloque

El bloque de código incluye cuatro estilos de bloque predefinidos:

• Predeterminado: usará los estilos y colores predeterminados del tema.
• Sin resaltado: desactiva el resaltado de sintaxis.
• Solarized Light: un esquema de color claro.
• Solarized Dark: un esquema de color oscuro.

Los temas también pueden incluir otro tipo de estilos. Seleccionar uno de estos estilos es la forma más rápida de cambiar la apariencia del bloque de código:

Personalización de colores desde el editor

También puedes personalizar los colores directamente desde el editor mediante el panel Estilos → Color en la barra lateral del bloque. El bloque tiene una amplia gama de opciones de color para personalizar cada aspecto del resaltado de sintaxis:

Y los colores no son lo único que puedes personalizar. También puedes editar cualquiera de los otros estilos disponibles, como la tipografía o el borde, entre otros. Estas opciones no han cambiado con la última mejora.

Personalización del bloque de código mediante el archivo theme.json

Si te dedicas a desarrollar o crear temas, puede que quieras definir los colores de sintaxis y otros estilos que aparecen al utilizar la forma predeterminada del bloque. Las nuevas mejoras también incluyen la compatibilidad con el archivo theme.json.

Así es como aparecen mis estilos personalizados del bloque de código tras haberlos ajustado en el theme.json:

El propio software de WordPress no admite colores personalizados mediante el theme.json, pero los desarrolladores de WordPress.com no han querido dejar de introducir una compatibilidad personalizada para esta funcionalidad.

Puedes personalizar cualquiera de los colores de sintaxis mediante settings.custom.core/code en el theme.json. Este es un objeto donde cada clave es el nombre del color de sintaxis y el valor es el color en sí.

Aquí tienes un fragmento de ejemplo que puedes usar para personalizar tus propios colores:

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"settings": {
		"custom": {
			"core/code": {
				"comment": "#94a3b8",
				"keyword": "#8b5cf6",
				"boolean": "#f59e0b",
				"literal": "#10b981",
				"string": "#06b6d4",
				"specialString": "#ec4899",
				"macroName": "#8b5cf6",
				"variableDefinition": "#3b82f6",
				"typeName": "#14b8a6",
				"className": "#f97316",
				"invalid": "#ef4444"
			}
		}
	}
}

Puedes utilizar cualquier color CSS válido, por lo que no estás limitado a códigos de color hexadecimales. Usa propiedades personalizadas de CSS, RGBA y más.

Si quieres utilizar las personalizaciones que introduje en mi archivo theme.json, copia y pega el siguiente código. Incluye otros estilos personalizados para que el bloque de código sea aún más atractivo:

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"settings": {
		"custom": {
			"core/code": {
				"comment": "#94a3b8",
				"keyword": "#8b5cf6",
				"boolean": "#f59e0b",
				"literal": "#10b981",
				"string": "#06b6d4",
				"specialString": "#ec4899",
				"macroName": "#8b5cf6",
				"variableDefinition": "#3b82f6",
				"typeName": "#14b8a6",
				"className": "#f97316",
				"invalid": "#ef4444"
			}
		}
	},
	"styles": {
		"blocks": {
			"core/code": {
				"border": {
					"color": "#e2e8f0",
					"style": "solid",
					"width": "1px",
					"radius": "8px"
				},
				"color": {
					"background": "#f1f5f9",
					"text": "#1e293b"
				},
				"typography": {
					"fontSize": "15px"
				}
			}
		}
	}
}

Comparte tu código con el mundo

El bloque de código mejorado te ayuda a compartir código en WordPress.com de forma fácil y personalizada y completamente a tu estilo, tanto si lo que compartes son pequeños fragmentos de código como si son tutoriales completos.

Gracias al resaltado de la sintaxis, los estilos del bloque y las opciones de color personalizadas, tienes control total sobre cómo ven tu código los visitantes.

Con estas mejoras, puedes dedicar menos tiempo al formato del código y más a compartir contenido de calidad con tus lectores.