WordPress
time_read14mn de lecture

Gutenberg WordPress : comment utiliser le bloc code ?

22 juillet 2023

Gutenberg WordPress : comment utiliser le bloc code ?

Que vous soyez un développeur, un blogueur technique, ou simplement quelqu’un qui aime parfois inclure des extraits de code dans vos articles, le bloc Code de l’éditeur Gutenberg de WordPress est un outil indispensable. Dans un monde de plus en plus numérique, le partage de code est devenu une pratique courante. Que ce soit pour expliquer une nouvelle fonction, donner un exemple ou partager une astuce de programmation, la possibilité d’afficher du code de manière propre et lisible sur votre site WordPress est essentielle. C’est là que le bloc Code entre en jeu. Le bloc Code vous permet de présenter des lignes de code de manière élégante et claire, améliorant ainsi l’expérience de lecture pour vos visiteurs. Mais comme pour tout outil, son efficacité dépend de la manière dont vous l’utilisez. 🤫

Objectif

Dans cet article, nous allons vous montrer comment tirer le meilleur parti du bloc Code de Gutenberg. Que vous soyez un utilisateur expérimenté de WordPress ou que vous découvriez tout juste Gutenberg, ce guide vous aidera à ajouter et à styliser des extraits de code avec facilité. Alors, préparez-vous à plonger dans le monde fascinant des blocs Gutenberg ! 🤭

Une solution clés en main pour créer un site WordPress ?

LWS vous conseille sa formule d’hébergement WordPress en promotion à -20% (offre à partir de 3,99€ par mois au lieu de 4,99 €). Non seulement les performances sont au rendez-vous mais vous profitez en plus d’un support exceptionnel.

Découvrir l'offre

Prérequis

Les utilisateurs souhaitant utiliser le bloc Code Gutenberg doivent avoir un site WordPress qui fonctionne correctement. Ensuite, il faut avoir la possibilité d’accéder à ce site avec les privilèges d’auteur, d’éditeur de contenus ou d’administrateur.

Apprendre à ajouter un bloc Code sur Gutenberg – 2 méthodes

Qu’il s’agisse de partager un extrait de code dans une page web ou dans une publication, vous disposez de deux manières pour ajouter un bloc Code sur Gutenberg.

1. Insérer le bloc Code via l’outil d’insertion de blocs

Ouvrez votre page dans Gutenberg, accédez à l’outil d’insertion de blocs, puis utilisez la barre de recherche pour trouver le bloc Code. Ensuite, cliquez dessus pour l’ajouter dans l’interface d’édition.Ajouter le bloc Code via l'outil d'insertion de blocs Gutenberg

2. Intégrer rapidement le bloc Code dans Gutenberg

Pour intégrer rapidement un bloc Code dans votre page, appuyez sur le bouton « + » sur n’importe bloc Paragraphe et recherchez le bloc Code pour l’ajouter dans votre publication.Ajouter rapidement un bloc Code sur Gutenberg

Ajouter du Code dans le bloc Code Gutenberg

Le bloc Code de Gutenberg permet de partager les extraits de codes pour la plupart de langages de programmation courants (HTML, CSS, JavaScript…) tout en empêchant à WordPress de les traduire en un contenu visuel.

Ainsi, une fois que le bloc est ajouté, commencez à saisir ou coller votre extrait de code dans le champ prévu.Ajouter du Code sur Gutenberg

Une fois que le code est ajouté dans ce bloc, il gardera la mise en page initiale.Mise en page du Code sur Gutenberg

Vous disposez ensuite d’une barre d’outils similaire à celle d’un bloc Paragraphe. Vous pouvez donc mettre en gras des lignes de codes, les pencher à l’aide du bouton italique ou insérer des liens.

Besoin d'un serveur privé virtuel VPS sécurisé ?

LWS vous conseille sa formule d’hébergement sur VPS en promotion à -75% (offre à partir de 4,99€ par mois au lieu de 19,99 €). Non seulement les performances sont au rendez-vous mais vous profitez en plus d’un support exceptionnel.

Découvrir l'offre

Appliquer du style au bloc Code sur Gutenberg

Gutenberg dispose de multiples options pour personnaliser le style de votre extrait de codes et améliorer son apparence.

Ainsi, accédez aux paramètres du bloc pour modifier, par exemple, la couleur de lignes des codes et celle d’arrière-plan.Appliquer du style aux lignes de codes sur GutenbergVous pouvez aussi, à l’occasion, modifier la taille ou le style de bordures. Une fois que vous avez terminé, enregistrez/publiez votre page.Publier du code sur Gutenberg

Trucs et astuces


N’oubliez pas de consulter notre Blog LWS pour une dose régulière de conseils, de tutoriels et de nouvelles tendances du web.

Conclusion

Pour terminer, le bloc Code de Gutenberg est un outil précieux pour tous ceux qui souhaitent intégrer et partager du code de manière élégante dans leurs publications WordPress. Que vous soyez un développeur partageant des extraits de code, un professionnel enseignant la programmation, ou simplement un blogueur cherchant à personnaliser davantage votre site, le bloc Code a beaucoup à offrir. Nous espérons que ce guide vous a aidé à comprendre comment utiliser efficacement ce bloc. 🤗Passez à la pratique et utilisez ce guide chaque fois que vous souhaitez partager des extraits de codes avec votre public.

