Celles et ceux qui suivaient mon flux de publications – avant son « reboot » sous Retraceur – se souviennent peut-être de ce bloc d’imbrication de bouts de code hébergés sur Gist.GitHub.com. Ce bloc nécessitait l’utilisation de l’extension Entrepôt (une alternative aux répertoires d’extensions, de thèmes et de blocs proposés par le site communautaire de WordPress® ¹ ; déjà à l’époque, il y a 5 ans, j’avais commencé à prendre mes distances avec ce site dont le propriétaire est l’antithèse de l’éthique).

Aujourd’hui, je vous annonce que ce bloc est désormais autonome et peut être utilisé directement dans notre site motorisé par Retraceur (tout comme dans le logiciel qu’il « forke », d’ailleurs).

Installer « Bout de code »

Pour profiter de ce bloc dans votre site Web propulsé par Retraceur, téléchargez d’abord le fichier bout-de-code.zip disponible dans la section « Assets » de la page de sa dernière version. Accédez, ensuite, au tableau de bord de Retraceur et trouvez l’écran d’administration des blocs pour le charger et l’activer. Veuillez lire cette page de documentation pour plus d’informations sur la façon de vous y prendre.

Si vous utilisez le logiciel « forké » par Retraceur, sachez qu’il mélange la gestion de vos extensions et de vos blocs dans une même zone d’administration…

Utiliser « Bout de code »

Une fois le bloc activé et installé, lancez vous dans l’écriture d’un nouvel article ou d’une nouvelle page et utilisez l’inserteur de blocs ou la commande de raccourci / pour ajouter le bloc « Bout de code ».

Une interface de chargement d’une URL d’imbrication, vous permettra d’y coller dans son champ texte l’URL pointant vers votre gist, comme par exemple celle utilisée pour la rédaction de cet article :

https://gist.github.com/imath/fa8a2263d8cb3b97532a3de34d53bb33

Cliquez sur le bouton « Imbriquer » et après quelques secondes de chargement, vous verrez ce bout de code s’afficher.

Si dans votre gist, vous avez intégré plusieurs fichiers, les bouts de code s’afficheront les uns en dessous des autres. Si vous avez besoin de n’afficher que l’un des fichiers du gist, il suffit de rajouter la référence de son ancre à la suite de l’URL du gist (une fois votre gist publié, cliquez sur l’un des noms de fichier affichés avant de copier l’URL de votre navigateur).

Si comme moi, vous avez une préférence pour le mode sombre : rendez-vous, comme illustré ci-dessus, dans les réglages du bloc pour l’activer.

Comme j’utilise ce bloc sur mon site, voici, ci-dessous, un exemple de son utilisation concrète !

En passant, la première bêta de la version 2.0.0 de Retraceur est en approche 😅.

Crédits de l’image « GitHub logo invertocat dark » mise en avant : GitHub.

1. La marque WordPress® est la propriété intellectuelle de la Fondation WordPress®. L’utilisation du nom WordPress® dans cet article est uniquement à des fins d’identification et n’implique pas une approbation de la part de la Fondation WordPress® ↩︎