Vous souhaitez ajouter une coloration syntaxique dans les commentaires WordPress ? Par défaut, WordPress n’est fourni avec aucune coloration syntaxique pour les commentaires, les publications ou les pages.
Si vous avez des articles sur le codage ou la programmation sur votre site Web, vos utilisateurs peuvent parfois vouloir laisser des exemples de code dans les commentaires.
Dans cet article, nous allons vous montrer comment ajouter facilement une coloration syntaxique dans les commentaires WordPress.
Pourquoi et quand vous avez besoin de mettre en évidence la syntaxe dans les commentaires WordPress
WordPress ne vous permet pas de simplement coller des extraits de code dans vos articles pour des raisons de sécurité.
Vous pouvez afficher des exemples de code en ajoutant le bloc de code dans votre article ou vos pages à l’aide de l’éditeur de blocs.
Après cela, vous pouvez ajouter votre extrait de code dans la zone de texte du bloc de code.
Vous pouvez maintenant enregistrer les modifications apportées à votre publication ou à votre page et la prévisualiser pour voir votre code en action.
Selon votre thème WordPress, il sera généralement affiché dans un bloc de texte très simple et sans aucune coloration syntaxique.
Cela n’a pas l’air bien et n’est pas très utile pour vos utilisateurs.
La coloration syntaxique est un format de style couramment utilisé pour afficher le code. Il ajoute des numéros de ligne et des couleurs pour mettre en évidence les modèles de code, ce qui le rend facile à comprendre.
Voici un exemple d’extrait de code avec une coloration syntaxique. Notez les numéros de ligne et les couleurs utilisées pour mettre en évidence différents éléments dans le code :
<html> <head> <title>My Awesome Website</title> </head> <body> <h1>Welcome to My Homepage</h1> </body> </html>
Maintenant, si vous lancez un blog WordPress sur le codage ou la programmation, vous avez besoin d’une coloration syntaxique pour afficher correctement le code dans vos articles.
Vous pouvez également souhaiter que vos utilisateurs puissent utiliser la même coloration syntaxique dans les commentaires, ce qui rendra les commentaires plus intéressants et engageants pour les utilisateurs.
Cela étant dit, examinons comment ajouter une coloration syntaxique dans les commentaires, publications et pages WordPress.
Ajouter un surligneur de syntaxe dans WordPress
Le moyen le plus simple d’ajouter une coloration syntaxique dans WordPress est d’utiliser le Surligneur de syntaxe évolué. Il est très facile à utiliser et vous permet d’activer la coloration syntaxique dans les articles, pages et commentaires WordPress.
Tout d’abord, vous devez installer et activer le Surligneur de syntaxe évolué brancher. Pour plus de détails, consultez notre guide étape par étape sur la façon d’installer un plugin WordPress.
Lors de l’activation, vous devez modifier la publication ou la page où vous souhaitez ajouter du code. Sur l’écran d’édition de publication, cliquez sur l’icône (+) pour ajouter un nouveau bloc, puis insérez le bloc « SyntaxHighlighter Code » dans votre zone de contenu.
Vous verrez maintenant un nouveau bloc de code dans l’éditeur de publication où vous pouvez entrer votre code. Après avoir ajouté le code, vous devez sélectionner les paramètres de bloc dans la colonne de droite.
À partir de là, vous pouvez sélectionner le langage de programmation pour votre code, afficher ou masquer les numéros de ligne, rendre les liens cliquables, etc.
Une fois que vous avez terminé, continuez et enregistrez votre article ou votre page. Vous pouvez maintenant visiter votre site Web pour voir votre code avec la coloration syntaxique.
C’était facile, n’est-ce pas ?
Cependant, les commentaires WordPress ne prennent pas en charge l’éditeur de blocs. Voyons comment vos utilisateurs peuvent utiliser Syntax Highlighter Evolved avec leurs commentaires.
Ajout de la mise en évidence de la syntaxe dans les commentaires WordPress
Le surligneur de syntaxe Evolved est activé par défaut pour les commentaires WordPress. Cependant, pour l’utiliser dans les commentaires, le code doit être enroulé autour de shortcodes.
Le plugin est livré avec plusieurs shortcodes nommés d’après tous les langages de programmation et de script populaires.
Entourez simplement votre code entre crochets avec le nom de la langue. Par exemple, si vous allez ajouter du code PHP, vous l’ajouterez comme ceci :
[php]
<?php
private function get_time_tags() {
$time = get_the_time('d M, Y');
return $time;
}
?>
[/php]
De même, si vous vouliez ajouter un code HTML, vous l’enroulerez autour du shortcode HTML comme ceci :
[html]
<a href="https://example.com">Demo website</a>
[/html]
Ajout d’un avis de mise en évidence de la syntaxe dans le formulaire de commentaire
Bien qu’il soit facile d’utiliser la coloration syntaxique avec des codes courts, le problème est que vos utilisateurs ne sauront pas qu’ils peuvent le faire.
Heureusement, il existe un moyen rapide de leur faire savoir qu’ils peuvent utiliser la coloration syntaxique avec des codes courts.
Pour cela, vous devrez ajouter un extrait de code personnalisé à votre site WordPress. Si vous ne l’avez pas encore fait, consultez notre guide sur la façon d’ajouter du code personnalisé dans WordPress.
Vous devrez ajouter le code suivant dans le plug-in d’extraits de code, le fichier functions.php ou un plug-in spécifique au site.
function wpbeginner_comment_text_before($arg) { $arg['comment_notes_before'] .= "<p class="comment-notice">You can use shortcodes for syntax highlighting when adding code. For example, [php][/php] or [html][/html]</p>"; return $arg; } add_filter('comment_form_defaults', 'wpbeginner_comment_text_before');
Ce code affiche simplement un avis juste avant le champ de commentaire dans le formulaire de commentaire WordPress. Cependant, il n’affiche pas la notification pour les utilisateurs connectés.
Vous pouvez maintenant ouvrir une nouvelle fenêtre de navigateur en mode navigation privée ou simplement vous déconnecter de votre zone d’administration WordPress. Après cela, vous pouvez visiter n’importe quel article de votre blog pour voir votre avis de coloration syntaxique en action.
Vous pouvez également ajouter du CSS personnalisé pour styliser ce texte. Nous avons utilisé le code CSS personnalisé suivant sur notre site de démonstration, n’hésitez pas à l’utiliser comme point de départ.
p.comment-notice { font-size: 14px; color: #555; line-height: 1.5; }
Nous espérons que cet article vous a aidé à ajouter une coloration syntaxique dans les commentaires WordPress. Vous pouvez également consulter notre guide sur la façon d’autoriser les utilisateurs à télécharger des images dans les commentaires WordPress et quelques conseils pratiques pour styliser le formulaire de commentaire WordPress.