Comment partager du code dans un article WordPress (sans plugin)

Si comme moi vous aimez parfois mettre les mains dans le code, et qu’en plus vous aimez partager vos trouvailles sur un blog WordPress, vous vous êtes certainement déjà posé la question : comment partager des snippets sans que ça soit pénible pour votre visiteur ?

LudovicClain.com Faciliter le copier / coller de code pour le visiteur

En quoi pénible ?

Le code, en fonction du langage utilisé, est parfois sensible à un espace en trop, un retour à ligne mal placé (à cause du responsive et qui ne devrait pas être présent), ce qui lorsque le visiteur le copie puis l’essaie, peut parfois lui faire croire que le code est dysfonctionnel !

Les fausses-bonnes solutions

La première fois que j’ai eu à partager du code c’était sur ce blog, j’ai donc procédé comme à mon habitude en allant à la pêche d’un plugin qui allait « répondre à mon besoin ».

Encore fallait-il connaître les bons mots-clés à rechercher ! Si vous souhaitez trouver la perle rare de votre côté, les voici : syntax highlighter, prism.js, snippets, code et language entre autres.

Vous tomberez comme moi sur un dénommé Prismatic, que j’ai téléchargé, activé, et testé … puis désinstallé 😜 je l’ai trouvé trop lourd à utiliser pour les quelques bouts de code que j’avais à semer par-ci par-là.

2 fichiers téléversés et un snippet plus tard …

Après avoir googlelisé les bons mots-clés, je suis tombé sur un excellent article de StartBlogging101 qui détaillait une façon intéressante de parvenir à mes fins … sans plugin !

Voici la procédure en français et améliorée par mes soins :

  1. Cliquez ici pour accéder au site Prism.js : l’URL ci-contre contient déjà mes préférences de réglages, à savoir la version minifiée, le thème Okaidia, les langages principaux + le PHP, et les plugins Line Highlight, Line Numbers, Show Language, Toolbar (obligatoire avec Show Language) et Copy to Clipboard Button … vous êtes libre d’affiner comme bon vous semble
  2. Téléchargez les 2 fichiers générés par vos réglages en cliquant respectivement sur les boutons « Download JS » puis « Download CSS »
  3. Téléversez ces fichiers dans le dossier de votre thème-enfant (child theme)
  4. Rajouter le bout de code suivant à votre must-use plugin (où vous insérez tous vos snippets personnels, ou dans le fichier functions.php de votre child theme) :
function add_prism() {

    if ( is_single() && has_tag( 'Code' ) ) {

        // Register prism.css file
        wp_register_style(
            'prismCSS', // handle name for the style
            get_stylesheet_directory_uri() . '/prism.css' // location of the prism.css file
        );

        // Register prism.js file
        wp_register_script(
            'prismJS', // handle name for the script
            get_stylesheet_directory_uri() . '/prism.js' // location of the prism.js file
        );

        // Enqueue the registered style and script files
        wp_enqueue_style('prismCSS');
        wp_enqueue_script('prismJS');

    }
}
add_action('wp_enqueue_scripts', 'add_prism');

À partir de là rien de plus simple, lorsque vous avez à partager du code (comme ci-dessus) dans un article ou une page WordPress :

  • Dans l’éditeur Gutenberg, ajoutez un bloc « Code »
  • Collez votre code dedans
  • Puis dans les réglages du bloc, l’onglet « Avancé », rajoutez les classes additionnelles désirées
  • Et enfin pensez à rajouter le mot-clé « Code » à la liste des mots-clés de votre article pour que la « transformation » soit effective
LudovicClain.com Ajouter et partager du code via WordPress

Dans l’article de StartBlogging101 il y a aussi une version du snippet ci-dessus où ce dernier est chargé sur toutes les pages de votre blog, j’ai préféré la version qui s’enclenche uniquement avec un mot-clé pour ne pas alourdir mon site.

Si vous souhaitez obtenir des détails sur les classes additionnelles disponibles et comment les paramétrer, rendez-vous sur les différents liens disponibles sur la page de téléchargement de Prism.js, vous faites clic-droit « Inspecter l’élément » sur un rendu que vous souhaitez obtenir et vous pourrez examiner la classe utilisée pour la reporter dans votre bloc « Code » Gutenberg.

LudovicClain.com Inspecter un élément avec son navigateur

Si vous devez rajouter des attributs (ça a été mon cas pour pouvoir vous surligner la ligne 3 du code ci-dessus) : dans vos préférences Gutenberg, passez en mode « Édition de code » pour aller rajouter l’attribut nécessaire à l’élément <pre>

LudovicClain.com Passer en mode "Édition de code" dans Gutenberg de WordPress

Voilà !

Je suis content d’avoir trouvé cette alternative au plugin Prismatic (moins j’ai de plugins, mieux je me porte 😬 ), et cela a été motivé par la publication de toute une série d’articles sur KingCourriel™ destinée à accueillir et accompagner mes nouveaux clients dans la prise en main de leur logiciel d’email marketing.

Articles connexes

Vous aimez cet article ?

Partager sur facebook
Partager sur Facebook
Partager sur twitter
Partager sur Twitter
Partager sur linkedin
Partager sur Linkedin
Partager sur pinterest
Partager sur Pinterest
Ludovic

Ludovic

The coolest guy in the war room who fixes your tech stuff (and who might turn out to be your best friend)

Discutons de cet article ?

Retour haut de page