Apprendre à afficher du code dans WordPress est essentiel pour les blogueurs et les créateurs de contenu qui publient régulièrement du code en ligne à l’intention de leurs lecteurs. Le code informatique, par conception, rend quelque chose de nouveau sur l’interface publique d’un site plutôt que les balises, les barres obliques et les hooks que vous trouvez dans les extraits de code réels.
Cela pose toutefois un problème pour ceux qui écrivent sur le développement et la conception, car vous avez besoin d’un moyen d’afficher correctement le code sans qu’il fasse son véritable travail, comme créer un bouton ou ajouter un style à un bloc de paragraphe.
En d’autres termes, si vous écrivez un article de blog et y insérez un exemple d’extrait de code, vous voudrez empêcher le code de fonctionner réellement ! De cette façon, les lecteurs peuvent voir le code dans sa forme brute, le voir dans un bloc joliment formaté et même copier son contenu pour l’utiliser dans leur travail de développement.
Dans ce guide, nous vous montrerons exactement comment afficher du code dans WordPress (quel que soit votre thème WordPress) en utilisant plusieurs méthodes différentes, et nous vous aiderons à choisir celle qui convient le mieux à votre flux de travail.
Que se passe-t-il lorsque vous ajoutez du code régulier dans WordPress ?
Vous vous demandez peut-être ce qui se passerait si vous écriviez du code dans l’éditeur visuel de WordPress. Après tout, vous n’êtes pas en train d’utiliser les éditeurs de texte ou de code, donc votre extrait de code ne devrait-il pas fonctionner correctement ?
Ce n’est probablement pas le cas.
Voici quelques-uns des résultats inhabituels qui peuvent se produire :
- Le code apparaît partiellement, avec des morceaux de code apparaissant sur la page d’accueil de l’article et d’autres disparaissant. Les visiteurs ont l’impression que ce n’est pas professionnel ; cela signifie que votre code n’est pas exact.
- Rien du tout n’apparaît, le code disparaissant complètement du backend et n’apparaissant pas du tout sur le frontend de votre article.
- Vous voyez un formatage étrange – souvent quelque chose qui n’est pas convivial ou publiable pour un public.
- Le code peut ne s’afficher que partiellement
Pour illustrer quelques-uns de ces résultats, nous allons utiliser l’extrait de code HTML suivant :
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color: green;
color: white;
border: 4px solid black;
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<div class="cities">
<h2>Chicago</h2>
<p>A nickname for Chicago is The City of Broad Shoulders.</p>
</div>
<div class="cities">
<h2>Los Angeles</h2>
<p>A nickname for Los Angeles is The City of Angels.</p>
</div>
<div class="cities">
<h2>New York</h2>
<p>A nickname for New York is The Big Apple.</p>
</div>
</body>
</html>Cet extrait de code utilise des éléments de style HTML pour produire trois blocs de contenu verts avec des en-têtes et des paragraphes.
Cependant, nous aimerions afficher le code brut dans un article de blog, sans qu’il soit rendu dans ces blocs.
Voici les résultats si nous collons le code directement dans l’éditeur de blocss WordPress Gutenberg :
Comme vous pouvez le voir, WordPress essaie d’utiliser le code pour son objectif principal : générer du contenu – cependant, il dépouille le code de son style, de sorte qu’il ne fournit pas le résultat que nous voulions montrer aux lecteurs.
Pour éviter ce genre de situation, nous vous encourageons à utiliser l’une des méthodes listées ci-dessous pour afficher le code.
Comment afficher du code sur votre site WordPress (6 méthodes)
Ces méthodes sont classées de la plus facile à la plus difficile, et nous avons quelques méthodes spéciales pour ceux qui aiment écrire du code et du contenu dans des éditeurs markdown (par opposition à WordPress).
Méthode 1 : Utiliser l’éditeur de blocs Gutenberg (par défaut)
Pour vous entraîner à afficher du code dans WordPress, vous pouvez utiliser l’extrait de code suivant, qui utilise du HTML et du CSS interne pour produire un résultat simple avec un en-tête bleu et un paragraphe noir :
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: beige;}
h1 {color: blue;}
p {color: black;}
</style>
</head>
<body>
<h1>Fun Facts About Otters</h1>
<p>A group of otters in water is called a "raft," since they all link arms to prevent from floating away.</p>
</body>
</html>Lorsqu’il est mis en action, le code affiche ceci sur l’interface publique :
Mais en suivant ce tutoriel, vous apprendrez comment afficher le code brut lui-même, et non pas ce que le code est censé afficher sur l’interface publique.
Étape 1 : Ajouter un bloc de code dans WordPress
L’éditeur WordPress Gutenberg dispose déjà d’un bloc Code intégré, qui vous permet d’afficher des extraits de code sans perdre sa mise en forme ni activer réellement le code.
Pour commencer, ouvrez un article ou une page dans WordPress, puis cliquez sur l’un des boutons Ajouter un bloc.
Cliquez sur l’un des boutons Ajouter un bloc
La collection de blocs disponibles s’affiche. Vous pouvez rechercher le bloc Code ou saisir un mot-clé comme « code » dans la barre de recherche.
Lorsque vous voyez le bloc Code (avec les icônes de parenthèses), cliquez dessus pour insérer un morceau de code dans la publication.
Vous devriez maintenant voir un champ avec l’invite « Écrire du code… ».
L’éditeur WordPress Gutenberg prend en charge le markdown, vous pouvez donc également trouver et insérer le bloc Code en tapant une barre oblique (/) dans l’éditeur, puis en commençant à écrire « C » ou « Code ». WordPress affichera alors tous les blocs pertinents, vous donnant un moyen plus rapide de les insérer.
Il est facile de confondre le bloc Code et le bloc HTML personnalisé. Cependant, le bloc HTML personnalisé sert à ajouter du HTML personnalisé à rendre sur l’interface publique, et non à ajouter du code brut à afficher.
Étape 2 : Coller le code d’affichage dans le champ du bloc Code
Il est maintenant temps de copier le code que vous souhaitez afficher et de le coller dans le champ « Écrire du code… ».
Votre code apparaît maintenant à l’intérieur de la boîte.
L’avantage du bloc Code est qu’il respecte tous les espaces et les tabulations que vous aviez déjà dans l’extrait de code. Par conséquent, il ne devrait pas être différent de la source à partir de laquelle vous l’avez copié.
Étape 3 : Publier et voir les résultats
Pour afficher votre code sur votre article ou votre page WordPress, terminez le processus en cliquant sur le bouton Publier.
Vous pouvez également vous faire une idée de ce à quoi il ressemble avant de le publier en sélectionnant Aperçu.
Une fois que vous avez cliqué sur le bouton Publier, visitez la version en ligne de cet article pour confirmer que votre morceau de code s’affiche en tant que code brut.
Comme vous pouvez le constater, le bloc Code est relativement simple, mais il offre une fonctionnalité nécessaire pour maintenir le formatage lors de la publication de code dans les articles de blog.
Jetez un coup d’œil à la capture d’écran ci-dessous. Dans notre exemple, rien n’a changé par rapport à l’extrait de code original ; il a simplement été présenté sur l’interface publique dans une boîte grise.
Étape 4 : Envisagez de formater le bloc de code
Pour faire ressortir un peu le bloc Code, pensez à modifier son apparence par rapport à celle par défaut.
Pour afficher les options de style du bloc, sélectionnez le bloc Code, puis cliquez sur le bouton Réglages (icône en forme d’engrenage). Cela ouvre l’onglet Bloc, qui n’affiche que les paramètres du bloc sélectionné – dans ce cas, le bloc Code.
Vous pouvez styliser le bloc Code comme vous le souhaitez, avec des options permettant de modifier des éléments tels que le texte et les couleurs d’arrière-plan.
Vous pouvez également :
- Modifier la taille du texte
- Ajouter un rembourrage et des marges à la boîte de code
- Inclure une bordure d’une largeur et d’une couleur personnalisées
Comme toujours, cliquez sur le bouton Publier lorsque vous avez fini de modifier le bloc, puis visualisez les résultats sur l’interface publique de votre article WordPress.
Méthode 2 : Utiliser un plugin
Une autre façon d’afficher du code sur WordPress est d’installer une extension.
Cette méthode peut sembler un peu redondante étant donné que WordPress dispose déjà d’un bloc Code intégré, mais certaines extensions offrent des fonctionnalités et des outils de mise en forme supplémentaires qui font que travailler avec une extension en vaut la peine. En bref, vous pouvez rendre vos blocs de code plus jolis que ce que vous obtiendriez avec le bloc de code standard de Gutenberg.
En outre, certains utilisateurs de l’éditeur WordPress classique peuvent trouver plus facile de travailler avec une extension, car il est un peu plus difficile d’afficher du code dans l’éditeur classique.
Pour commencer, vous devez choisir un plugin « surligneur de syntaxe », ce qui est une façon fantaisiste de dire que l’extension mettra en évidence votre code source et conservera son formatage intact.
Voici quelques plugins réputés pour afficher du code sur WordPress :
Nous utiliserons l’extension Enlighter dans ce tutoriel car elle offre des options pour marquer les types de code que vous affichez dans vos boîtes de code, ainsi que de nombreuses autres fonctionnalités de style. Cependant, vous pouvez tout à fait essayer les autres extensions, car elles font pratiquement tous la même chose.
Étape 1 : Installer un plugin de surlignage syntaxique
Installez l’extension Enlighter – Customizable Syntax Highlighter sur votre site WordPress en utilisant votre méthode d’installation d’extension préférée.
Après l’activation, l’extension est prête à insérer du code dans n’importe quel article/page avec un bloc Gutenberg ou un bouton d’insertion de l’éditeur classique.
Étape 2 : Insérer le bloc Enlighter Sourcecode dans un article
Si vous utilisez l’éditeur de blocs WordPress Gutenberg, ouvrez un article dans lequel vous souhaitez afficher du code. Cliquez sur l’un des boutons Ajouter un bloc (icône +) pour afficher la collection de blocs disponibles.
Parcourez ou saisissez un mot-clé pour le bloc Enlighten Sourcecode. Cliquez sur ce bloc pour l’insérer dans l’article.
Étape 3 : Collez le code dans le bloc Enlighter Syntax Highlighter
Le bloc Enlighter Highlighter apparaît alors dans l’éditeur de blocs, avec un titre pour « Generic Highlighting » et un champ pour « Insert Sourcecode… »
Prenez le code que vous souhaitez afficher sur WordPress et collez-le dans le champ « Insert Sourcecode… ».
En tant que surligneur syntaxique, l’extension préserve tous les choix de formatage et les tabulations. Une fois que vous êtes satisfait du résultat, cliquez sur le bouton Publier.
Étape 4 : Prévisualisation du code sur l’interface publique
Vous pouvez maintenant afficher l’interface publique de votre article pour voir ce que les visiteurs du site voient.
L’extension Enlighter propose un thème minimaliste par défaut pour l’affichage du code, avec des numéros de ligne pour faciliter l’organisation et le référencement.
Comme nous l’avons mentionné, l’utilisation d’une extension pour afficher le code sur WordPress présente des avantages par rapport aux autres méthodes. Par exemple, la version frontend de l’extension de syntaxe Enlighter met en évidence les lignes lorsque l’utilisateur fait défiler votre code.
Il existe également plusieurs boutons dans le coin supérieur droit de la boîte de code, dont un qui présente le code en texte brut, sans les numéros de ligne.
Le deuxième bouton s’appelle Copy to clipboard. Il permet de copier instantanément tout ce qui se trouve dans la boîte de code dans le presse-papiers de l’utilisateur, qui peut le prendre et le coller dans n’importe quel programme de son choix.
Enfin, le troisième bouton ouvre le code dans une nouvelle fenêtre, le présentant dans une version en texte brut de la fenêtre de votre navigateur.
Étape 5 : Définir les réglages de langage et de ligne pour la boîte de code
L’extension Enlighter est livrée avec différents thèmes et de puissants outils de personnalisation pour donner à la boîte de code l’aspect que vous souhaitez. Si vous préférez ne pas utiliser le thème par défaut, retournez à votre article dans WordPress et cliquez sur le bloc Enlighter Sourcecode actuellement ouvert.
Cela permet d’afficher la colonne latérale Bloc dans WordPress. Si elle n’apparaît pas, n’oubliez pas de cliquer sur le bouton Réglages (icône en forme d’engrenage) dans le coin supérieur droit de la fenêtre de WordPress.
Le premier réglage à personnaliser est le champ Language – il indique à l’extension quel langage de code est affichée afin qu’il puisse offrir le formatage et la mise en évidence appropriés.
Vous avez le choix entre plusieurs langages de codage. Parcourez la liste et choisissez celui qui vous convient le mieux.
Le champ Speciallines met en évidence les lignes que vous spécifiez. Pour ce faire, saisissez des numéros de ligne séparés par des virgules.
Les visiteurs du site verront ainsi les lignes mises en évidence pour toutes celles que vous avez spécifiées.
Le champ Lineoffset permet de faire commencer votre extrait de code à une ligne numérotée spécifique, ce qui est utile si vous n’affichez qu’un sous-ensemble de code faisant partie d’une collection de lignes plus importante.
Comme vous pouvez le voir, la saisie de 10 dans le champ Lineoffset fait démarrer l’ensemble de la boîte de code au numéro 10.
Étape 6 : Choisissez un thème
Le thème Enlighter est le thème par défaut de cette extension. Cependant, le champ Theme (toujours sous le panneau Block settings) présente une large gamme de thèmes intégrés à choisir.
Par exemple, le thème Godzilla affiche le code comme s’il se trouvait au-dessus d’un graphique ou d’un papier à dessin.
Le thème Atomic fait passer l’arrière-plan à un thème sombre tout en offrant un texte principalement blanc et des couleurs roses pour les balises de code.
Un autre exemple est le thème Classic, qui est une version moins minimaliste du thème Enlighter avec des couleurs plus vives et des lignes plus définies.
Étape 7 : Envisagez de créer un thème personnalisé
L’extension Enlighter propose un onglet dans le tableau de bord de WordPress pour personnaliser chaque aspect de l’extension et de ses fonctionnalités.
Pour contrôler entièrement la conception et l’affichage de vos boîtes de code, accédez à l’onglet Enlighter (icône <>), puis choisissez Appearance ou Theme Customizer.
L’onglet Apparence vous permet de choisir un thème standard tout en vous donnant accès à des éléments de réglage tels que :
- L’indentation du code
- Débordement du texte
- Numérotation des lignes
- Effet de survol de ligne
- Code RAW sur double-clic
La section du personnalisateur de thème comprend une longue liste d’onglets permettant de créer un thème de surligneur de code à partir de zéro, avec des options permettant d’ajuster les boutons, les expressions, les langages, etc.
Bonus : Utiliser Enlighter avec l’éditeur classique
L’extension Enlighter fonctionne légèrement différemment pour ceux qui utilisent encore l’éditeur classique de WordPress.
Une fois que vous avez installé l’extension Enlighter, allez sur n’importe quel article ou page et trouvez le bouton Enlighter Code Insert dans le panneau de contrôle de l’éditeur.
Une nouvelle fenêtre appelée Enlighter Code Insert apparaît.
Collez le code que vous souhaitez afficher dans le grand champ (sans libellé) situé en bas.
Cliquez sur le menu déroulant du champ Language pour sélectionner le langage de code approprié.
Une fois que vous avez terminé, cliquez sur le bouton OK. Vous pouvez également ajuster les autres fonctionnalités de cette fenêtre, comme l’indentation des lignes.
Cliquez sur le bouton Publier pour l’article, puis affichez les résultats sur l’interface publique. La boîte de code par défaut de l’Éditeur classique est un thème sombre, mais vous pouvez modifier l’apparence de votre boîte de code et même créer vos propres thèmes.
Méthode 3 : Utiliser un outil d’encodage
Les outils d’encodage sont des options alternatives lorsque vous essayez d’afficher du code dans WordPress, en particulier si vous n’avez pas l’intention de le faire souvent (et que vous préférez ne pas vous embêter avec une extension).
Les encodeurs HTML préservent l’intégrité des formats de code, en particulier ceux qui contiennent des caractères spéciaux et des tabulations. Les encodeurs peuvent traiter tous les types de code, mais ils traduisent ensuite le code inséré en un code prêt pour le HTML, facile à coller dans WordPress.
Il n’existe pas d’outils d’encodage fiables sous forme d’extensions, mais beaucoup sont proposés sous forme d’applications web tierces gratuites. Notez également que les outils d’encodage n’offrent pas d’outils de stylisation, de sorte que vous ne recevrez que le code tel qu’il est censé être affiché (pas de boîtes fantaisistes ni de fonctions de personnalisation des lignes).
Voici quelques outils d’encodage fiables :
D’après nos tests, l’outil d’encodage le plus efficace est W3Docs HTML Encoder, c’est pourquoi nous l’utiliserons pour ce tutoriel.
Étape 1 : Ouvrez l’encodeur et choisissez les réglages
Allez sur le site web de W3Docs HTML Encoder.
La page montre deux champs de case côte à côte. Celui de gauche est l’endroit où vous devez coller votre code. Celui de droite affiche la version encodée à copier et à coller dans WordPress.
Cependant, vous devez d’abord définir le type de code que vous souhaitez conserver :
- Choisissez l’unicode JavaScript si vous collez du code contenant des éléments JavaScript.
- Choisissez les symboles HTML si vous utilisez du HTML.
Étape 2 : Collez et cliquez pour encoder
Collez le code que vous souhaitez afficher dans WordPress dans le champ de gauche. Puis trouvez et cliquez sur le bouton Encoder en haut à droite.
Étape 3 : Copiez le résultat décodé
Le produit fini peut sembler confus, mais il s’agit en fait d’une combinaison d’éléments HTML qui préservent chaque aspect du code que vous avez inséré, sans que le code ne s’active et n’affiche quelque chose d’autre sur le frontend.
Cliquez sur le bouton Copier.
Étape 4 : Coller le code HTML dans l’éditeur de code ou de texte de WordPress
Retournez sur WordPress et ouvrez l’article ou la page souhaitée.
Sélectionnez le menu Options (trois points verticaux) dans le coin supérieur droit. Cliquez sur l’option Éditeur de code.
Vous verrez maintenant l’éditeur de code plutôt que l’éditeur de bloc visuel. Trouvez la zone où vous souhaitez afficher le code et collez votre code HTML dans l’éditeur.
Si vous utilisez l’éditeur WordPress classique, vous devez vous rendre dans l’onglet Texte, qui est le même que l’éditeur de code depuis l’éditeur de blocs Gutenberg.
Étape 5 : Publier et voir le code
Cliquez sur Mettre à jour ou Publier pour l’article, puis naviguez vers l’interface publique de cet article pour voir à quoi il ressemble.
Vous devriez voir le code original qui a été collé dans l’encodeur, avant que l’outil n’ajoute des éléments d’encodage HTML. Comme nous l’avons mentionné, les encodeurs n’offrent aucune fonction de style, c’est donc une excellente méthode pour obtenir une apparence propre et minimaliste.
Méthode 4 : Utilisation d’un code court personnalisé
La création d’un code court personnalisé permet d’insérer des morceaux de code réutilisables sans que vous ayez à les copier et à les coller. C’est pourquoi les codes courts personnalisés offrent une excellente opportunité d’afficher du code sur WordPress.
Voici les avantages de l’utilisation de codes courts personnalisés pour afficher du code :
- Les codes courts personnalisés vous permettent d’enregistrer un code compliqué une fois, puis de le réutiliser, ce qui vous évite d’avoir à saisir de longs extraits de code à chaque fois.
- Vous pouvez écrire vos propres feuilles de style CSS pour les surligneurs de code et les boîtes.
- Les codes courts peuvent être utilisés par n’importe qui, de sorte que d’autres contributeurs peuvent tirer parti de vos surligneurs et blocs de code en cliquant sur un bouton.
La création d’un code court personnalisé nécessite une certaine expérience dans l’édition de fichiers de thèmes WordPress, le travail avec du code PHP et éventuellement la création d’extensions WordPress. En raison de ces exigences, la création d’un code court personnalisé pour WordPress peut être difficile pour ceux qui ne connaissent pas le PHP.
Cependant, le produit fini permet d’afficher plus facilement du code sur WordPress.
Vous pouvez nommer le code court personnalisé comme vous le souhaitez et créer plusieurs options, comme [html] [/html] et [css] [/css], pour différents langages de code.
Gardez à l’esprit que les codes courts personnalisés fonctionnent mieux pour la coloration syntaxique lorsque vous utilisez l’éditeur de texte (dans WordPress Classic) ou la boîte HTML personnalisée lorsque vous travaillez avec l’éditeur de blocs WordPress Gutenberg.
L’objectif est de construire un code court personnalisé dans lequel vous pouvez taper ou coller du code entre les balises d’ouverture et de fermeture du code court.
Une fois publié, les réglages de style et de mise en évidence de votre code court personnalisé s’affichent sur l’interface publique. Et le code que vous avez ajouté s’affiche joliment dans le surligneur de syntaxe.
Méthode 5 : Utilisation des balises
La méthode la plus ancienne – mais toujours incroyablement fiable – pour afficher du code sur WordPress consiste simplement à ajouter des balises HTML spécifiques autour de l’extrait de code. Cette méthode est la meilleure lorsque vous travaillez avec l’éditeur WordPress classique, ou avec n’importe quel éditeur HTML.
Il y a deux options :
<code>balises : Meilleur pour afficher une courte ligne de code ; souvent utilisé à l’intérieur des paragraphes<pre>balises : Idéales pour les blocs de code plus longs, ou lorsque vous souhaitez disposer de plus d’options de mise en forme
Option 1 : Utilisez les balises <code> pour les extraits de code en ligne
Les créateurs de contenu qui écrivent sur le codage ne veulent pas toujours utiliser de grands blocs de code. Il est parfois plus judicieux d’inclure un petit bout de code dans un paragraphe.
Cependant, vous devez toujours mettre en évidence et préserver la mise en forme de ce code. De plus, certains codes peuvent causer des problèmes avec le contenu environnant s’ils ne sont pas préservés correctement.
Prenons l’exemple de la balise <br>. Sans les balises <code>, elle ajouterait simplement un saut de ligne à votre paragraphe.
En plaçant le codage à l’intérieur de ces balises, vous obtiendrez un résultat beaucoup plus propre :
<code> </code>Pour cela, ouvrez un article WordPress, et activez soit l’éditeur de code (pour l’éditeur de blocs Gutenberg), soit l’éditeur de texte (lorsque vous utilisez WordPress Classic).
Collez ou saisissez ces balises quelque part dans l’éditeur ; n’insérez pas encore le code que vous souhaitez afficher. Au lieu de cela, ajoutez un espace entre les balises.
<code> </code>
Basculez dans l’éditeur visuel (que vous soyez dans Gutenberg ou dans WordPress classique).
Vous verrez un petit espace gris à l’intérieur du contenu visuel. Cliquez pour placer votre curseur dans cet espace gris. C’est là que vous pouvez coller ou saisir le code à afficher.
Au fur et à mesure que vous tapez, l’espace gris s’agrandit pour accueillir l’extrait de code. Cliquez sur le bouton Publier ou Mettre à jour pour ce message.
Sur la page d’accueil de l’article, vous verrez maintenant le code préservé comme il se doit et sans activité étrange (comme l’ajout d’une coupure à votre contenu).
Le formatage de ces balises <code> est généralement très simple, mais il dépend souvent du style de votre thème. Par exemple, notre exemple ne modifie que la police de caractères, mais n’inclut pas de fond gris.
Option 2 : Utilisez les balises <pre> pour les blocs de code plus longs
Les extraits de code plus longs méritent leurs propres blocs, séparés du contenu que vous écrivez dans les paragraphes. Pour ces blocs, nous vous recommandons d’utiliser les balises <pre>.
Le processus d’ajout d’une balise <pre> est identique à celui des balises <code>, mais vous disposez de plus d’espace pour insérer votre code.
Allez dans un article et ouvrez l’éditeur de code (Gutenberg) ou de texte (WordPress classique). Collez ou tapez le code que vous souhaitez afficher. Entourez ensuite le code de ces balises :
<pre> </pre>
Passez à l’éditeur visuel pour voir ce que cela donne. Vous remarquerez que la section de texte porte un libellé « Preformatted », ce qui est précisément l’objectif de la balise <pre>.
Cliquez sur Publier ou Mettre à jour, puis passez à l’interface publique pour voir votre code dans sa forme originale. Tout comme les balises <code>, les balises <pre> sont peu formatées, ce qui vous permet d’obtenir l’apparence la plus simple possible. Cependant, il existe des moyens de les styliser vous-même.
Conseils pour styliser les balises <pre>
Les balises <pre> sont moins stables que les balises <code>, vous pouvez donc rencontrer des difficultés en fonction du type de code que vous essayez d’afficher.
Utilisez ces conseils pour améliorer l’apparence de votre site :
- Faites de votre mieux pour supprimer ou éviter complètement les sauts de ligne, car la balise
<pre>ne les reconnaît souvent pas. En général, elle réagit mal à un trop grand nombre de retours à la ligne. - Envisagez d’ajouter une propriété
overflow-x:auto;dans votre CSS pour ajouter une fonctionnalité de défilement au code de la balise<pre>. Cela est utile en cas de contenu trop volumineux, car la balise<pre>laisse votre code s’écouler hors de la page. - Utilisez des polices monospaces.
Vous pouvez également styliser le formatage du texte et la boîte derrière le code. Voici un modèle de départ que vous pouvez ajouter à votre fichier CSS:
article pre{
background:#ffffff;
border:3px #eee solid;
border-top:30px #eee solid;
font-family:Consolas, courier;
font-size:0.8em;
white-space:pre;
overflow-x:auto;
}Méthode 6 : Utiliser un éditeur Markdown connecté à WordPress
Les éditeurs Markdown permettent non seulement de saisir et de formater plus rapidement, mais beaucoup d’entre eux se connectent directement à WordPress pour une publication instantanée directement à partir de l’éditeur.
De nombreux rédacteurs se tournent vers les éditeurs Markdown en raison de la rapidité du processus de création de contenu. Heureusement, certains de ces éditeurs proposent des blocs de code markdown, ce qui signifie que vous pouvez afficher du code dans l’éditeur markdown, puis l’envoyer directement à WordPress pour publication.
Gardez à l’esprit que les éditeurs de texte normaux (comme Sublime Text) ne préservent pas l’intégrité du code lorsqu’il est transféré pour publication sur WordPress. Les éditeurs HTML, bien qu’excellents pour écrire et stocker du code, n’offrent pas non plus les fonctions de mise en évidence nécessaires pour préserver le code en vue de sa publication sur WordPress.
Il existe un grand nombre d’éditeurs markdown, mais les solutions idéales partagent deux caractéristiques :
- L’exportation directe vers WordPress
- Markdown pour la mise en évidence du code
Vous pouvez toutefois opter pour un éditeur markdown avec exportation HTML, si vous n’aimez pas les exportations directes vers WordPress.
Les meilleurs éditeurs markdown disposant de ces deux fonctionnalités sont les suivants :
Ulysses et ByWord sont des applications premium, tandis qu’Obsidian propose des versions gratuites et premium.
Pour le tutoriel suivant, nous utiliserons Ulysses.
Étape 1 : Ajouter un bloc de code longform dans Ulysses
Lorsque vous rédigez un document dans Ulysses, saisissez " markdown – c’est-à-dire deux apostrophes – chaque fois que vous souhaitez ajouter immédiatement un bloc de surlignage de code à l’intérieur d’un document.
Cette méthode de démarquage est destinée à des blocs de code plus longs. Elle n’est pas utilisable au milieu d’un paragraphe, vous devez donc créer une nouvelle ligne pour que le markdown s’active.
Une fois que le surligneur de code apparaît, vous pouvez saisir ou coller ce que vous voulez dedans.
Une autre façon d’activer le bloc de code est de cliquer sur l’élément de menu Markdown (trois points horizontaux), puis de sélectionner l’option Code.
Après avoir cliqué sur cet élément de menu, le champ de surlignage du code apparaît à l’endroit où se trouvait le curseur en dernier lieu.
Pour placer des extraits de code à l’intérieur de paragraphes, vous devez vous tourner vers la démarque `` (qui ressemble presque à la même chose, mais il s’agit en fait de deux accents aigus/graves au lieu d’apostrophes).
Étape 3 : Exporter vers WordPress
Une fois votre document prêt, il est temps d’exporter le tout vers WordPress.
L’avantage des éditeurs markdown qui se connectent à WordPress est qu’ils conservent les blocs de code tout au long du transfert. Ainsi, vous verrez des surligneurs de code joliment formatés, prêts à être publiés dans WordPress.
Dans Ulysse, allez en haut du document pour trouver la barre d’outils. Cliquez sur le bouton Aperçu de la publication.
Un menu déroulant s’affiche pour vous permettre de sélectionner la plateforme et le site web sur lesquels vous souhaitez publier. Vous pouvez également utiliser l’option Gérer les comptes de ce menu pour vous connecter à un site web WordPress avant l’exportation.
Une fois que vous avez choisi le bon site web, cliquez sur le bouton Publier.
Renseignez le titre de l’article, l’horaire et toutes les autres informations que vous souhaitez, telles que les catégories, les balises et les images mises en avant.
La partie la plus importante, cependant, est de définir l’état sur Brouillon afin de ne pas publier l’article sans l’avoir d’abord révisé sur WordPress.
Cliquez sur OK pour continuer.
En quelques secondes, Ulysse place l’ensemble du document dans un nouvel article WordPress (il se peut que vous deviez vous connecter à votre administrateur WordPress lorsque le message apparaît).
Vous verrez les blocs de code déjà configurés et prêts à être publiés. Cliquez sur le bouton Publier pour le mettre en ligne.
Sur l’interface publique, vous verrez que les extraits de code en ligne et les blocs de code plus grands sont joliment mis en évidence, et que le formatage de ce code a été préservé.
Résumé
Il existe plusieurs méthodes pour afficher correctement du code sur WordPress, et cela dépend souvent de l’éditeur WordPress utilisé, du langage de code que vous souhaitez afficher, et de la façon dont vous souhaitez afficher et formater ce code. Par exemple, opter pour une extension offrira certainement une expérience de formatage plus créative que le bloc Code standard dans l’éditeur WordPress Gutenberg.
Dans cet article, nous avons couvert de nombreuses méthodes différentes illustrant comment afficher du code dans WordPress.
Nous recommandons généralement de commencer par la méthode 1 et de progresser. La méthode 2 vous est utile si vous recherchez plus d’options de style, et les méthodes 3 à 5 ne sont utiles que dans des situations particulières. La méthode 6 est en quelque sorte une solution bonus, destinée à ceux qui préfèrent les éditeurs markdown plutôt que d’écrire directement dans WordPress.
Quelle que soit la méthode choisie, un hébergeur fiable peut vous aider à peaufiner votre site. Les solutions d’hébergement WordPress de Kinsta offrent des plans pour des sites de toutes formes et tailles, et la plateforme facile à utiliser – MyKinsta, un tableau de bord d’administration propriétaire – rend l’édition de n’importe quelle partie de votre site et de ses fichiers un jeu d’enfant. De plus, vous bénéficiez de la vitesse, de la sécurité et du supoort de classe mondiale de Kinsta.
Avez-vous déjà essayé d’afficher du code dans WordPress ? Si oui, quelle méthode a le mieux fonctionné pour vous ? Faites-nous part de vos commentaires dans la section ci-dessous.
Laisser un commentaire