Comment afficher des extraits de code en surbrillance sur votre site WordPress

À peu près tous les blogueurs technologiques, créateurs de contenu ou développeurs doivent parfois afficher des extraits de code en surbrillance sur leur blog. Cela peut être un casse-tête en soi. Cependant, la mise en surbrillance d'une ou de plusieurs lignes dans cet extrait peut également être nécessaire, et cette fonctionnalité ne fait malheureusement pas partie de la plupart des intégrations de code. Heureusement, le plugin SyntaxHighlighter Evolved existe. Nous allons vous montrer comment l'utiliser pour garder le code aussi propre et lisible que possible.

Abonnez-vous à notre chaîne Youtube

SyntaxeSurligneur évolué

L'installation et l'activation du plugin sont simples. Vous pouvez le trouver sur le référentiel de plugins WP.org, mais assurez-vous que celui-ci est fait par Alex Mills (Viper007Bond) . Il existe de nombreux plugins avec des noms et des fonctionnalités similaires, mais nous savons que celui-ci est fiable et mis à jour. De plus, celui-ci est livré avec un bloc spécialisé pour l'éditeur Gutenberg. Sans oublier un certain nombre de paramètres qui vous permettent de personnaliser votre expérience qui en font notre choix pour ce genre de tâche.

Dans le menu Paramètres de votre tableau de bord WordPress, vous trouverez un nouvel élément intitulé SyntaxHighlighter . Allez-y et cliquez dessus. Là, vous pouvez ajuster tout ce dont vous aurez besoin pour intégrer les extraits de code dans votre site WordPress.

Paramètres du surligneur de syntaxe

La page des paramètres du plugin est relativement simple. Un élément particulier que nous aimons à propos de ce plugin est que vous obtenez un bon nombre de personnalisations concernant la façon dont le code est affiché sur votre site. Vous pouvez ajouter des classes CSS à l'intégration, ajuster le remplissage des numéros de ligne, choisir des thèmes de couleurs, utiliser des onglets intelligents et des retours à la ligne, et décider comment charger la mise en évidence du langage de codage individuel à l'échelle du site.

Nous voulons appeler trois paramètres particuliers dont nous pensons que la plupart des gens devraient être conscients.

Version du plugin, numéros de ligne et taille de l'onglet

Le premier est la version du plugin que vous chargez. Alors que le plugin lui-même reste à jour sur le repo, selon la façon dont vous souhaitez afficher au mieux votre code, vous pouvez choisir entre les versions 2.x et 3.x du plugin . Les deux sont sécurisés, cependant, ils offrent chacun des fonctionnalités spécifiques que l'autre n'offre pas (au moins au moment d'écrire ces lignes).

Si les utilisateurs qui copient votre code sont les plus importants, alors la version 3.x fera très bien l'affaire. Cependant, si le vôtre est plus destiné à l'affichage qu'à l'utilité réelle, l'habillage de mots de la version 2.x peut être mieux adapté pour vous car il évite le besoin de barres de défilement sur de gros extraits de code.

Ensuite, vous avez la possibilité d'afficher ou non les numéros de ligne. Pour les gros morceaux de code et les didacticiels, les numéros de ligne sont inestimables. Cependant, lorsque vous avez de courts extraits, il n'est pas nécessaire de les étiqueter continuellement en tant que lignes 1 et 2. Les supprimer peut considérablement nettoyer l'apparence du code.

Et puis il y a la taille de l'onglet toujours controversée. L'option par défaut est 4, mais vous pouvez la changer en n'importe quel nombre que vous voulez. Y compris la valeur correcte de 2. (Oui, nous réalisons qu'il n'y a pas de valeur correcte. Nous aimons juste 2 espaces pour les tabulations.)

Votre code et vos shortcodes

Si vous faites défiler vers le bas de la page Paramètres , vous verrez un grand aperçu du code, ainsi qu'un grand nombre de paramètres de shortcode. Votre temps serait bien dépensé pour les parcourir, juste pour voir ce que tout le plugin peut faire pour mettre en évidence vos extraits de code. De plus, toutes les modifications que vous avez apportées ci-dessus à la façon dont le code s'affiche dans les paramètres ci-dessus seront reflétées ici. Assurez-vous donc d'appuyer sur Enregistrer après avoir modifié l'une des options.

Bien que certaines personnes ne soient pas les plus grandes fans des shortcodes car elles peuvent vous lier à certains plugins, nous pensons qu'elles valent la peine d'être utilisées car elles sont intelligentes et faciles à mémoriser. Si rien d'autre, vous devez vous rappeler deux choses et le plugin fonctionnera à son meilleur pour vous.

• ou

   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 here

  , et il est formaté et mis en surbrillance.

  Utilisation des codes courts

  Partout où vous pouvez rendre un shortcode, vous pouvez les utiliser. Dans Divi ou l'éditeur classique, vous pouvez utiliser le module Texte ou l'éditeur TinyMCE et simplement coller le code entre les shortcodes. En raison du fonctionnement de l'onglet Visuel, nous vous suggérons d'utiliser l'onglet Texte pour que ceux-ci conservent la mise en forme des caractères spéciaux.

  

  Si vous êtes un utilisateur de Gutenberg/Block Editor, les choses sont tout aussi simples. Vous pouvez, encore une fois, utiliser le bloc Texte pour cela. Le bloc HTML personnalisé est encore plus simple que cela. Comme ci-dessus, collez le code dans les balises shortcode.

  

  Encore mieux que cela, cependant, est le bloc SyntaxHighlighter Evolved lui-même. Inclus avec l'installation du plugin est son propre bloc Gutenberg de sorte que si vous n'êtes pas une personne de shortcode et que vous ne voulez pas jouer avec les paramètres, vous n'avez pas à le faire. Recherchez simplement le bloc sous Formatage et insérez-le dans votre article ou votre page.

  

  Quelle que soit la façon dont vous insérez le code, vous verrez le même rendu sur le front-end de votre site WordPress.

  

  Finir

  Il existe de nombreuses raisons pour lesquelles vous devrez peut-être présenter des extraits de code à votre public. Peut-être que vous écrivez des didacticiels ou que vous publiez des correctifs à des problèmes courants que le public peut prendre et utiliser selon ses besoins. Mais parfois, une intégration GitHub ne fournit tout simplement pas le type d'expérience que vous souhaitez pour vos utilisateurs. C'est alors que vous avez besoin d'un plugin comme SyntaxHighlighter Evolved. En quelques clics, un peu de personnalisation et soit un bloc Gutenberg soit un shortcode, votre public parcourra votre code sans problème.

  Quelles utilisations pourriez-vous trouver sur votre site pour mettre en évidence un code comme celui-ci ?

  Article présenté en image par Adil Bouyghajden / shutterstock.com