Je suis toujours à la recherche de plugins de coloration syntaxique intéressants, en particulier pour les occasions où j’écris des tutoriels ou d’autres articles qui s’appuient fortement sur le code. Beaucoup trop de plugins utilisent des codes courts, des blocs personnalisés ou d’autres solutions étranges. Cependant, il y a une option que j’ai intentionnellement négligée lors de sa sortie il y a plus d’un an: Bloc de syntaxe de code par Marcus Kazmierczak.

Basé sur le nom, j’ai supposé que c’était encore un autre bloc autonome. Cependant, je lui ai depuis jeté un autre regard et réalisé que c’était notez le cas. Il s’intègre directement au bloc WordPress principal. Il y a des moments où un nouveau bloc est nécessaire, mais ce n’est pas l’un de ces moments. Parfois, il est préférable d’étendre les blocs existants dans core.

Code Syntax Block utilise le Bibliothèque JavaScript Prism pour ajouter une coloration syntaxique sur le front-end du site. Le plugin est bien conçu. Il charge ses scripts et styles uniquement lorsque le bloc de code est en cours d’utilisation.

Exemple de code généré par le plugin Code Syntax Highlighter.
Exemple de code PHP frontal.

Le plugin ne charge pas Prism dans l’éditeur, donc la sortie du code utilisera l’éditeur par défaut ou le style du thème. Cela peut ne pas plaire à ceux qui veulent un match un contre un entre l’arrière et l’avant. Je suis à l’aise avec la version non mise en surbrillance dans l’administrateur tout en ayant le joli sortie sur le frontal. Cependant, ce serait bien de voir une option ou un filtre pour activer la mise en évidence dans l’éditeur.

Hors de la boîte, le plugin utilise le Un noir thème, qui a été créé pour l’éditeur Atom et porté sur Prism. Les développeurs peuvent remplacer le thème avec un assets/prism/prism.css fichier dans leur thème ou en filtrant le chemin ou l’URL qui est chargé. Le projet Prism a un variété de thèmes disponibles qui sont plug-and-play. D’autres thèmes existent également en dehors de la liste officielle.

Du côté administrateur, le plugin crée un nouvel onglet «Paramètres» pour le bloc de code et ajoute quelques options parmi lesquelles les utilisateurs peuvent choisir:

  • Langue
  • Afficher les numéros de ligne
  • Titre du bloc de code
Utilisation des options de surligneur de syntaxe de code dans l'éditeur de blocs.
Vue de l’éditeur du surligneur de syntaxe de code

Par défaut, le plugin ne prend pas en charge la liste complète de plus de 200 langues. Au lieu de cela, il répertorie un peu plus de 40 des plus populaires. La liste est filtrable, donc n’importe qui peut ajouter ou supprimer des langues avec quelques lignes de code. Il existe également un hook de filtrage pour définir les langues par défaut, ce qui serait particulièrement utile pour ceux qui publient régulièrement des extraits de code dans le même langage de codage.

Après quelques jours de tests, je peux affirmer en toute sécurité que Code Syntax Block est ajouté à ma boîte à outils WordPress. J’aurais aimé ne lui avoir donné une chance que beaucoup plus tôt.


Source link

%d blogueurs aiment cette page :