WordPress : Comment insérer du code dans vos articles en respectant la colorisation d’un langage ?

[fancy_header tag= »h1″]Comment insérer du code dans vos articles en respectant la colorisation d’un langage sur WordPress ?[/fancy_header]

[p]Sur de nombreux site web notamment qui vous proposent des tutoriels de programmation, vous pouvez observer que les exemples de codes respectent bien les couleurs du langage utilisé. Exemple si c’est du PHP, les balises d’ouvertures et de fermetures seront bien de la couleur rouge. Par magie vous pouvez copier/coller le code car ce n’est pas une image mais bien du texte avec un background.[/p]

<?php

?>

[p]WordPress, notre CMS préféré dispose de plusieurs extensions vous permettant cette opération. Aujourd’hui, Rue de l’info vous en présente une qui est simple d’utilisation et qui couvre quasiment tous les langages de programmation. Ce plugin est peut être ce qu’il vous faut pour pour créer vos articles de votre site internet. Il est déjà bien connu de la communauté.[/p]

[p]L’extension magique se nomme : Crayon Syntax Highlighter[/p]

[p]le plugin téléchargé et installé (lien ci-dessus), vous verrez sur votre éditeur un bouton « crayon » apparaître.[/p]

[image src= »2019/02/crayon-syntaxe-highlighter-2.jpg » width= »627″ align= »center » alt= »extension crayon syntax highlighter » title= »extension crayon syntax highlighter » image_hover= »zoom-effect » frame= »style4″]

[p]Une fois le bouton cliqué, vous pourrez choisir toutes sortes d’options et même donner une description à votre exemple de code. Pas besoin de faire de grand discours ou de tutoriel bien huilé, il ne peut pas y avoir plus instinctif.[/p]

[image src= »2019/02/crayon-syntaxe-highlighter-1.jpg » width= »627″ align= »center » alt= »extension crayon syntax highlighter » title= »extension crayon syntax highlighter » image_hover= »zoom-effect » frame= »style4″]

[p]Un titre ou pas pour identifier votre exemple et dans le menu déroulant « langage« , vous choisissez le langage de programmation de votre choix. Tapez votre code ou copier/coller le sur votre fichier source et l’extension fera le travail toute seule en ce qui concerne le visuel et appliquera les couleurs respectives à chaque langage. Cliquez sur « Ajouter » en haut à gauche de la fenêtre et le tour est joué les amis ![/p]