{"id":69216,"date":"2023-05-17T14:21:54","date_gmt":"2023-05-17T13:21:54","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=69216&#038;preview=true&#038;preview_id=69216"},"modified":"2023-08-23T12:13:23","modified_gmt":"2023-08-23T11:13:23","slug":"afficher-code-dans-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/afficher-code-dans-wordpress\/","title":{"rendered":"Comment afficher du code dans WordPress (et le rendre joli)"},"content":{"rendered":"<p>Apprendre \u00e0 afficher du code dans WordPress est essentiel pour les blogueurs et les cr\u00e9ateurs de contenu qui publient r\u00e9guli\u00e8rement du code en ligne \u00e0 l&rsquo;intention de leurs lecteurs. Le <a href=\"https:\/\/kinsta.com\/fr\/blog\/modifier-code-wordpress\/\">code informatique<\/a>, par conception, rend quelque chose de nouveau sur l&rsquo;interface publique d&rsquo;un site plut\u00f4t que les balises, les barres obliques et les hooks que vous trouvez dans les extraits de code r\u00e9els.<\/p>\n<p>Cela pose toutefois un probl\u00e8me pour ceux qui \u00e9crivent sur le d\u00e9veloppement et la conception, car vous avez besoin d&rsquo;un moyen d&rsquo;afficher correctement le code sans qu&rsquo;il fasse son v\u00e9ritable travail, comme cr\u00e9er un bouton ou ajouter un style \u00e0 un bloc de paragraphe.<\/p>\n<p>En d&rsquo;autres termes, si vous \u00e9crivez un article de blog et y ins\u00e9rez un exemple d&rsquo;extrait de code, vous voudrez emp\u00eacher le code de fonctionner r\u00e9ellement ! De cette fa\u00e7on, les lecteurs peuvent voir le code dans sa forme brute, le voir dans un bloc joliment format\u00e9 et m\u00eame copier son contenu pour l&rsquo;utiliser dans leur travail de d\u00e9veloppement.<\/p>\n<p>Dans ce guide, nous vous montrerons exactement comment afficher du code dans WordPress (quel que soit <a href=\"https:\/\/kinsta.com\/fr\/blog\/comment-personnaliser-theme-wordpress\/\">votre th\u00e8me WordPress<\/a>) en utilisant plusieurs m\u00e9thodes diff\u00e9rentes, et nous vous aiderons \u00e0 choisir celle qui convient le mieux \u00e0 votre flux de travail.<br \/>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc><\/p>\n<h2>Que se passe-t-il lorsque vous ajoutez du code r\u00e9gulier dans WordPress ?<\/h2>\n<p>Vous vous demandez peut-\u00eatre ce qui se passerait si vous \u00e9criviez du code dans l&rsquo;\u00e9diteur visuel de WordPress. Apr\u00e8s tout, vous n&rsquo;\u00eates pas en train d&rsquo;utiliser les \u00e9diteurs de texte ou de code, donc votre extrait de code ne devrait-il pas fonctionner correctement ?<\/p>\n<p>Ce n&rsquo;est probablement pas le cas.<\/p>\n\n<p>Voici quelques-uns des r\u00e9sultats inhabituels qui peuvent se produire :<\/p>\n<ul>\n<li>Le code appara\u00eet partiellement, avec des morceaux de code apparaissant sur la page d&rsquo;accueil de l&rsquo;article et d&rsquo;autres disparaissant. Les visiteurs ont l&rsquo;impression que ce n&rsquo;est pas professionnel ; cela signifie que votre code n&rsquo;est pas exact.<\/li>\n<li>Rien du tout n&rsquo;appara\u00eet, le code disparaissant compl\u00e8tement du backend et n&rsquo;apparaissant pas du tout sur le frontend de votre article.<\/li>\n<li>Vous voyez un formatage \u00e9trange &#8211; souvent quelque chose qui n&rsquo;est pas convivial ou publiable pour un public.<\/li>\n<li>Le code peut ne s&rsquo;afficher que partiellement<\/li>\n<\/ul>\n<p>Pour illustrer quelques-uns de ces r\u00e9sultats, nous allons utiliser l&rsquo;extrait de <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-ce-que-le-html\/\">code HTML<\/a> suivant :<\/p>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n&lt;style&gt;\n.cities {\nbackground-color: green;\ncolor: white;\nborder: 4px solid black;\nmargin: 10px;\npadding: 10px;\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n&lt;div class=\"cities\"&gt;\n&lt;h2&gt;Chicago&lt;\/h2&gt;\n&lt;p&gt;A nickname for Chicago is The City of Broad Shoulders.&lt;\/p&gt;\n&lt;\/div&gt;\n&lt;div class=\"cities\"&gt;\n&lt;h2&gt;Los Angeles&lt;\/h2&gt;\n&lt;p&gt;A nickname for Los Angeles is The City of Angels.&lt;\/p&gt;\n&lt;\/div&gt;\n&lt;div class=\"cities\"&gt;\n&lt;h2&gt;New York&lt;\/h2&gt;\n&lt;p&gt;A nickname for New York is The Big Apple.&lt;\/p&gt;\n&lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>Cet extrait de code <a href=\"https:\/\/kinsta.com\/fr\/blog\/meilleures-pratiques-html\/\">utilise des \u00e9l\u00e9ments de style HTML<\/a> pour produire trois blocs de contenu verts avec des en-t\u00eates et des paragraphes.<\/p>\n<figure id=\"attachment_151531\" aria-describedby=\"caption-attachment-151531\" style=\"width: 937px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151531 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/click-to-write-code.jpg\" alt=\"Cliquez pour \u00e9crire le code\" width=\"937\" height=\"437\"><figcaption id=\"caption-attachment-151531\" class=\"wp-caption-text\">Cliquez pour \u00e9crire le code<\/figcaption><\/figure>\n<p>Cependant, nous aimerions afficher le code <em>brut<\/em> dans un article de blog, sans qu&rsquo;il soit rendu dans ces blocs.<\/p>\n<p>Voici les r\u00e9sultats si nous collons le code directement dans l&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-gutenberg\/\">\u00e9diteur de blocss WordPress Gutenberg<\/a> :<\/p>\n<figure id=\"attachment_151527\" aria-describedby=\"caption-attachment-151527\" style=\"width: 928px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151527 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Gutenberg-Editor-results-from-HTML-code.jpg\" alt=\"R\u00e9sultats de l'\u00e9diteur Gutenberg \u00e0 partir du code HTML\" width=\"928\" height=\"752\"><figcaption id=\"caption-attachment-151527\" class=\"wp-caption-text\">R\u00e9sultats de l&rsquo;\u00e9diteur Gutenberg \u00e0 partir du code HTML<\/figcaption><\/figure>\n<p>Comme vous pouvez le voir, WordPress essaie d&rsquo;utiliser le code pour son objectif principal : g\u00e9n\u00e9rer du contenu &#8211; cependant, il d\u00e9pouille le code de son style, de sorte qu&rsquo;il ne fournit pas le r\u00e9sultat que nous voulions montrer aux lecteurs.<\/p>\n<p>Pour \u00e9viter ce genre de situation, nous vous encourageons \u00e0 utiliser l&rsquo;une des m\u00e9thodes list\u00e9es ci-dessous pour afficher le code.<\/p>\n<h2>Comment afficher du code sur votre site WordPress (6 m\u00e9thodes)<\/h2>\n<p>Ces m\u00e9thodes sont class\u00e9es de la plus facile \u00e0 la plus difficile, et nous avons quelques m\u00e9thodes sp\u00e9ciales pour ceux qui aiment \u00e9crire du code et du contenu dans des \u00e9diteurs markdown (par opposition \u00e0 WordPress).<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"-1\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3>M\u00e9thode 1 : Utiliser l&rsquo;\u00e9diteur de blocs Gutenberg (par d\u00e9faut)<\/h3>\n<p>Pour vous entra\u00eener \u00e0 afficher du code dans WordPress, vous pouvez utiliser l&rsquo;extrait de code suivant, qui <a href=\"https:\/\/kinsta.com\/fr\/blog\/apprendre-le-html\/\">utilise du HTML<\/a> et du CSS interne pour produire un r\u00e9sultat simple avec un en-t\u00eate bleu et un paragraphe noir :<\/p>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n&lt;style&gt;\nbody {background-color: beige;}\nh1 {color: blue;}\np {color: black;}\n&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n&lt;h1&gt;Fun Facts About Otters&lt;\/h1&gt;\n&lt;p&gt;A group of otters in water is called a \"raft,\" since they all link arms to prevent from floating away.&lt;\/p&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>Lorsqu&rsquo;il est mis en action, le code affiche ceci sur l&rsquo;interface publique :<\/p>\n<figure id=\"attachment_151528\" aria-describedby=\"caption-attachment-151528\" style=\"width: 979px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151528 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/html-code-rendering-fun-facts-about-otters.jpg\" alt=\"Les r\u00e9sultats affichent un titre et un corps de texte avec un style\" width=\"979\" height=\"359\"><figcaption id=\"caption-attachment-151528\" class=\"wp-caption-text\">Les r\u00e9sultats affichent un titre et un corps de texte avec un style<\/figcaption><\/figure>\n<p>Mais en suivant ce tutoriel, vous apprendrez comment afficher le code brut lui-m\u00eame, et non pas ce que le code est cens\u00e9 afficher sur l&rsquo;interface publique.<\/p>\n<h4>\u00c9tape 1 : Ajouter un bloc de code dans WordPress<\/h4>\n<p>L&rsquo;\u00e9diteur WordPress Gutenberg dispose d\u00e9j\u00e0 d&rsquo;un bloc Code int\u00e9gr\u00e9, qui vous permet d&rsquo;afficher des extraits de code sans perdre sa mise en forme ni activer r\u00e9ellement le code.<\/p>\n<p>Pour commencer, ouvrez un <a href=\"https:\/\/kinsta.com\/fr\/blog\/obtenir-id-article-wordpress\/\">article ou une page<\/a> dans WordPress, puis cliquez sur l&rsquo;un des boutons <strong>Ajouter un bloc<\/strong>.<\/p>\n<figure id=\"attachment_151529\" aria-describedby=\"caption-attachment-151529\" style=\"width: 941px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151529 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/add-block-buttons.jpg\" alt=\"Boutons d'ajout de bloc\" width=\"941\" height=\"486\"><figcaption id=\"caption-attachment-151529\" class=\"wp-caption-text\">Boutons d&rsquo;ajout de bloc<\/figcaption><\/figure>\n<p>Cliquez sur l&rsquo;un des boutons Ajouter un bloc<\/p>\n<p>La collection de blocs disponibles s&rsquo;affiche. Vous pouvez rechercher le bloc Code ou saisir un mot-cl\u00e9 comme \u00ab code \u00bb dans la barre de recherche.<\/p>\n<p>Lorsque vous voyez le bloc <strong>Code<\/strong> (avec les ic\u00f4nes de parenth\u00e8ses), cliquez dessus pour ins\u00e9rer un morceau de code dans la publication.<\/p>\n<figure id=\"attachment_151530\" aria-describedby=\"caption-attachment-151530\" style=\"width: 939px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151530 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/popup-window-to-add-a-block-with-Code-block-option.jpg\" alt=\"Fen\u00eatre contextuelle pour l'ajout d'un bloc, avec l'option Bloc de code\" width=\"939\" height=\"411\"><figcaption id=\"caption-attachment-151530\" class=\"wp-caption-text\">Fen\u00eatre contextuelle pour l&rsquo;ajout d&rsquo;un bloc, avec l&rsquo;option Bloc de code<\/figcaption><\/figure>\n<p>Vous devriez maintenant voir un champ avec l&rsquo;invite <strong>\u00ab \u00c9crire du code\u2026 \u00bb<\/strong>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151531\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/click-to-write-code.jpg\" alt=\"Click to Write Code\" width=\"937\" height=\"437\"><\/p>\n<p>L&rsquo;\u00e9diteur WordPress Gutenberg prend en charge le markdown, vous pouvez donc \u00e9galement trouver et ins\u00e9rer le bloc Code en tapant une barre oblique (<code>\/<\/code>) dans l&rsquo;\u00e9diteur, puis en commen\u00e7ant \u00e0 \u00e9crire \u00ab C \u00bb ou \u00ab Code \u00bb. WordPress affichera alors tous les blocs pertinents, vous donnant un moyen plus rapide de les ins\u00e9rer.<\/p>\n<p>Il est facile de confondre le bloc Code et le bloc HTML personnalis\u00e9. Cependant, le bloc HTML personnalis\u00e9 sert \u00e0 ajouter du HTML personnalis\u00e9 \u00e0 rendre sur l&rsquo;interface publique, et non \u00e0 ajouter du code brut \u00e0 afficher.<\/p>\n<figure id=\"attachment_151532\" aria-describedby=\"caption-attachment-151532\" style=\"width: 933px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151532 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/using-markdown-to-call-the-Code-block.jpg\" alt=\"Utilisation de markdown pour appeler le bloc Code\" width=\"933\" height=\"380\"><figcaption id=\"caption-attachment-151532\" class=\"wp-caption-text\">Utilisation de markdown pour appeler le bloc Code<\/figcaption><\/figure>\n<h4>\u00c9tape 2 : Coller le code d&rsquo;affichage dans le champ du bloc Code<\/h4>\n<p>Il est maintenant temps de copier le code que vous souhaitez afficher et de le coller dans le champ <strong>\u00ab \u00c9crire du code\u2026 \u00bb.<br \/>\n<\/strong><\/p>\n<figure id=\"attachment_151533\" aria-describedby=\"caption-attachment-151533\" style=\"width: 936px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151533 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Write-or-Paste-in-Code-to-Display.jpg\" alt=\"\u00c9crire ou coller le code \u00e0 afficher\" width=\"936\" height=\"405\"><figcaption id=\"caption-attachment-151533\" class=\"wp-caption-text\">\u00c9crire ou coller le code \u00e0 afficher<\/figcaption><\/figure>\n<p>Votre code appara\u00eet maintenant \u00e0 l&rsquo;int\u00e9rieur de la bo\u00eete.<\/p>\n<p>L&rsquo;avantage du bloc Code est qu&rsquo;il respecte tous les espaces et les tabulations que vous aviez d\u00e9j\u00e0 dans l&rsquo;extrait de code. Par cons\u00e9quent, il ne devrait pas \u00eatre diff\u00e9rent de la source \u00e0 partir de laquelle vous l&rsquo;avez copi\u00e9.<\/p>\n<figure id=\"attachment_151534\" aria-describedby=\"caption-attachment-151534\" style=\"width: 919px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151534 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Pasted-Snippet-in-the-Code-Block.jpg\" alt=\"Extrait de code coll\u00e9 dans le bloc Code\" width=\"919\" height=\"840\"><figcaption id=\"caption-attachment-151534\" class=\"wp-caption-text\">Extrait de code coll\u00e9 dans le bloc Code<\/figcaption><\/figure>\n<h4>\u00c9tape 3 : Publier et voir les r\u00e9sultats<\/h4>\n<p>Pour afficher votre code sur votre article ou votre page WordPress, terminez le processus en cliquant sur le bouton <strong>Publier<\/strong>.<\/p>\n<p>Vous pouvez \u00e9galement vous faire une id\u00e9e de ce \u00e0 quoi il ressemble avant de le publier en s\u00e9lectionnant <strong>Aper\u00e7u<\/strong>.<\/p>\n<figure id=\"attachment_151535\" aria-describedby=\"caption-attachment-151535\" style=\"width: 929px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151535 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Click-Publish.jpg\" alt=\"Cliquez sur Publier\" width=\"929\" height=\"499\"><figcaption id=\"caption-attachment-151535\" class=\"wp-caption-text\">Cliquez sur Publier<\/figcaption><\/figure>\n<p>Une fois que vous avez cliqu\u00e9 sur le bouton <strong>Publier<\/strong>, visitez la version en ligne de cet article pour confirmer que votre morceau de code s&rsquo;affiche en tant que code brut.<\/p>\n<p>Comme vous pouvez le constater, le bloc Code est relativement simple, mais il offre une fonctionnalit\u00e9 n\u00e9cessaire pour maintenir le formatage lors de la publication de code dans les articles de blog.<\/p>\n<p>Jetez un coup d&rsquo;\u0153il \u00e0 la capture d&rsquo;\u00e9cran ci-dessous. Dans notre exemple, rien n&rsquo;a chang\u00e9 par rapport \u00e0 l&rsquo;extrait de code original ; il a simplement \u00e9t\u00e9 pr\u00e9sent\u00e9 sur l&rsquo;interface publique dans une bo\u00eete grise.<\/p>\n<figure id=\"attachment_151536\" aria-describedby=\"caption-attachment-151536\" style=\"width: 1031px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151536 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/grey-box.jpg\" alt=\"Code affich\u00e9 sur le site web\" width=\"1031\" height=\"1190\"><figcaption id=\"caption-attachment-151536\" class=\"wp-caption-text\">Code affich\u00e9 sur le site web<\/figcaption><\/figure>\n<h4>\u00c9tape 4 : Envisagez de formater le bloc de code<\/h4>\n<p>Pour faire ressortir un peu le bloc Code, pensez \u00e0 modifier son apparence par rapport \u00e0 celle par d\u00e9faut.<\/p>\n<p>Pour afficher les options de style du bloc, s\u00e9lectionnez le bloc <strong>Code<\/strong>, puis cliquez sur le bouton <strong>R\u00e9glages<\/strong> (ic\u00f4ne en forme d&rsquo;engrenage). Cela ouvre l&rsquo;onglet <strong>Bloc<\/strong>, qui n&rsquo;affiche que les param\u00e8tres du bloc s\u00e9lectionn\u00e9 &#8211; dans ce cas, le bloc Code.<\/p>\n<figure id=\"attachment_151537\" aria-describedby=\"caption-attachment-151537\" style=\"width: 1056px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151537 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Go-to-Block-Settings-for-Code-Formatting.jpg\" alt=\"Acc\u00e9dez aux r\u00e9glages du bloc pour le formatage du code\" width=\"1056\" height=\"814\"><figcaption id=\"caption-attachment-151537\" class=\"wp-caption-text\">Acc\u00e9dez aux r\u00e9glages du bloc pour le formatage du code<\/figcaption><\/figure>\n<p>Vous pouvez styliser le bloc Code comme vous le souhaitez, avec des options permettant de modifier des \u00e9l\u00e9ments tels que le texte et les couleurs d&rsquo;arri\u00e8re-plan.<\/p>\n<figure id=\"attachment_151538\" aria-describedby=\"caption-attachment-151538\" style=\"width: 1044px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151538 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Edit-Color-and-Background-Settings.jpg\" alt=\"Modifiez les r\u00e9glages de couleur et d'arri\u00e8re-plan\" width=\"1044\" height=\"758\"><figcaption id=\"caption-attachment-151538\" class=\"wp-caption-text\">Modifiez les r\u00e9glages de couleur et d&rsquo;arri\u00e8re-plan<\/figcaption><\/figure>\n<p>Vous pouvez \u00e9galement :<\/p>\n<ul>\n<li>Modifier la taille du texte<\/li>\n<li>Ajouter un rembourrage et des marges \u00e0 la bo\u00eete de code<\/li>\n<li>Inclure une bordure d&rsquo;une largeur et d&rsquo;une couleur personnalis\u00e9es<\/li>\n<\/ul>\n<figure id=\"attachment_151539\" aria-describedby=\"caption-attachment-151539\" style=\"width: 1050px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151539 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Settings-for-size-dimensions-and-border.jpg\" alt=\"R\u00e9glages pour la taille, les dimensions et la bordure\" width=\"1050\" height=\"806\"><figcaption id=\"caption-attachment-151539\" class=\"wp-caption-text\">R\u00e9glages pour la taille, les dimensions et la bordure<\/figcaption><\/figure>\n<p>Comme toujours, cliquez sur le bouton <strong>Publier<\/strong> lorsque vous avez fini de modifier le bloc, puis visualisez les r\u00e9sultats sur l&rsquo;interface publique de votre <a href=\"https:\/\/kinsta.com\/fr\/blog\/types-publications-personnalises-wordpress\/\">article WordPress<\/a>.<\/p>\n<figure id=\"attachment_151540\" aria-describedby=\"caption-attachment-151540\" style=\"width: 1045px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151540 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Frontend-Results.jpg\" alt=\"R\u00e9sultats sur l'interface publique\" width=\"1045\" height=\"1340\"><figcaption id=\"caption-attachment-151540\" class=\"wp-caption-text\">R\u00e9sultats sur l&rsquo;interface publique<\/figcaption><\/figure>\n<h3>M\u00e9thode 2 : Utiliser un plugin<\/h3>\n<p>Une autre fa\u00e7on d&rsquo;afficher du code sur WordPress est d&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/blog\/comment-installer-plugins-wordpress\/\">installer une extension<\/a>.<\/p>\n<p>Cette m\u00e9thode peut sembler un peu redondante \u00e9tant donn\u00e9 que WordPress dispose d\u00e9j\u00e0 d&rsquo;un bloc Code int\u00e9gr\u00e9, mais certaines extensions offrent des fonctionnalit\u00e9s et des outils de mise en forme suppl\u00e9mentaires 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.<\/p>\n<p>En outre, certains utilisateurs de l&rsquo;\u00e9diteur WordPress classique peuvent trouver plus facile de travailler avec une extension, car il est un peu plus difficile d&rsquo;afficher du code dans l&rsquo;\u00e9diteur classique.<\/p>\n<p>Pour commencer, vous devez choisir un plugin \u00ab surligneur de syntaxe \u00bb, ce qui est une fa\u00e7on fantaisiste de dire que l&rsquo;extension mettra en \u00e9vidence votre code source et conservera son formatage intact.<\/p>\n<p>Voici quelques plugins r\u00e9put\u00e9s pour afficher du code sur WordPress :<\/p>\n<ul>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/enlighter\/\" target=\"_blank\" rel=\"noopener noreferrer\">Enlighter<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/syntaxhighlighter\/\" target=\"_blank\" rel=\"noopener noreferrer\">SyntaxHighlighter Evolved<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/code-prettify\/\" target=\"_blank\" rel=\"noopener noreferrer\">Code Prettify<\/a><\/li>\n<\/ul>\n<p>Nous utiliserons l&rsquo;extension Enlighter dans ce tutoriel car elle offre des options pour marquer les types de code que vous affichez dans vos bo\u00eetes de code, ainsi que de nombreuses autres fonctionnalit\u00e9s de style. Cependant, vous pouvez tout \u00e0 fait essayer les autres extensions, car elles font pratiquement tous la m\u00eame chose.<\/p>\n<h4>\u00c9tape 1 : Installer un plugin de surlignage syntaxique<\/h4>\n<p>Installez l&rsquo;extension Enlighter &#8211; Customizable Syntax Highlighter sur votre site WordPress en utilisant votre <a href=\"https:\/\/kinsta.com\/fr\/blog\/comment-installer-plugins-wordpress\/\">m\u00e9thode d&rsquo;installation d&rsquo;extension<\/a> pr\u00e9f\u00e9r\u00e9e.<\/p>\n<p>Apr\u00e8s l&rsquo;activation, l&rsquo;extension est pr\u00eate \u00e0 ins\u00e9rer du code dans n&rsquo;importe quel article\/page avec un bloc Gutenberg ou un bouton d&rsquo;<strong>insertion<\/strong> de l&rsquo;\u00e9diteur classique.<\/p>\n<figure id=\"attachment_151541\" aria-describedby=\"caption-attachment-151541\" style=\"width: 945px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151541 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/The-Enlighter-Plugin.jpg\" alt=\"L'extension Enlighter\" width=\"945\" height=\"309\"><figcaption id=\"caption-attachment-151541\" class=\"wp-caption-text\">L&rsquo;extension Enlighter<\/figcaption><\/figure>\n<h4>\u00c9tape 2 : Ins\u00e9rer le bloc Enlighter Sourcecode dans un article<\/h4>\n<p>Si vous utilisez l&rsquo;\u00e9diteur de blocs WordPress Gutenberg, ouvrez un article dans lequel vous souhaitez afficher du code. Cliquez sur l&rsquo;un des boutons <strong>Ajouter un bloc<\/strong> (ic\u00f4ne +) pour afficher la collection de blocs disponibles.<\/p>\n<p>Parcourez ou saisissez un mot-cl\u00e9 pour le bloc <strong>Enlighten Sourcecode<\/strong>. Cliquez sur ce bloc pour l&rsquo;ins\u00e9rer dans l&rsquo;article.<\/p>\n<figure id=\"attachment_151542\" aria-describedby=\"caption-attachment-151542\" style=\"width: 997px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151542 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Enlighter-Sourcecode-Block.jpg\" alt=\"Bloc Enlighter Sourcecode\" width=\"997\" height=\"575\"><figcaption id=\"caption-attachment-151542\" class=\"wp-caption-text\">Bloc Enlighter Sourcecode<\/figcaption><\/figure>\n<h4>\u00c9tape 3 : Collez le code dans le bloc Enlighter Syntax Highlighter<\/h4>\n<p>Le bloc <strong>Enlighter Highlighter<\/strong> appara\u00eet alors dans l&rsquo;\u00e9diteur de blocs, avec un titre pour <strong>\u00ab Generic Highlighting \u00bb<\/strong> et un champ pour <strong>\u00ab Insert Sourcecode&#8230; \u00bb<\/strong><\/p>\n<p>Prenez le code que vous souhaitez afficher sur WordPress et collez-le dans le champ <strong>\u00ab Insert Sourcecode&#8230; \u00bb<\/strong>.<strong><br \/>\n<\/strong><\/p>\n<figure id=\"attachment_151543\" aria-describedby=\"caption-attachment-151543\" style=\"width: 1022px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151543 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Use-the-Insert-Sourcecode-Field.jpg\" alt=\"Utiliser le champ Insert Soucecode\" width=\"1022\" height=\"381\"><figcaption id=\"caption-attachment-151543\" class=\"wp-caption-text\">Utiliser le champ Insert Soucecode<\/figcaption><\/figure>\n<p>En tant que surligneur syntaxique, l&rsquo;extension pr\u00e9serve tous les choix de formatage et les tabulations. Une fois que vous \u00eates satisfait du r\u00e9sultat, cliquez sur le bouton <strong>Publier<\/strong>.<\/p>\n<figure id=\"attachment_151544\" aria-describedby=\"caption-attachment-151544\" style=\"width: 991px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151544 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Click-Publish-1.jpg\" alt=\"Cliquez sur Publier\" width=\"991\" height=\"849\"><figcaption id=\"caption-attachment-151544\" class=\"wp-caption-text\">Cliquez sur Publier<\/figcaption><\/figure>\n<h4>\u00c9tape 4 : Pr\u00e9visualisation du code sur l&rsquo;interface publique<\/h4>\n<p>Vous pouvez maintenant afficher l&rsquo;interface publique de votre article pour voir ce que les visiteurs du site voient.<\/p>\n<p>L&rsquo;extension Enlighter propose un th\u00e8me minimaliste par d\u00e9faut pour l&rsquo;affichage du code, avec des num\u00e9ros de ligne pour faciliter l&rsquo;organisation et le r\u00e9f\u00e9rencement.<\/p>\n<figure id=\"attachment_151545\" aria-describedby=\"caption-attachment-151545\" style=\"width: 1098px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151545 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.95cce0abcfa2479e9089506a78f9c684.jpg\" alt=\"Code WordPress affich\u00e9 sur l'interface publique\" width=\"1098\" height=\"728\"><figcaption id=\"caption-attachment-151545\" class=\"wp-caption-text\">Code WordPress affich\u00e9 sur l&rsquo;interface publique<\/figcaption><\/figure>\n<p>Comme nous l&rsquo;avons mentionn\u00e9, l&rsquo;utilisation d&rsquo;une extension pour afficher le code sur WordPress pr\u00e9sente des avantages par rapport aux autres m\u00e9thodes. Par exemple, la version frontend de l&rsquo;extension de syntaxe Enlighter met en \u00e9vidence les lignes lorsque l&rsquo;utilisateur fait d\u00e9filer votre code.<\/p>\n<figure id=\"attachment_151546\" aria-describedby=\"caption-attachment-151546\" style=\"width: 1035px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151546 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.ffec66ab73594f6a8fcfd86328515232.jpg\" alt=\"Lignes de code surlign\u00e9es\" width=\"1035\" height=\"512\"><figcaption id=\"caption-attachment-151546\" class=\"wp-caption-text\">Lignes de code surlign\u00e9es<\/figcaption><\/figure>\n<p>Il existe \u00e9galement plusieurs boutons dans le coin sup\u00e9rieur droit de la bo\u00eete de code, dont un qui pr\u00e9sente le code en texte brut, sans les num\u00e9ros de ligne.<\/p>\n<figure id=\"attachment_151547\" aria-describedby=\"caption-attachment-151547\" style=\"width: 1020px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151547 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.00b5c3fcfa414d76ae68c0827cb2228c.jpg\" alt=\"Bouton Texte brut\" width=\"1020\" height=\"468\"><figcaption id=\"caption-attachment-151547\" class=\"wp-caption-text\">Bouton Texte brut<\/figcaption><\/figure>\n<p>Le deuxi\u00e8me bouton s&rsquo;appelle <strong>Copy to clipboard<\/strong>. Il permet de copier instantan\u00e9ment tout ce qui se trouve dans la bo\u00eete de code dans le presse-papiers de l&rsquo;utilisateur, qui peut le prendre et le coller dans n&rsquo;importe quel programme de son choix.<\/p>\n<figure id=\"attachment_151548\" aria-describedby=\"caption-attachment-151548\" style=\"width: 946px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151548 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.6c9ec9750eef4aecbfceee51a4af1cc0.jpg\" alt=\"Bouton Copy to clipboard\" width=\"946\" height=\"466\"><figcaption id=\"caption-attachment-151548\" class=\"wp-caption-text\">Bouton Copy to clipboard<\/figcaption><\/figure>\n<p>Enfin, le troisi\u00e8me bouton ouvre le code dans une nouvelle fen\u00eatre, le pr\u00e9sentant dans une version en texte brut de la fen\u00eatre de votre navigateur.<\/p>\n<figure id=\"attachment_151549\" aria-describedby=\"caption-attachment-151549\" style=\"width: 986px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151549 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.777ac0e80acf4dcbb66107daddf8a3b7.jpg\" alt=\"Ouvrir le code dans une nouvelle fen\u00eatre\" width=\"986\" height=\"456\"><figcaption id=\"caption-attachment-151549\" class=\"wp-caption-text\">Ouvrir le code dans une nouvelle fen\u00eatre<\/figcaption><\/figure>\n<h4>\u00c9tape 5 : D\u00e9finir les r\u00e9glages de langage et de ligne pour la bo\u00eete de code<\/h4>\n<p>L&rsquo;extension Enlighter est livr\u00e9e avec diff\u00e9rents th\u00e8mes et de puissants outils de personnalisation pour donner \u00e0 la bo\u00eete de code l&rsquo;aspect que vous souhaitez. Si vous pr\u00e9f\u00e9rez ne pas utiliser le th\u00e8me par d\u00e9faut, retournez \u00e0 votre article dans WordPress et cliquez sur le bloc <strong>Enlighter Sourcecode<\/strong> actuellement ouvert.<\/p>\n<p>Cela permet d&rsquo;afficher la colonne lat\u00e9rale <strong>Bloc<\/strong> dans WordPress. Si elle n&rsquo;appara\u00eet pas, n&rsquo;oubliez pas de cliquer sur le bouton <strong>R\u00e9glages<\/strong> (ic\u00f4ne en forme d&rsquo;engrenage) dans le coin sup\u00e9rieur droit de la fen\u00eatre de WordPress.<\/p>\n<p>Le premier r\u00e9glage \u00e0 personnaliser est le champ <strong>Language<\/strong> &#8211; il indique \u00e0 l&rsquo;extension quel langage de code est affich\u00e9e afin qu&rsquo;il puisse offrir le formatage et la mise en \u00e9vidence appropri\u00e9s.<\/p>\n<figure id=\"attachment_151550\" aria-describedby=\"caption-attachment-151550\" style=\"width: 1148px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151550 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.f2c13dad8c56496597ac3b6a7c51be2c.jpg\" alt=\"Champ Language\" width=\"1148\" height=\"733\"><figcaption id=\"caption-attachment-151550\" class=\"wp-caption-text\">Champ Language<\/figcaption><\/figure>\n<p>Vous avez le choix entre plusieurs langages de codage. Parcourez la liste et choisissez celui qui vous convient le mieux.<\/p>\n<figure id=\"attachment_151551\" aria-describedby=\"caption-attachment-151551\" style=\"width: 1171px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151551 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.4e8a9a6a7c984e20b6bb154e04f75987.jpg\" alt=\"Choix du langage\" width=\"1171\" height=\"886\"><figcaption id=\"caption-attachment-151551\" class=\"wp-caption-text\">Choix du langage<\/figcaption><\/figure>\n<p>Le champ <strong>Speciallines<\/strong> met en \u00e9vidence les lignes que vous sp\u00e9cifiez. Pour ce faire, saisissez des num\u00e9ros de ligne s\u00e9par\u00e9s par des virgules.<\/p>\n<figure id=\"attachment_151552\" aria-describedby=\"caption-attachment-151552\" style=\"width: 1024px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151552 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.17f5c662bffd4955a719bcd12d1afc82.jpg\" alt=\"Special lines\" width=\"1024\" height=\"700\"><figcaption id=\"caption-attachment-151552\" class=\"wp-caption-text\">Special lines<\/figcaption><\/figure>\n<p>Les visiteurs du site verront ainsi les lignes mises en \u00e9vidence pour toutes celles que vous avez sp\u00e9cifi\u00e9es.<\/p>\n<figure id=\"attachment_151553\" aria-describedby=\"caption-attachment-151553\" style=\"width: 982px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151553 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.26424dd29a524fb5bb4e898efbc65609.jpg\" alt=\"Lignes mises en \u00e9vidence sur l'interface publique\" width=\"982\" height=\"477\"><figcaption id=\"caption-attachment-151553\" class=\"wp-caption-text\">Lignes mises en \u00e9vidence sur l&rsquo;interface publique<\/figcaption><\/figure>\n<p>Le champ <strong>Lineoffset <\/strong>permet de faire commencer votre extrait de code \u00e0 une ligne num\u00e9rot\u00e9e sp\u00e9cifique, ce qui est utile si vous n&rsquo;affichez qu&rsquo;un sous-ensemble de code faisant partie d&rsquo;une collection de lignes plus importante.<\/p>\n<figure id=\"attachment_151554\" aria-describedby=\"caption-attachment-151554\" style=\"width: 1046px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151554 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.2fcdd0028fa949ba9294eeb90fee1f99.jpg\" alt=\"Champ Lineoffset\" width=\"1046\" height=\"447\"><figcaption id=\"caption-attachment-151554\" class=\"wp-caption-text\">Champ Lineoffset<\/figcaption><\/figure>\n<p>Comme vous pouvez le voir, la saisie de 10 dans le champ <strong>Lineoffset<\/strong> fait d\u00e9marrer l&rsquo;ensemble de la bo\u00eete de code au num\u00e9ro 10.<\/p>\n<figure id=\"attachment_151555\" aria-describedby=\"caption-attachment-151555\" style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151555 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.29b010d935744289aac79f10b3b2eaf4.jpg\" alt=\"Commencez le document sur une ligne sp\u00e9cifique\" width=\"900\" height=\"463\"><figcaption id=\"caption-attachment-151555\" class=\"wp-caption-text\">Commencez le document sur une ligne sp\u00e9cifique<\/figcaption><\/figure>\n<h4>\u00c9tape 6 : Choisissez un th\u00e8me<\/h4>\n<p>Le th\u00e8me Enlighter est le th\u00e8me par d\u00e9faut de cette extension. Cependant, le champ <strong>Theme<\/strong> (toujours sous le panneau Block settings) pr\u00e9sente une large gamme de th\u00e8mes int\u00e9gr\u00e9s \u00e0 choisir.<\/p>\n<figure id=\"attachment_151556\" aria-describedby=\"caption-attachment-151556\" style=\"width: 942px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151556 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.a6632b4168ee44ef843640a71644257f.jpg\" alt=\"Options de th\u00e8me\" width=\"942\" height=\"771\"><figcaption id=\"caption-attachment-151556\" class=\"wp-caption-text\">Options de th\u00e8me<\/figcaption><\/figure>\n<p>Par exemple, le th\u00e8me Godzilla affiche le code comme s&rsquo;il se trouvait au-dessus d&rsquo;un graphique ou d&rsquo;un papier \u00e0 dessin.<\/p>\n<figure id=\"attachment_151557\" aria-describedby=\"caption-attachment-151557\" style=\"width: 1007px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151557 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.ee85f0bb69e84d96a03ac4d623fd3453.jpg\" alt=\"Le th\u00e8me Godzilla\" width=\"1007\" height=\"563\"><figcaption id=\"caption-attachment-151557\" class=\"wp-caption-text\">Le th\u00e8me Godzilla<\/figcaption><\/figure>\n<p>Le th\u00e8me Atomic fait passer l&rsquo;arri\u00e8re-plan \u00e0 un th\u00e8me sombre tout en offrant un texte principalement blanc et des couleurs roses pour les balises de code.<\/p>\n<figure id=\"attachment_151558\" aria-describedby=\"caption-attachment-151558\" style=\"width: 1063px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151558 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.ebf289e0059f4ac5a19fcfb6c2bfb589.jpg\" alt=\"Th\u00e8me Atomic\" width=\"1063\" height=\"646\"><figcaption id=\"caption-attachment-151558\" class=\"wp-caption-text\">Th\u00e8me Atomic<\/figcaption><\/figure>\n<p>Un autre exemple est le th\u00e8me Classic, qui est une version moins minimaliste du th\u00e8me Enlighter avec des couleurs plus vives et des lignes plus d\u00e9finies.<\/p>\n<figure id=\"attachment_151559\" aria-describedby=\"caption-attachment-151559\" style=\"width: 1020px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151559 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.6a3cbf74437e460ba4f884eb05cee863.jpg\" alt=\"Th\u00e8me classic\" width=\"1020\" height=\"660\"><figcaption id=\"caption-attachment-151559\" class=\"wp-caption-text\">Th\u00e8me classic<\/figcaption><\/figure>\n<h4>\u00c9tape 7 : Envisagez de cr\u00e9er un th\u00e8me personnalis\u00e9<\/h4>\n<p>L&rsquo;extension Enlighter propose un onglet dans le <a href=\"https:\/\/kinsta.com\/fr\/blog\/tableau-de-bord-admin-wordpress\/\">tableau de bord de WordPress<\/a> pour personnaliser chaque aspect de l&rsquo;extension et de ses fonctionnalit\u00e9s.<\/p>\n<p>Pour contr\u00f4ler enti\u00e8rement la conception et l&rsquo;affichage de vos bo\u00eetes de code, acc\u00e9dez \u00e0 l&rsquo;onglet <strong>Enlighter<\/strong> (ic\u00f4ne &lt;&gt;), puis choisissez <strong>Appearance<\/strong> ou <strong>Theme<\/strong> <strong>Customizer<\/strong>.<\/p>\n<figure id=\"attachment_151560\" aria-describedby=\"caption-attachment-151560\" style=\"width: 903px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151560 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.dae7a301ff6c4263b7608ef0fa6d8266.jpg\" alt=\"Personnalisation de th\u00e8me\" width=\"903\" height=\"474\"><figcaption id=\"caption-attachment-151560\" class=\"wp-caption-text\">Personnalisation de th\u00e8me<\/figcaption><\/figure>\n<p>L&rsquo;onglet <strong>Apparence<\/strong> vous permet de choisir un th\u00e8me standard tout en vous donnant acc\u00e8s \u00e0 des \u00e9l\u00e9ments de r\u00e9glage tels que :<\/p>\n<ul>\n<li>L&rsquo;indentation du code<\/li>\n<li>D\u00e9bordement du texte<\/li>\n<li>Num\u00e9rotation des lignes<\/li>\n<li>Effet de survol de ligne<\/li>\n<li>Code RAW sur double-clic<\/li>\n<\/ul>\n<figure id=\"attachment_151561\" aria-describedby=\"caption-attachment-151561\" style=\"width: 1083px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151561 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.abcba1aae5c04c278f1b59b5768b3aa3.jpg\" alt=\"Section Apparence du personnalisateur de th\u00e8me\" width=\"1083\" height=\"830\"><figcaption id=\"caption-attachment-151561\" class=\"wp-caption-text\">Section Apparence du personnalisateur de th\u00e8me<\/figcaption><\/figure>\n<p>La section du <strong>personnalisateur de<\/strong> <strong>th\u00e8me<\/strong> comprend une longue liste d&rsquo;onglets permettant de cr\u00e9er un th\u00e8me de surligneur de code \u00e0 partir de z\u00e9ro, avec des options permettant d&rsquo;ajuster les boutons, les expressions, les langages, etc.<\/p>\n<figure id=\"attachment_151562\" aria-describedby=\"caption-attachment-151562\" style=\"width: 987px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151562 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.e9cf6edb95b34a5ebb1771e2491ad782.jpg\" alt=\"R\u00e9glages suppl\u00e9mentaires\" width=\"987\" height=\"865\"><figcaption id=\"caption-attachment-151562\" class=\"wp-caption-text\">R\u00e9glages suppl\u00e9mentaires<\/figcaption><\/figure>\n<h4>Bonus : Utiliser Enlighter avec l&rsquo;\u00e9diteur classique<\/h4>\n<p>L&rsquo;extension Enlighter fonctionne l\u00e9g\u00e8rement diff\u00e9remment pour ceux qui utilisent encore l&rsquo;\u00e9diteur classique de WordPress.<\/p>\n<p>Une fois que vous avez install\u00e9 l&rsquo;extension Enlighter, allez sur n&rsquo;importe quel article ou page et trouvez le bouton <strong>Enlighter Code Insert<\/strong> dans le panneau de contr\u00f4le de l&rsquo;\u00e9diteur.<\/p>\n<figure id=\"attachment_151563\" aria-describedby=\"caption-attachment-151563\" style=\"width: 969px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151563 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.58a5cf5f681c4e638286491be211f678.jpg\" alt=\"Enlighter Code Insert\" width=\"969\" height=\"434\"><figcaption id=\"caption-attachment-151563\" class=\"wp-caption-text\">Enlighter Code Insert<\/figcaption><\/figure>\n<p>Une nouvelle fen\u00eatre appel\u00e9e <strong>Enlighter<\/strong> <strong>Code Insert<\/strong> appara\u00eet.<\/p>\n<p>Collez le code que vous souhaitez afficher dans le grand champ (sans libell\u00e9) situ\u00e9 en bas.<\/p>\n<figure id=\"attachment_151564\" aria-describedby=\"caption-attachment-151564\" style=\"width: 985px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151564 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.169682da2f0f4a80b61a2e195331cedf.jpg\" alt=\"Collez le code\" width=\"985\" height=\"795\"><figcaption id=\"caption-attachment-151564\" class=\"wp-caption-text\">Collez le code<\/figcaption><\/figure>\n<p>Cliquez sur le menu d\u00e9roulant du champ <strong>Language<\/strong> pour s\u00e9lectionner le langage de code appropri\u00e9.<\/p>\n<figure id=\"attachment_151565\" aria-describedby=\"caption-attachment-151565\" style=\"width: 983px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151565 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.a9bc4bc75c3941d0a18f51012154c107.jpg\" alt=\"Choisissez un langage\" width=\"983\" height=\"660\"><figcaption id=\"caption-attachment-151565\" class=\"wp-caption-text\">Choisissez un langage<\/figcaption><\/figure>\n<p>Une fois que vous avez termin\u00e9, cliquez sur le bouton <strong>OK<\/strong>. Vous pouvez \u00e9galement ajuster les autres fonctionnalit\u00e9s de cette fen\u00eatre, comme l&rsquo;indentation des lignes.<\/p>\n<figure id=\"attachment_151566\" aria-describedby=\"caption-attachment-151566\" style=\"width: 980px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151566 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.34dcd4d4658c4c5b849bbc0271526d65.jpg\" alt=\"Exemple d'indentation de ligne\" width=\"980\" height=\"623\"><figcaption id=\"caption-attachment-151566\" class=\"wp-caption-text\">Exemple d&rsquo;indentation de ligne<\/figcaption><\/figure>\n<p>Cliquez sur le bouton <strong>Publier<\/strong> pour l&rsquo;article, puis affichez les r\u00e9sultats sur l&rsquo;interface publique. La bo\u00eete de code par d\u00e9faut de l&rsquo;\u00c9diteur classique est un th\u00e8me sombre, mais vous pouvez modifier l&rsquo;apparence de votre bo\u00eete de code et m\u00eame cr\u00e9er vos propres th\u00e8mes.<\/p>\n<figure id=\"attachment_151567\" aria-describedby=\"caption-attachment-151567\" style=\"width: 922px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151567 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.3a8933d9ff7049568e8e0145998c0410.jpg\" alt=\"Version publi\u00e9e\" width=\"922\" height=\"743\"><figcaption id=\"caption-attachment-151567\" class=\"wp-caption-text\">Version publi\u00e9e<\/figcaption><\/figure>\n<h3>M\u00e9thode 3 : Utiliser un outil d&rsquo;encodage<\/h3>\n<p>Les outils d&rsquo;encodage sont des options alternatives lorsque vous essayez d&rsquo;afficher du code dans WordPress, en particulier si vous n&rsquo;avez pas l&rsquo;intention de le faire souvent (et que vous pr\u00e9f\u00e9rez ne pas vous emb\u00eater avec une extension).<\/p>\n<p>Les encodeurs HTML pr\u00e9servent l&rsquo;int\u00e9grit\u00e9 des formats de code, en particulier ceux qui contiennent des caract\u00e8res sp\u00e9ciaux et des tabulations. Les encodeurs peuvent traiter tous les types de code, mais ils traduisent ensuite le code ins\u00e9r\u00e9 en un code pr\u00eat pour le HTML, facile \u00e0 coller dans WordPress.<\/p>\n<p>Il n&rsquo;existe pas d&rsquo;outils d&rsquo;encodage fiables sous forme d&rsquo;extensions, mais beaucoup sont propos\u00e9s sous forme d&rsquo;applications web tierces gratuites. Notez \u00e9galement que les outils d&rsquo;encodage n&rsquo;offrent pas d&rsquo;outils de stylisation, de sorte que vous ne recevrez que le code tel qu&rsquo;il est cens\u00e9 \u00eatre affich\u00e9 (pas de bo\u00eetes fantaisistes ni de fonctions de personnalisation des lignes).<\/p>\n<p>Voici quelques outils d&rsquo;encodage fiables :<\/p>\n<ul>\n<li><a href=\"https:\/\/www.w3docs.com\/tools\/html-encoder\/\" target=\"_blank\" rel=\"noopener noreferrer\">W3Docs HTML Encoder<\/a><\/li>\n<li><a href=\"https:\/\/www.opinionatedgeek.com\/codecs\/htmlencoder\" target=\"_blank\" rel=\"noopener noreferrer\">Opinionated Geek HTML Encoder<\/a><\/li>\n<li><a href=\"https:\/\/www.web2generators.com\/html-based-tools\/online-html-entities-encoder-and-decoder\" target=\"_blank\" rel=\"noopener noreferrer\">Web2Generators HTML encoder and Decoder<\/a><\/li>\n<\/ul>\n<p>D&rsquo;apr\u00e8s nos tests, l&rsquo;outil d&rsquo;encodage le plus efficace est W3Docs HTML Encoder, c&rsquo;est pourquoi nous l&rsquo;utiliserons pour ce tutoriel.<\/p>\n<h4>\u00c9tape 1 : Ouvrez l&rsquo;encodeur et choisissez les r\u00e9glages<\/h4>\n<p>Allez sur le site web de W3Docs HTML Encoder.<\/p>\n<p>La page montre deux champs de case c\u00f4te \u00e0 c\u00f4te. Celui de gauche est l&rsquo;endroit o\u00f9 vous devez coller votre code. Celui de droite affiche la version encod\u00e9e \u00e0 copier et \u00e0 coller dans WordPress.<\/p>\n<p>Cependant, vous devez d&rsquo;abord d\u00e9finir le type de code que vous souhaitez conserver :<\/p>\n<ul>\n<li>Choisissez l&rsquo;<strong>unicode JavaScript<\/strong> si vous collez du code contenant des \u00e9l\u00e9ments JavaScript.<\/li>\n<li>Choisissez les <strong>symboles HTML<\/strong> si vous utilisez du HTML.<\/li>\n<\/ul>\n<figure id=\"attachment_151568\" aria-describedby=\"caption-attachment-151568\" style=\"width: 1155px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151568 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.b4cf25bd90b44faea5a06da55310d33a.jpg\" alt=\"Choisissez les symboles HTML\" width=\"1155\" height=\"718\"><figcaption id=\"caption-attachment-151568\" class=\"wp-caption-text\">Choisissez les symboles HTML<\/figcaption><\/figure>\n<h4>\u00c9tape 2 : Collez et cliquez pour encoder<\/h4>\n<p>Collez le code que vous souhaitez afficher dans WordPress dans le champ de gauche. Puis trouvez et cliquez sur le bouton <strong>Encoder<\/strong> en haut \u00e0 droite.<\/p>\n<figure id=\"attachment_151569\" aria-describedby=\"caption-attachment-151569\" style=\"width: 1147px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151569 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.be543787ffbc49ea966242ac15528658.jpg\" alt=\"Cliquez pour encoder\" width=\"1147\" height=\"621\"><figcaption id=\"caption-attachment-151569\" class=\"wp-caption-text\">Cliquez pour encoder<\/figcaption><\/figure>\n<h4>\u00c9tape 3 : Copiez le r\u00e9sultat d\u00e9cod\u00e9<\/h4>\n<p>Le produit fini peut sembler confus, mais il s&rsquo;agit en fait d&rsquo;une combinaison d&rsquo;\u00e9l\u00e9ments HTML qui pr\u00e9servent chaque aspect du code que vous avez ins\u00e9r\u00e9, sans que le code ne s&rsquo;active et n&rsquo;affiche quelque chose d&rsquo;autre sur le frontend.<\/p>\n<p>Cliquez sur le bouton <strong>Copier<\/strong>.<\/p>\n<figure id=\"attachment_151570\" aria-describedby=\"caption-attachment-151570\" style=\"width: 1156px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151570 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.4a0e251ebf094c2da66953dcbb53bbf2.jpg\" alt=\"Copiez le code\" width=\"1156\" height=\"623\"><figcaption id=\"caption-attachment-151570\" class=\"wp-caption-text\">Copiez le code<\/figcaption><\/figure>\n<h4>\u00c9tape 4 : Coller le code HTML dans l&rsquo;\u00e9diteur de code ou de texte de WordPress<\/h4>\n<p>Retournez sur WordPress et ouvrez l&rsquo;article ou la page souhait\u00e9e.<\/p>\n<p>S\u00e9lectionnez le menu <strong>Options<\/strong> (trois points verticaux) dans le coin sup\u00e9rieur droit. Cliquez sur l&rsquo;option <strong>\u00c9diteur de<\/strong> <strong>code<\/strong>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>N&rsquo;essayez pas d&rsquo;utiliser le bloc HTML personnalis\u00e9 pour ce processus, car il ne semble pas fonctionner.<\/p>\n<\/aside>\n\n<figure id=\"attachment_151571\" aria-describedby=\"caption-attachment-151571\" style=\"width: 1087px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151571 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.4eb099a1c6eb417bb897b6a0eb5a333a.jpg\" alt=\"Allez dans le menu Options\" width=\"1087\" height=\"613\"><figcaption id=\"caption-attachment-151571\" class=\"wp-caption-text\">Allez dans le menu Options<\/figcaption><\/figure>\n<p>Vous verrez maintenant l&rsquo;<strong>\u00e9diteur de<\/strong> <strong>code<\/strong> plut\u00f4t que l&rsquo;\u00e9diteur de bloc visuel. Trouvez la zone o\u00f9 vous souhaitez afficher le code et collez votre code HTML dans l&rsquo;\u00e9diteur.<\/p>\n<figure id=\"attachment_151572\" aria-describedby=\"caption-attachment-151572\" style=\"width: 901px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151572 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.b5990861f47e46a3ab2b929258a7f630.jpg\" alt=\"Collez le code HTML\" width=\"901\" height=\"870\"><figcaption id=\"caption-attachment-151572\" class=\"wp-caption-text\">Collez le code HTML<\/figcaption><\/figure>\n<p>Si vous utilisez l&rsquo;\u00e9diteur WordPress classique, vous devez vous rendre dans l&rsquo;onglet Texte, qui est le m\u00eame que l&rsquo;\u00e9diteur de code depuis l&rsquo;\u00e9diteur de blocs Gutenberg.<\/p>\n<figure id=\"attachment_151573\" aria-describedby=\"caption-attachment-151573\" style=\"width: 967px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151573 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.b8d500e6d84b435a851a50cda8ea61c9.jpg\" alt=\"Onglet Texte\" width=\"967\" height=\"736\"><figcaption id=\"caption-attachment-151573\" class=\"wp-caption-text\">Onglet Texte<\/figcaption><\/figure>\n<h4>\u00c9tape 5 : Publier et voir le code<\/h4>\n<p>Cliquez sur <strong>Mettre \u00e0 jour<\/strong> ou <strong>Publier<\/strong> pour l&rsquo;article, puis naviguez vers l&rsquo;interface publique de cet article pour voir \u00e0 quoi il ressemble.<\/p>\n<p>Vous devriez voir le code original qui a \u00e9t\u00e9 coll\u00e9 dans l&rsquo;encodeur, avant que l&rsquo;outil n&rsquo;ajoute des \u00e9l\u00e9ments d&rsquo;encodage HTML. Comme nous l&rsquo;avons mentionn\u00e9, les encodeurs n&rsquo;offrent aucune fonction de style, c&rsquo;est donc une excellente m\u00e9thode pour obtenir une apparence propre et minimaliste.<\/p>\n<figure id=\"attachment_151574\" aria-describedby=\"caption-attachment-151574\" style=\"width: 1083px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151574 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.321fb9938cf84a1c8308d32fc211b121.jpg\" alt=\"Code publi\u00e9\" width=\"1083\" height=\"808\"><figcaption id=\"caption-attachment-151574\" class=\"wp-caption-text\">Code publi\u00e9<\/figcaption><\/figure>\n<h3>M\u00e9thode 4 : Utilisation d&rsquo;un code court personnalis\u00e9<\/h3>\n<p>La <a href=\"https:\/\/kinsta.com\/fr\/blog\/shortcodes-wordpress\/\">cr\u00e9ation d&rsquo;un code court<\/a> personnalis\u00e9 permet d&rsquo;ins\u00e9rer des morceaux de code r\u00e9utilisables sans que vous ayez \u00e0 les copier et \u00e0 les coller. C&rsquo;est pourquoi les codes courts personnalis\u00e9s offrent une excellente opportunit\u00e9 d&rsquo;afficher du code sur WordPress.<\/p>\n<p>Voici les avantages de l&rsquo;utilisation de codes courts personnalis\u00e9s pour afficher du code :<\/p>\n<ol>\n<li>Les codes courts personnalis\u00e9s vous permettent d&rsquo;enregistrer un code compliqu\u00e9 une fois, puis de le r\u00e9utiliser, ce qui vous \u00e9vite d&rsquo;avoir \u00e0 saisir de longs extraits de code \u00e0 chaque fois.<\/li>\n<li>Vous pouvez \u00e9crire vos propres feuilles de style <a href=\"https:\/\/kinsta.com\/fr\/blog\/meilleurs-pratiques-css\/\">CSS<\/a> pour les surligneurs de code et les bo\u00eetes.<\/li>\n<li>Les codes courts peuvent \u00eatre utilis\u00e9s par n&rsquo;importe qui, de sorte que d&rsquo;autres contributeurs peuvent tirer parti de vos surligneurs et blocs de code en cliquant sur un bouton.<\/li>\n<\/ol>\n<p>La cr\u00e9ation d&rsquo;un code court personnalis\u00e9 n\u00e9cessite une certaine exp\u00e9rience dans l&rsquo;\u00e9dition de <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-ce-qu-un-theme-wordpress\/#whats-inside-those-wordpress-files\">fichiers de th\u00e8mes WordPress<\/a>, le <a href=\"https:\/\/kinsta.com\/fr\/blog\/php-editeurs\/\">travail avec du code PHP<\/a> et \u00e9ventuellement la cr\u00e9ation d&rsquo;extensions WordPress. En raison de ces exigences, la cr\u00e9ation d&rsquo;un code court personnalis\u00e9 pour WordPress peut \u00eatre difficile pour ceux qui ne connaissent pas le PHP.<\/p>\n<p>Cependant, le produit fini permet d&rsquo;afficher plus facilement du code sur WordPress.<\/p>\n<figure id=\"attachment_151575\" aria-describedby=\"caption-attachment-151575\" style=\"width: 1558px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151575 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.2e11bbe71e8244aaa8d5ecc5d61c3bab.jpg\" alt=\"Code court HTML\" width=\"1558\" height=\"842\"><figcaption id=\"caption-attachment-151575\" class=\"wp-caption-text\">Code court HTML<\/figcaption><\/figure>\n<p>Vous pouvez nommer le code court personnalis\u00e9 comme vous le souhaitez et cr\u00e9er plusieurs options, comme <code>[html] [\/html]<\/code> et <code>[css] [\/css]<\/code>, pour diff\u00e9rents langages de code.<\/p>\n<figure id=\"attachment_151576\" aria-describedby=\"caption-attachment-151576\" style=\"width: 1647px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151576 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.85e96f67d4374def86be5d930973f276.jpg\" alt=\"Code court CSS\" width=\"1647\" height=\"714\"><figcaption id=\"caption-attachment-151576\" class=\"wp-caption-text\">Code court CSS<\/figcaption><\/figure>\n<p>Gardez \u00e0 l&rsquo;esprit que les codes courts personnalis\u00e9s fonctionnent mieux pour la coloration syntaxique lorsque vous utilisez l&rsquo;<strong>\u00e9diteur de<\/strong> <strong>texte<\/strong> (dans WordPress Classic) ou la bo\u00eete <strong>HTML<\/strong> <strong>personnalis\u00e9e<\/strong> lorsque vous travaillez avec l&rsquo;\u00e9diteur de blocs WordPress Gutenberg.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Le bloc Code court de Gutenberg est une option, mais lors de nos tests, certains extraits de code ont perdu des \u00e9l\u00e9ments de mise en forme ou des caract\u00e8res cl\u00e9s.<\/p>\n<\/aside>\n\n<figure id=\"attachment_151577\" aria-describedby=\"caption-attachment-151577\" style=\"width: 1063px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151577 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.b5305f76b1754513b54ee4fd2a41e41e.jpg\" alt=\"\u00c9diteur de texte\" width=\"1063\" height=\"534\"><figcaption id=\"caption-attachment-151577\" class=\"wp-caption-text\">\u00c9diteur de texte<\/figcaption><\/figure>\n<p>L&rsquo;objectif est de construire un code court personnalis\u00e9 dans lequel vous pouvez taper ou coller du code entre les balises d&rsquo;ouverture et de fermeture du code court.<\/p>\n<figure id=\"attachment_151578\" aria-describedby=\"caption-attachment-151578\" style=\"width: 1487px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151578 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.557a5f43cf8d4950ac2bc4212f6aa73b.jpg\" alt=\"Code coll\u00e9 \u00e0 l'int\u00e9rieur d'un code court HTML\" width=\"1487\" height=\"834\"><figcaption id=\"caption-attachment-151578\" class=\"wp-caption-text\">Code coll\u00e9 \u00e0 l&rsquo;int\u00e9rieur d&rsquo;un code court HTML<\/figcaption><\/figure>\n<p>Une fois publi\u00e9, les r\u00e9glages de style et de mise en \u00e9vidence de votre code court personnalis\u00e9 s&rsquo;affichent sur l&rsquo;interface publique. Et le code que vous avez ajout\u00e9 s&rsquo;affiche joliment dans le surligneur de syntaxe.<\/p>\n<figure id=\"attachment_151579\" aria-describedby=\"caption-attachment-151579\" style=\"width: 1357px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151579 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.1123bc1ac4c34faab9809ce3826b2cc9.jpg\" alt=\"Vue en frontend\" width=\"1357\" height=\"897\"><figcaption id=\"caption-attachment-151579\" class=\"wp-caption-text\">Vue en frontend<\/figcaption><\/figure>\n<h3>M\u00e9thode 5 : Utilisation des balises <code><code><\/code>&lt;code&gt; and &lt;pre&gt;<\/code><\/h3>\n<p>La m\u00e9thode la plus ancienne &#8211; mais toujours incroyablement fiable &#8211; pour afficher du code sur WordPress consiste simplement \u00e0 ajouter des balises HTML sp\u00e9cifiques autour de l&rsquo;extrait de code. Cette m\u00e9thode est la meilleure lorsque vous travaillez avec l&rsquo;\u00e9diteur WordPress classique, ou avec n&rsquo;importe quel \u00e9diteur HTML.<\/p>\n<p>Il y a deux options :<\/p>\n<ol>\n<li><strong><code>&lt;code&gt;<\/code> balises :<\/strong> Meilleur pour afficher une courte ligne de code ; souvent utilis\u00e9 \u00e0 l&rsquo;int\u00e9rieur des paragraphes<\/li>\n<li><strong><code>&lt;pre&gt;<\/code> balises :<\/strong> Id\u00e9ales pour les blocs de code plus longs, ou lorsque vous souhaitez disposer de plus d&rsquo;options de mise en forme<\/li>\n<\/ol>\n<h4>Option 1 : Utilisez les balises <code>&lt;code&gt;<\/code> pour les extraits de code en ligne<\/h4>\n<p>Les cr\u00e9ateurs de contenu qui \u00e9crivent sur le codage ne veulent pas toujours utiliser de grands blocs de code. Il est parfois plus judicieux d&rsquo;inclure un petit bout de code dans un paragraphe.<\/p>\n<p>Cependant, vous devez toujours mettre en \u00e9vidence et pr\u00e9server la mise en forme de ce code. De plus, certains codes peuvent causer des probl\u00e8mes avec le contenu environnant s&rsquo;ils ne sont pas pr\u00e9serv\u00e9s correctement.<\/p>\n<figure id=\"attachment_151580\" aria-describedby=\"caption-attachment-151580\" style=\"width: 908px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151580 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.103e5a059b524aa0aa00957a007800de.jpg\" alt=\"Une balise de saut de ligne\" width=\"908\" height=\"371\"><figcaption id=\"caption-attachment-151580\" class=\"wp-caption-text\">Une balise de saut de ligne<\/figcaption><\/figure>\n<p>Prenons l&rsquo;exemple de la balise <code>&lt;br&gt;<\/code>. Sans les balises <code>&lt;code&gt;<\/code>, elle ajouterait simplement un saut de ligne \u00e0 votre paragraphe.<\/p>\n<figure id=\"attachment_151581\" aria-describedby=\"caption-attachment-151581\" style=\"width: 1020px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151581 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.a191cc69e4594c76acf394a546c9a1ed.jpg\" alt=\"Un saut de ligne non d\u00e9sir\u00e9\" width=\"1020\" height=\"390\"><figcaption id=\"caption-attachment-151581\" class=\"wp-caption-text\">Un saut de ligne non d\u00e9sir\u00e9<\/figcaption><\/figure>\n<p>En pla\u00e7ant le codage \u00e0 l&rsquo;int\u00e9rieur de ces balises, vous obtiendrez un r\u00e9sultat beaucoup plus propre :<\/p>\n<pre><code class=\"language-html\"><code>&lt;code&gt; &lt;\/code&gt;<\/code><\/code><\/pre>\n<p>Pour cela, ouvrez un article WordPress, et activez soit l&rsquo;<strong>\u00e9diteur de<\/strong> <strong>code<\/strong> (pour l&rsquo;\u00e9diteur de blocs Gutenberg), soit l&rsquo;<strong>\u00e9diteur de<\/strong> <strong>texte<\/strong> (lorsque vous utilisez WordPress Classic).<\/p>\n<p>Collez ou saisissez ces balises quelque part dans l&rsquo;\u00e9diteur ; n&rsquo;ins\u00e9rez pas encore le code que vous souhaitez afficher. Au lieu de cela, ajoutez un espace entre les balises.<\/p>\n<p><code class=\"language-html\"><code>&lt;code&gt; &lt;\/code&gt;<\/code><\/code><\/p>\n<figure id=\"attachment_151582\" aria-describedby=\"caption-attachment-151582\" style=\"width: 1111px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151582 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.e37032a750ae40dbb0bae105f49375bc.jpg\" alt=\"Espace entre les balises de code\" width=\"1111\" height=\"313\"><figcaption id=\"caption-attachment-151582\" class=\"wp-caption-text\">Espace entre les balises de code<\/figcaption><\/figure>\n<p>Basculez dans l&rsquo;<strong>\u00e9diteur<\/strong> <strong>visuel<\/strong> (que vous soyez dans Gutenberg ou dans WordPress classique).<\/p>\n<p>Vous verrez un petit espace gris \u00e0 l&rsquo;int\u00e9rieur du contenu visuel. Cliquez pour placer votre curseur dans cet espace gris. C&rsquo;est l\u00e0 que vous pouvez coller ou saisir le code \u00e0 afficher.<\/p>\n<figure id=\"attachment_151583\" aria-describedby=\"caption-attachment-151583\" style=\"width: 988px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151583 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.749a378741b34258a4a3c94dcd4e5455.jpg\" alt=\"Espace gris pour \u00e9crire le code\" width=\"988\" height=\"280\"><figcaption id=\"caption-attachment-151583\" class=\"wp-caption-text\">Espace gris pour \u00e9crire le code<\/figcaption><\/figure>\n<p>Au fur et \u00e0 mesure que vous tapez, l&rsquo;espace gris s&rsquo;agrandit pour accueillir l&rsquo;extrait de code. Cliquez sur le bouton <strong>Publier<\/strong> ou <strong>Mettre \u00e0 jour<\/strong> pour ce message.<\/p>\n<figure id=\"attachment_151584\" aria-describedby=\"caption-attachment-151584\" style=\"width: 1019px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151584 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.132a0f507095471dbc4bf516bba70787.jpg\" alt=\"Saisir du code dans l'espace gris\" width=\"1019\" height=\"367\"><figcaption id=\"caption-attachment-151584\" class=\"wp-caption-text\">Saisir du code dans l&rsquo;espace gris<\/figcaption><\/figure>\n<p>Sur la page d&rsquo;accueil de l&rsquo;article, vous verrez maintenant le code pr\u00e9serv\u00e9 comme il se doit et sans activit\u00e9 \u00e9trange (comme l&rsquo;ajout d&rsquo;une coupure \u00e0 votre contenu).<\/p>\n<figure id=\"attachment_151585\" aria-describedby=\"caption-attachment-151585\" style=\"width: 1163px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151585 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.3034b84bc11f4511b65cb87a74b4e92d.jpg\" alt=\"La balise break affich\u00e9e sans ajouter de break\" width=\"1163\" height=\"449\"><figcaption id=\"caption-attachment-151585\" class=\"wp-caption-text\">La balise break affich\u00e9e sans ajouter de break<\/figcaption><\/figure>\n<p>Le formatage de ces balises <code>&lt;code&gt;<\/code> est g\u00e9n\u00e9ralement tr\u00e8s simple, mais il d\u00e9pend souvent du style de votre th\u00e8me. Par exemple, notre exemple ne modifie que la police de caract\u00e8res, mais n&rsquo;inclut pas de fond gris.<\/p>\n<h4>Option 2 : Utilisez les balises <code>&lt;pre&gt;<\/code> pour les blocs de code plus longs<\/h4>\n<p>Les extraits de code plus longs m\u00e9ritent leurs propres blocs, s\u00e9par\u00e9s du contenu que vous \u00e9crivez dans les paragraphes. Pour ces blocs, nous vous recommandons d&rsquo;utiliser les balises <code>&lt;pre&gt;<\/code>.<\/p>\n<p>Le processus d&rsquo;ajout d&rsquo;une balise <code>&lt;pre&gt;<\/code> est identique \u00e0 celui des balises <code>&lt;code&gt;<\/code>, mais vous disposez de plus d&rsquo;espace pour ins\u00e9rer votre code.<\/p>\n<p>Allez dans un article et ouvrez l&rsquo;\u00e9diteur de <strong>code<\/strong> (Gutenberg) ou de <strong>texte<\/strong> (WordPress classique). Collez ou tapez le code que vous souhaitez afficher. Entourez ensuite le code de ces balises :<\/p>\n<p><code>&lt;pre&gt; &lt;\/pre&gt;<\/code><\/p>\n<figure id=\"attachment_151586\" aria-describedby=\"caption-attachment-151586\" style=\"width: 1099px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151586 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.d24206ad63c045479f1ad67aa2e5ae5d.jpg\" alt=\"Balises pre\" width=\"1099\" height=\"596\"><figcaption id=\"caption-attachment-151586\" class=\"wp-caption-text\">Balises pre<\/figcaption><\/figure>\n<p>Passez \u00e0 l&rsquo;\u00e9diteur <strong>visuel<\/strong> pour voir ce que cela donne. Vous remarquerez que la section de texte porte un libell\u00e9<strong> \u00ab Preformatted \u00bb<\/strong>, ce qui est pr\u00e9cis\u00e9ment l&rsquo;objectif de la balise <code>&lt;pre&gt;<\/code>.<\/p>\n<figure id=\"attachment_151587\" aria-describedby=\"caption-attachment-151587\" style=\"width: 1021px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151587 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.4bc9f2cabf7b45aeba2da63e5bd1f96f.jpg\" alt=\"Choisissez l'option pr\u00e9format\u00e9e\" width=\"1021\" height=\"450\"><figcaption id=\"caption-attachment-151587\" class=\"wp-caption-text\">Choisissez l&rsquo;option pr\u00e9format\u00e9e<\/figcaption><\/figure>\n<p>Cliquez sur <strong>Publier<\/strong> ou <strong>Mettre \u00e0 jour<\/strong>, puis passez \u00e0 l&rsquo;interface publique pour voir votre code dans sa forme originale. Tout comme les balises <code>&lt;code&gt;<\/code>, les balises <code>&lt;pre&gt;<\/code> sont peu format\u00e9es, ce qui vous permet d&rsquo;obtenir l&rsquo;apparence la plus simple possible. Cependant, il existe des moyens de les styliser vous-m\u00eame.<\/p>\n<figure id=\"attachment_151588\" aria-describedby=\"caption-attachment-151588\" style=\"width: 1177px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151588 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.12b9304ed5de42298a6474f01813d716.jpg\" alt=\"R\u00e9sultats sur l'interface publique\" width=\"1177\" height=\"759\"><figcaption id=\"caption-attachment-151588\" class=\"wp-caption-text\">R\u00e9sultats sur l&rsquo;interface publique<\/figcaption><\/figure>\n<h5>Conseils pour styliser les balises &lt;pre&gt;<\/h5>\n<p>Les balises <code>&lt;pre&gt;<\/code> sont moins stables que les balises <code>&lt;code&gt;<\/code>, vous pouvez donc rencontrer des difficult\u00e9s en fonction du type de code que vous essayez d&rsquo;afficher.<\/p>\n<p>Utilisez ces conseils pour am\u00e9liorer l&rsquo;apparence de votre site :<\/p>\n<ul>\n<li>Faites de votre mieux pour supprimer ou \u00e9viter compl\u00e8tement les sauts de ligne, car la balise <code>&lt;pre&gt;<\/code> ne les reconna\u00eet souvent pas. En g\u00e9n\u00e9ral, elle r\u00e9agit mal \u00e0 un trop grand nombre de retours \u00e0 la ligne.<\/li>\n<li>Envisagez d&rsquo;ajouter une propri\u00e9t\u00e9 <code>overflow-x:auto;<\/code> dans votre CSS pour ajouter une fonctionnalit\u00e9 de d\u00e9filement au code de la balise <code>&lt;pre&gt;<\/code>. Cela est utile en cas de contenu trop volumineux, car la balise <code>&lt;pre&gt;<\/code> laisse votre code s&rsquo;\u00e9couler hors de la page.<\/li>\n<li>Utilisez des polices monospaces.<\/li>\n<\/ul>\n<p>Vous pouvez \u00e9galement styliser le formatage du texte et la bo\u00eete derri\u00e8re le code. Voici un mod\u00e8le de d\u00e9part que vous pouvez <a href=\"https:\/\/kinsta.com\/fr\/blog\/modifier-code-wordpress\/\">ajouter \u00e0 votre fichier CSS<\/a>:<\/p>\n<pre><code class=\"language-css\">article pre{\nbackground:#ffffff;\nborder:3px #eee solid;\nborder-top:30px #eee solid;\nfont-family:Consolas, courier;\nfont-size:0.8em;\nwhite-space:pre;\noverflow-x:auto;\n}<\/code><\/pre>\n<h3>M\u00e9thode 6 : Utiliser un \u00e9diteur Markdown connect\u00e9 \u00e0 WordPress<\/h3>\n<p>Les \u00e9diteurs Markdown permettent non seulement de saisir et de formater plus rapidement, mais beaucoup d&rsquo;entre eux se connectent directement \u00e0 WordPress pour une publication instantan\u00e9e directement \u00e0 partir de l&rsquo;\u00e9diteur.<\/p>\n<p>De nombreux r\u00e9dacteurs se tournent vers les \u00e9diteurs Markdown en raison de la rapidit\u00e9 du processus de cr\u00e9ation de contenu. Heureusement, certains de ces \u00e9diteurs proposent des blocs de code markdown, ce qui signifie que vous pouvez afficher du code dans l&rsquo;\u00e9diteur markdown, puis l&rsquo;envoyer directement \u00e0 WordPress pour publication.<\/p>\n<p>Gardez \u00e0 l&rsquo;esprit que les <a href=\"https:\/\/kinsta.com\/fr\/blog\/meilleurs-editeurs-de-texte\/\">\u00e9diteurs de texte normaux<\/a> (comme <a href=\"https:\/\/kinsta.com\/fr\/blog\/comment-utiliser-sublime-text\/\">Sublime Text<\/a>) ne pr\u00e9servent pas l&rsquo;int\u00e9grit\u00e9 du code lorsqu&rsquo;il est transf\u00e9r\u00e9 pour publication sur WordPress. Les <a href=\"https:\/\/kinsta.com\/fr\/blog\/editeurs-html-gratuits\/\">\u00e9diteurs HTML<\/a>, bien qu&rsquo;excellents pour \u00e9crire et stocker du code, n&rsquo;offrent pas non plus les fonctions de mise en \u00e9vidence n\u00e9cessaires pour pr\u00e9server le code en vue de sa publication sur WordPress.<\/p>\n<p>Il existe un <a href=\"https:\/\/kinsta.com\/fr\/blog\/editeurs-markdown\/\">grand nombre d&rsquo;\u00e9diteurs markdown<\/a>, mais les solutions id\u00e9ales partagent deux caract\u00e9ristiques :<\/p>\n<ol>\n<li>L&rsquo;exportation directe vers WordPress<\/li>\n<li>Markdown pour la mise en \u00e9vidence du code<\/li>\n<\/ol>\n<p>Vous pouvez toutefois opter pour un \u00e9diteur markdown avec exportation HTML, si vous n&rsquo;aimez pas les exportations directes vers WordPress.<\/p>\n<p>Les meilleurs \u00e9diteurs markdown disposant de ces deux fonctionnalit\u00e9s sont les suivants :<\/p>\n<ul>\n<li><a href=\"https:\/\/ulysses.app\/\" target=\"_blank\" rel=\"noopener noreferrer\">Ulysses<\/a> (Mac et iOS)<\/li>\n<li><a href=\"https:\/\/bywordapp.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">ByWord<\/a> (Mac et iOS)<\/li>\n<li><a href=\"https:\/\/obsidian.md\/\" target=\"_blank\" rel=\"noopener noreferrer\">Obsidian<\/a> (Mac, Windows, Linux, et plus)<\/li>\n<\/ul>\n<p>Ulysses et ByWord sont des applications premium, tandis qu&rsquo;Obsidian propose des versions gratuites et premium.<\/p>\n<p>Pour le tutoriel suivant, nous utiliserons Ulysses.<\/p>\n<h4>\u00c9tape 1 : Ajouter un bloc de code longform dans Ulysses<\/h4>\n<p>Lorsque vous r\u00e9digez un document dans Ulysses, saisissez <code>\"<\/code> markdown &#8211; c&rsquo;est-\u00e0-dire deux apostrophes &#8211; chaque fois que vous souhaitez ajouter imm\u00e9diatement un bloc de surlignage de code \u00e0 l&rsquo;int\u00e9rieur d&rsquo;un document.<\/p>\n<p>Cette m\u00e9thode de d\u00e9marquage est destin\u00e9e \u00e0 des blocs de code plus longs. Elle n&rsquo;est pas utilisable au milieu d&rsquo;un paragraphe, vous devez donc cr\u00e9er une nouvelle ligne pour que le markdown s&rsquo;active.<\/p>\n<figure id=\"attachment_151589\" aria-describedby=\"caption-attachment-151589\" style=\"width: 2000px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151589 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Gif-for-code-block.14390a79e7064955b03f88869ec1ffee.gif\" alt=\"D\u00e9marqueurs de code Ulysse\" width=\"2000\" height=\"1126\"><figcaption id=\"caption-attachment-151589\" class=\"wp-caption-text\">D\u00e9marqueurs de code Ulysse<\/figcaption><\/figure>\n<p>Une fois que le surligneur de code appara\u00eet, vous pouvez saisir ou coller ce que vous voulez dedans.<\/p>\n<figure id=\"attachment_151590\" aria-describedby=\"caption-attachment-151590\" style=\"width: 1015px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151590 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.b5f94d159066484fb7b70b16a1c3c73a.jpg\" alt=\"Coller du code dans le surligneur Ulysses\" width=\"1015\" height=\"543\"><figcaption id=\"caption-attachment-151590\" class=\"wp-caption-text\">Coller du code dans le surligneur Ulysses<\/figcaption><\/figure>\n<p>Une autre fa\u00e7on d&rsquo;activer le bloc de code est de cliquer sur l&rsquo;\u00e9l\u00e9ment de menu <strong>Markdown<\/strong> (trois points horizontaux), puis de s\u00e9lectionner l&rsquo;option <strong>Code<\/strong>.<\/p>\n<figure id=\"attachment_151592\" aria-describedby=\"caption-attachment-151592\" style=\"width: 937px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151592 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.81ab2e958f054c0798abc43d606aca57.jpg\" alt=\"Utilisez le menu Markdown pour s\u00e9lectionner l'option Code\" width=\"937\" height=\"398\"><figcaption id=\"caption-attachment-151592\" class=\"wp-caption-text\">Utilisez le menu Markdown pour s\u00e9lectionner l&rsquo;option Code<\/figcaption><\/figure>\n<p>Apr\u00e8s avoir cliqu\u00e9 sur cet \u00e9l\u00e9ment de menu, le champ de surlignage du code appara\u00eet \u00e0 l&rsquo;endroit o\u00f9 se trouvait le curseur en dernier lieu.<\/p>\n<figure id=\"attachment_151593\" aria-describedby=\"caption-attachment-151593\" style=\"width: 977px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151593 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.41e360b297fd4c60be68ccb8bcf0cccf.jpg\" alt=\"Surligneur de code vide\" width=\"977\" height=\"285\"><figcaption id=\"caption-attachment-151593\" class=\"wp-caption-text\">Surligneur de code vide<\/figcaption><\/figure>\n<p>Pour placer des extraits de code \u00e0 l&rsquo;int\u00e9rieur de paragraphes, vous devez vous tourner vers la d\u00e9marque <code>``<\/code> (qui ressemble presque \u00e0 la m\u00eame chose, mais il s&rsquo;agit en fait de deux accents aigus\/graves au lieu d&rsquo;apostrophes).<\/p>\n<h4>\u00c9tape 3 : Exporter vers WordPress<\/h4>\n<p>Une fois votre document pr\u00eat, il est temps d&rsquo;exporter le tout vers WordPress.<\/p>\n<p>L&rsquo;avantage des \u00e9diteurs markdown qui se connectent \u00e0 WordPress est qu&rsquo;ils conservent les blocs de code tout au long du transfert. Ainsi, vous verrez des surligneurs de code joliment format\u00e9s, pr\u00eats \u00e0 \u00eatre publi\u00e9s dans WordPress.<\/p>\n<figure id=\"attachment_151594\" aria-describedby=\"caption-attachment-151594\" style=\"width: 996px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151594 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.59962c045f204e8990253665628656d0.jpg\" alt=\"Le surligneur de code reste le m\u00eame dans WordPress\" width=\"996\" height=\"723\"><figcaption id=\"caption-attachment-151594\" class=\"wp-caption-text\">Le surligneur de code reste le m\u00eame dans WordPress<\/figcaption><\/figure>\n<p>Dans Ulysse, allez en haut du document pour trouver la barre d&rsquo;outils. Cliquez sur le bouton <strong>Aper\u00e7u de la<\/strong> <strong>publication<\/strong>.<\/p>\n<figure id=\"attachment_151595\" aria-describedby=\"caption-attachment-151595\" style=\"width: 981px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151595 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.927b4b9ed6d54119baebba453248cf41.jpg\" alt=\"S\u00e9lectionnez le bouton Aper\u00e7u de la publication\" width=\"981\" height=\"618\"><figcaption id=\"caption-attachment-151595\" class=\"wp-caption-text\">S\u00e9lectionnez le bouton Aper\u00e7u de la publication<\/figcaption><\/figure>\n<p>Un menu d\u00e9roulant s&rsquo;affiche pour vous permettre de s\u00e9lectionner la plateforme et le site web sur lesquels vous souhaitez publier. Vous pouvez \u00e9galement utiliser l&rsquo;option <strong>G\u00e9rer les<\/strong> <strong>comptes<\/strong> de ce menu pour vous connecter \u00e0 un site web WordPress avant l&rsquo;exportation.<\/p>\n<p>Une fois que vous avez choisi le bon site web, cliquez sur le bouton <strong>Publier<\/strong>.<\/p>\n<figure id=\"attachment_151596\" aria-describedby=\"caption-attachment-151596\" style=\"width: 948px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151596 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.e00fbece9dc94fea8e8a5e63d1336717.jpg\" alt=\"Choisissez un compte et publiez\" width=\"948\" height=\"704\"><figcaption id=\"caption-attachment-151596\" class=\"wp-caption-text\">Choisissez un compte et publiez<\/figcaption><\/figure>\n<p>Renseignez le titre de l&rsquo;article, l&rsquo;horaire et toutes les autres informations que vous souhaitez, telles que les cat\u00e9gories, les balises et les images mises en avant.<\/p>\n<p>La partie la plus importante, cependant, est de d\u00e9finir l&rsquo;<strong>\u00e9tat<\/strong> sur <strong>Brouillon<\/strong> afin de ne pas publier l&rsquo;article sans l&rsquo;avoir d&rsquo;abord r\u00e9vis\u00e9 sur WordPress.<\/p>\n<p>Cliquez sur <strong>OK<\/strong> pour continuer.<\/p>\n<figure id=\"attachment_151597\" aria-describedby=\"caption-attachment-151597\" style=\"width: 915px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151597 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.b14f638aa5d94d789d323bfc861dafca.jpg\" alt=\"Choisissez un \u00e9tat, puis cliquez sur OK\" width=\"915\" height=\"649\"><figcaption id=\"caption-attachment-151597\" class=\"wp-caption-text\">Choisissez un \u00e9tat, puis cliquez sur OK<\/figcaption><\/figure>\n<p>En quelques secondes, Ulysse place l&rsquo;ensemble du document dans un nouvel article WordPress (il se peut que vous deviez vous connecter \u00e0 votre <a href=\"https:\/\/kinsta.com\/fr\/blog\/tableau-de-bord-admin-wordpress\/\">administrateur WordPress<\/a> lorsque le message appara\u00eet).<\/p>\n<p>Vous verrez les blocs de code d\u00e9j\u00e0 configur\u00e9s et pr\u00eats \u00e0 \u00eatre publi\u00e9s. Cliquez sur le bouton <strong>Publier<\/strong> pour le mettre en ligne.<\/p>\n<figure id=\"attachment_151598\" aria-describedby=\"caption-attachment-151598\" style=\"width: 1202px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151598 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.9b10519d98304e4b83dfefbefe2955fe.jpg\" alt=\"Blocs de code dans l'\u00e9diteur WordPress\" width=\"1202\" height=\"788\"><figcaption id=\"caption-attachment-151598\" class=\"wp-caption-text\">Blocs de code dans l&rsquo;\u00e9diteur WordPress<\/figcaption><\/figure>\n<p>Sur l&rsquo;interface publique, vous verrez que les extraits de code en ligne et les blocs de code plus grands sont joliment mis en \u00e9vidence, et que le formatage de ce code a \u00e9t\u00e9 pr\u00e9serv\u00e9.<\/p>\n<figure id=\"attachment_151599\" aria-describedby=\"caption-attachment-151599\" style=\"width: 916px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151599 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.7fe2b1887f1644d7a819d9a68d18481b.jpg\" alt=\"R\u00e9sultats sur l'interface publique\" width=\"916\" height=\"881\"><figcaption id=\"caption-attachment-151599\" class=\"wp-caption-text\">R\u00e9sultats sur l&rsquo;interface publique<\/figcaption><\/figure>\n\n<h2>R\u00e9sum\u00e9<\/h2>\n<p>Il existe plusieurs m\u00e9thodes pour afficher correctement du code sur WordPress, et cela d\u00e9pend souvent de l&rsquo;\u00e9diteur WordPress utilis\u00e9, du langage de code que vous souhaitez afficher, et de la fa\u00e7on dont vous souhaitez afficher et formater ce code. Par exemple, opter pour une extension offrira certainement une exp\u00e9rience de formatage plus cr\u00e9ative que le bloc Code standard dans l&rsquo;\u00e9diteur WordPress Gutenberg.<\/p>\n<p>Dans cet article, nous avons couvert de nombreuses m\u00e9thodes diff\u00e9rentes illustrant comment afficher du code dans WordPress.<\/p>\n<p>Nous recommandons g\u00e9n\u00e9ralement de commencer par la m\u00e9thode 1 et de progresser. La m\u00e9thode 2 vous est utile si vous recherchez plus d&rsquo;options de style, et les m\u00e9thodes 3 \u00e0 5 ne sont utiles que dans des situations particuli\u00e8res. La m\u00e9thode 6 est en quelque sorte une solution bonus, destin\u00e9e \u00e0 ceux qui pr\u00e9f\u00e8rent les \u00e9diteurs markdown plut\u00f4t que d&rsquo;\u00e9crire directement dans WordPress.<\/p>\n<p>Quelle que soit la m\u00e9thode choisie, un <a href=\"https:\/\/kinsta.com\/fr\/hebergement-wordpress\/\">h\u00e9bergeur fiable<\/a> peut vous aider \u00e0 peaufiner votre site. Les solutions d&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/hebergement-wordpress\/\">h\u00e9bergement WordPress<\/a> de Kinsta offrent des <a href=\"https:\/\/kinsta.com\/fr\/tarifs\/\">plans pour des sites<\/a> de toutes formes et tailles, et la plateforme facile \u00e0 utiliser &#8211; <a href=\"https:\/\/kinsta.com\/fr\/mykinsta\/\">MyKinsta<\/a>, un tableau de bord d&rsquo;administration propri\u00e9taire &#8211; rend l&rsquo;\u00e9dition de n&rsquo;importe quelle partie de votre site et de ses fichiers un jeu d&rsquo;enfant. De plus, vous b\u00e9n\u00e9ficiez de la <a href=\"https:\/\/kinsta.com\/fr\/blog\/plateforme-cloud-pour-developpeurs\/\">vitesse<\/a>, de la <a href=\"https:\/\/kinsta.com\/fr\/integration-cloudflare\/\">s\u00e9curit\u00e9<\/a> et du <a href=\"https:\/\/kinsta.com\/fr\/support-kinsta\/\">supoort<\/a> de classe mondiale de Kinsta.<\/p>\n<p>Avez-vous d\u00e9j\u00e0 essay\u00e9 d&rsquo;afficher du code dans WordPress ? Si oui, quelle m\u00e9thode a le mieux fonctionn\u00e9 pour vous ? Faites-nous part de vos commentaires dans la section ci-dessous.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Apprendre \u00e0 afficher du code dans WordPress est essentiel pour les blogueurs et les cr\u00e9ateurs de contenu qui publient r\u00e9guli\u00e8rement du code en ligne \u00e0 l&rsquo;intention &#8230;<\/p>\n","protected":false},"author":199,"featured_media":69217,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1039,1028],"class_list":["post-69216","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-conseils-wordpress","topic-developpement-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Comment afficher du code dans WordPress (et le rendre joli) - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Apprenez \u00e0 utiliser WordPress pour afficher du code, avec des extensions, des codes courts et m\u00eame des outils d&#039;encodage. Nous explorerons \u00e9galement l&#039;utilisation du logiciel markdown.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/fr\/blog\/afficher-code-dans-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Comment afficher du code dans WordPress (et le rendre joli)\" \/>\n<meta property=\"og:description\" content=\"Apprenez \u00e0 utiliser WordPress pour afficher du code, avec des extensions, des codes courts et m\u00eame des outils d&#039;encodage. Nous explorerons \u00e9galement l&#039;utilisation du logiciel markdown.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/fr\/blog\/afficher-code-dans-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstafrance\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-17T13:21:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-23T11:13:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/wordpress-display-code.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jeremy Holcombe\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Apprenez \u00e0 utiliser WordPress pour afficher du code, avec des extensions, des codes courts et m\u00eame des outils d&#039;encodage. Nous explorerons \u00e9galement l&#039;utilisation du logiciel markdown.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/wordpress-display-code.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jeremy Holcombe\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"41 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/afficher-code-dans-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/afficher-code-dans-wordpress\/\"},\"author\":{\"name\":\"Jeremy Holcombe\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\"},\"headline\":\"Comment afficher du code dans WordPress (et le rendre joli)\",\"datePublished\":\"2023-05-17T13:21:54+00:00\",\"dateModified\":\"2023-08-23T11:13:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/afficher-code-dans-wordpress\/\"},\"wordCount\":6530,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/afficher-code-dans-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/wordpress-display-code.jpg\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/afficher-code-dans-wordpress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/afficher-code-dans-wordpress\/\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/afficher-code-dans-wordpress\/\",\"name\":\"Comment afficher du code dans WordPress (et le rendre joli) - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/afficher-code-dans-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/afficher-code-dans-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/wordpress-display-code.jpg\",\"datePublished\":\"2023-05-17T13:21:54+00:00\",\"dateModified\":\"2023-08-23T11:13:23+00:00\",\"description\":\"Apprenez \u00e0 utiliser WordPress pour afficher du code, avec des extensions, des codes courts et m\u00eame des outils d'encodage. Nous explorerons \u00e9galement l'utilisation du logiciel markdown.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/afficher-code-dans-wordpress\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/afficher-code-dans-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/afficher-code-dans-wordpress\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/wordpress-display-code.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/wordpress-display-code.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/afficher-code-dans-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Conseils WordPress\",\"item\":\"https:\/\/kinsta.com\/fr\/sujets\/conseils-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Comment afficher du code dans WordPress (et le rendre joli)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/fr\/#website\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstafrance\/\",\"https:\/\/x.com\/kinsta_fr\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\",\"name\":\"Jeremy Holcombe\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g\",\"caption\":\"Jeremy Holcombe\"},\"description\":\"Senior Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/jeremyholcombe\/\"],\"url\":\"https:\/\/kinsta.com\/fr\/blog\/author\/jeremyholcombe\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Comment afficher du code dans WordPress (et le rendre joli) - Kinsta\u00ae","description":"Apprenez \u00e0 utiliser WordPress pour afficher du code, avec des extensions, des codes courts et m\u00eame des outils d'encodage. Nous explorerons \u00e9galement l'utilisation du logiciel markdown.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/fr\/blog\/afficher-code-dans-wordpress\/","og_locale":"fr_FR","og_type":"article","og_title":"Comment afficher du code dans WordPress (et le rendre joli)","og_description":"Apprenez \u00e0 utiliser WordPress pour afficher du code, avec des extensions, des codes courts et m\u00eame des outils d'encodage. Nous explorerons \u00e9galement l'utilisation du logiciel markdown.","og_url":"https:\/\/kinsta.com\/fr\/blog\/afficher-code-dans-wordpress\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2023-05-17T13:21:54+00:00","article_modified_time":"2023-08-23T11:13:23+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/wordpress-display-code.jpg","type":"image\/jpeg"}],"author":"Jeremy Holcombe","twitter_card":"summary_large_image","twitter_description":"Apprenez \u00e0 utiliser WordPress pour afficher du code, avec des extensions, des codes courts et m\u00eame des outils d'encodage. Nous explorerons \u00e9galement l'utilisation du logiciel markdown.","twitter_image":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/wordpress-display-code.jpg","twitter_creator":"@kinsta_fr","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Jeremy Holcombe","Dur\u00e9e de lecture estim\u00e9e":"41 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/fr\/blog\/afficher-code-dans-wordpress\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/blog\/afficher-code-dans-wordpress\/"},"author":{"name":"Jeremy Holcombe","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21"},"headline":"Comment afficher du code dans WordPress (et le rendre joli)","datePublished":"2023-05-17T13:21:54+00:00","dateModified":"2023-08-23T11:13:23+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/afficher-code-dans-wordpress\/"},"wordCount":6530,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/afficher-code-dans-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/wordpress-display-code.jpg","inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/fr\/blog\/afficher-code-dans-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/fr\/blog\/afficher-code-dans-wordpress\/","url":"https:\/\/kinsta.com\/fr\/blog\/afficher-code-dans-wordpress\/","name":"Comment afficher du code dans WordPress (et le rendre joli) - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/afficher-code-dans-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/afficher-code-dans-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/wordpress-display-code.jpg","datePublished":"2023-05-17T13:21:54+00:00","dateModified":"2023-08-23T11:13:23+00:00","description":"Apprenez \u00e0 utiliser WordPress pour afficher du code, avec des extensions, des codes courts et m\u00eame des outils d'encodage. Nous explorerons \u00e9galement l'utilisation du logiciel markdown.","breadcrumb":{"@id":"https:\/\/kinsta.com\/fr\/blog\/afficher-code-dans-wordpress\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/fr\/blog\/afficher-code-dans-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/blog\/afficher-code-dans-wordpress\/#primaryimage","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/wordpress-display-code.jpg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/05\/wordpress-display-code.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/fr\/blog\/afficher-code-dans-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Conseils WordPress","item":"https:\/\/kinsta.com\/fr\/sujets\/conseils-wordpress\/"},{"@type":"ListItem","position":3,"name":"Comment afficher du code dans WordPress (et le rendre joli)"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/fr\/#website","url":"https:\/\/kinsta.com\/fr\/","name":"Kinsta\u00ae","description":"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es","publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/fr\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstafrance\/","https:\/\/x.com\/kinsta_fr","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21","name":"Jeremy Holcombe","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g","caption":"Jeremy Holcombe"},"description":"Senior Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems.","sameAs":["https:\/\/www.linkedin.com\/in\/jeremyholcombe\/"],"url":"https:\/\/kinsta.com\/fr\/blog\/author\/jeremyholcombe\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/69216","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/users\/199"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/comments?post=69216"}],"version-history":[{"count":8,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/69216\/revisions"}],"predecessor-version":[{"id":72229,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/69216\/revisions\/72229"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69216\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69216\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69216\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69216\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69216\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69216\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69216\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69216\/translations\/es"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69216\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69216\/translations\/dk"},{"href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/69216\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media\/69217"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media?parent=69216"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/tags?post=69216"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/topic?post=69216"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}