Vous n’arrivez pas à utiliser correctement le bloc Code sur Gutenberg ? N’hésitez à partager avec nous toutes vos difficultés en rapport avec l’utilisation du bloc Code dans les Commentaires.

Besoin d’un hébergement WordPress rapide et de qualité ?

LWS vous conseille sa formule d’hébergement WordPress en promotion à -20% (offre à partir de 3,99€ par mois au lieu de 4,99 €). Non seulement les performances sont au rendez-vous mais vous profitez en plus d’un support exceptionnel.

Découvrir l’offre

Avatar de l'auteur

Auteur de l'article

Joseph

Bonjour, je m'appelle Joseph. Je suis rédacteur spécialisé dans WordPress, PrestaShop et d'autres CMS. Fort d'une expertise approfondie en PHP et MySQL, je partage mes connaissances à travers des tutoriels simples et accessibles. Passionné par le développement et la transmission de savoir, j'aime expliquer et rendre les concepts techniques compréhensibles pour tous

Avis client de l'hébergeur LWS

Nos avis Trustpilot Nos avis Hostadvice Nos avis sur avis.lws.fr
Avis trustpilot 30/04/2022

LWS l'hébergeur par excellence !

LWS est pour moi l'hébergeur par excellence, que cela soit au niveau de l'hébergement qui est très performant, les mails qui sont d'une qualité professionnelle et de la gestion du domaine facile à comprendre.

PauseGreen

Avis hostadvice 27/04/2022

Super, au top !

Au top, prix attractif. Service très rapide et réactif. Je l'ai même personnellement recommandé à des proches. La vie est bien plus facile avec LWS

Masset Eliot

Avis avislws 26/04/2022

Support

Clair, efficace, rapide et à tarif abordable. J'ai maintenant un site superbe à mon image, puisque je le fais moi-même. L'équipe technique est au top, j'ai une réponse en 20 minutes, cela change d'autres hébergeurs pourtant plus connu.

Lady Whip

Avis hostadvice 24/04/2022

Bravo et merci

Bravo et merci aux équipes techniques pour leur réactivité et leur professionnalisme depuis plus de 10 ans chez eux et de nombreux sites !!! Merci

Olivier Delmas

Avis trustpilot 23/04/2022

Je suis très satisfait.

J'ai commandé un hébergement pour le site d'une association. Tout s'est passé très rapidement et sans la moindre embuche. La tarification est attractive et me parait très claire. Le panneau d'administration de l'hébergement est facile à utiliser et à comprendre. Je n'ai pas encore installé Wordpress car le contenu n'est pas prêt mais ce sera la prochaine étape et je suis très confiant. Merci !

Pierre-André Liné

Avis avislws 20/04/2022

Un service technique excellent

Je suis client chez LWS depuis 2011 avec une boutique OSCommerce qui tourne comme une horloge depuis cette date sur un hébergement mutualisé. La disponibilité de la boutique est très proche de 100%. Concernant les rares problèmes rencontrés en huit ans, j’ai eu à chaque fois un technicien compétent qui a résolu le problème très rapidement et efficacement. Je suis en train de migrer sur une plateforme Pretashop sur un VPS, avec l’offre LWS Debian 9 et Prestashop. Un technicien m’a grandement aidé pour finaliser l’installation de la boutique lors de la mise à jour vers la dernière version de Prestashop 1.7 qui posait problème. Je suis très satisfait de LWS, et ce sur la durée : réponses et réactions rapides et efficaces. Je recommande cet hébergeur et encore merci.

Alain

Avis trustpilot 16/04/2022

Une expérience jamais égalée !

Étant Développeur Web & Mobile Full-Stack depuis plus de 5 ans déjà, j'ai rarement eu un service client aussi rapide et efficace. Sans compter la qualité du service en ligne. Je recommande VIVEMENT LWS !

Chris KOUAKAM

Avis hostadvice 12/04/2022

Très bon hébergeur

J'ai un serveur VPS chez eux et je n'ai aucun problème, dès qu'il y a un problème le service technique est la pour vous aider et répond assez rapidement à votre demande. Je recommande vivement cet hébergeur.

Vanden Cruyce

Avis avislws 09/04/2022

Je suis ravie

Je suis ravie d'être avec LWS sur tous les plans, je remercie les Techniciens (Fabrice, Omar, Sandy-Mahitsison) depuis plus de 8 ans j'ai évolué avec LWS et toujours soutenue. Une véritable relation humaine même si les questions ou nos inquiétudes ne correspondent pas à leurs missions, ils sont là pour nous répondent et nous rassurent. Mon site c'est mon travail ma source de revenue donc il sont mes partenaires ! les travailleurs de l'ombre merci à eux ! Merci LWS

L'atelier-and-Co

Commentaires (0)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.