Présentation du bloc Code amélioré : mise en surbrillance de la syntaxe et bien plus

L’année dernière, WordPress.com a introduit de nouveaux éditeurs de code, aussi bien dans l’éditeur de blocs que dans le champ de CSS additionnel de l’administration WordPress. Cette première étape s’inscrivait dans une démarche plus large visant à rendre l’édition de code plus agréable et plus efficace.

Aujourd’hui, nous sommes ravis d’annoncer la suite de cette évolution avec le lancement du bloc Code amélioré.

Il ne s’agit pas d’un nouveau bloc à proprement parler, mais d’une version enrichie du bloc Code existant — celui que vous utilisez peut-être déjà. Cette mise à jour apporte plusieurs améliorations notables :

• Mise en surbrillance de la syntaxe : prise en charge de plus de 100 langages courants, avec une coloration syntaxique adaptée.
• Options de configuration : possibilité d’afficher le nom du fichier, le langage utilisé, les numéros de ligne, et même d’ajouter un bouton de copie pour les visiteurs.
• Glisser-déposer : faites simplement glisser un fichier de code depuis votre ordinateur vers l’éditeur : il sera automatiquement converti en bloc Code, avec le langage détecté.
• Transformations de blocs : transformez d’autres blocs compatibles avec du code sur WordPress.com (comme l’ancien bloc de surbrillance de syntaxe) en bloc Code amélioré.
• Styles personnalisables : ajustez les couleurs de la syntaxe directement depuis l’éditeur ou, pour les développeurs, via le fichier theme.json.

Utiliser le bloc Code amélioré

Aucune activation n’est nécessaire pour profiter de cette nouvelle version : le bloc Code amélioré est déjà disponible. Il vous suffit d’insérer un bloc Code dans l’éditeur de blocs et d’y coller votre code.

Par défaut, lorsque vous ajoutez du code dans un bloc Code, celui-ci s’affiche en texte brut.

C’est normal : tant qu’aucun langage n’est défini, aucune mise en surbrillance ne peut être appliquée. Pour activer la coloration syntaxique, sélectionnez simplement un langage dans le menu Réglages → Langage de la colonne latérale de l’éditeur.

La mise en surbrillance s’adapte alors automatiquement au langage choisi, ce qui rend le code bien plus lisible, aussi bien pour vous que pour vos visiteurs.

Astuce : si vous saisissez trois accents graves suivis du nom du langage (par exemple ```php), puis appuyez sur Entrée, l’éditeur créera automatiquement un nouveau bloc Code et définira le langage correspondant.

En plus du choix du langage, le bloc Code amélioré propose plusieurs réglages pour enrichir vos extraits de code :

• Nom du fichier : affiche un nom de fichier personnalisé en haut à gauche du bloc — particulièrement utile dans les tutoriels.
• Afficher le nom du langage : indique le langage utilisé dans le coin supérieur droit du bloc.
• Afficher le bouton de copie : ajoute un bouton Copier permettant aux visiteurs de copier l’intégralité du code en un clic.
• Afficher les numéros de ligne : affiche les numéros de ligne sur la gauche du code.
• Les numéros de ligne commencent à : permet de définir le numéro de la première ligne.

Ces options rendent les exemples de code plus clairs, plus pratiques et plus agréables à utiliser pour vos lecteurs.

Personnaliser les couleurs du bloc Code

Le bloc Code amélioré offre plusieurs possibilités pour personnaliser la mise en surbrillance de la syntaxe et les couleurs affichées. Dans la section suivante, nous passerons en revue les différentes méthodes disponibles, des plus simples et rapides aux options les plus avancées.

Choisir un style de bloc

Le bloc Code propose quatre styles intégrés par défaut :

• Par défaut : utilise les styles et les couleurs définis par votre thème.
• Sans surbrillance : désactive complètement la mise en surbrillance de la syntaxe.
• Solarisé clair : un jeu de couleurs clair, inspiré du thème Solarized.
• Solarisé sombre : la version sombre du jeu de couleurs Solarized.

Les thèmes peuvent également définir des styles supplémentaires. Sélectionner l’un de ces styles est le moyen le plus rapide de modifier l’apparence générale de votre bloc Code, sans toucher aux réglages individuels.

Personnaliser les couleurs depuis l’éditeur

Vous pouvez aussi ajuster les couleurs directement depuis l’éditeur, via le panneau Styles → Couleurs dans la colonne latérale du bloc. Le bloc Code propose un large éventail d’options permettant de personnaliser finement chaque élément de la mise en surbrillance de la syntaxe.

Et vous ne vous limitez pas aux couleurs : tous les autres styles disponibles restent accessibles, comme la typographie, les bordures ou l’espacement. Ces options existaient déjà auparavant et n’ont pas changé avec cette mise à jour.

Personnaliser le bloc Code via theme.json

Si vous êtes développeur ou créateur de thèmes, vous souhaiterez sans doute définir des couleurs de syntaxe par défaut ainsi que d’autres styles pour le rendu global du bloc. Le support de theme.json fait partie intégrante de cette nouvelle version du bloc Code.

Après quelques ajustements dans mon fichier theme.json, voici à quoi ressemblent mes styles personnalisés pour le bloc Code.

Comme WordPress ne prend pas encore en charge nativement la personnalisation des couleurs de syntaxe via theme.json, l’équipe WordPress.com a implémenté un support spécifique pour cette fonctionnalité.

Vous pouvez définir chaque couleur de syntaxe via la clé settings.custom.core/code dans theme.json. Il s’agit d’un objet dans lequel chaque clé correspond à un type d’élément syntaxique, et chaque valeur à la couleur associée.

Voici un exemple que vous pouvez utiliser comme point de départ pour personnaliser vos propres couleurs :

{
	"$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"
			}
		}
	}
}

Toutes les valeurs de couleur CSS valides sont prises en charge : vous n’êtes donc pas limité aux codes hexadécimaux. Vous pouvez utiliser des variables CSS, des valeurs RGBA, et bien plus encore.

Si vous souhaitez reprendre l’intégralité de mes personnalisations theme.json, vous pouvez copier et coller l’exemple ci-dessous. Il inclut également des styles supplémentaires pour améliorer encore l’apparence du bloc Code :

{
	"$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"
				}
			}
		}
	}
}

Que vous publiiez de simples extraits de code ou des tutoriels complets, le bloc Code amélioré rend le partage et la mise en forme du code sur WordPress.com plus simples et plus flexibles que jamais.

Entre la mise en surbrillance de la syntaxe, les styles de bloc et les options de personnalisation avancées, vous gardez un contrôle total sur l’apparence de votre code.

Résultat : moins de temps passé à peaufiner le formatage, et plus de temps pour vous concentrer sur l’essentiel — écrire du contenu de qualité qui aide vos lecteurs à apprendre et à créer.