{"id":845,"date":"2007-04-21T16:07:55","date_gmt":"2007-04-21T15:07:55","guid":{"rendered":"http:\/\/www.roumazeilles.net\/news\/fr\/wordpress\/2007\/04\/21\/afficher-du-code-dans-wordpress\/"},"modified":"2007-04-21T16:08:07","modified_gmt":"2007-04-21T15:08:07","slug":"afficher-du-code-dans-wordpress","status":"publish","type":"post","link":"https:\/\/www.roumazeilles.net\/news\/fr\/wordpress\/2007\/04\/21\/afficher-du-code-dans-wordpress\/","title":{"rendered":"Afficher du code dans WordPress"},"content":{"rendered":"<p><img decoding=\"async\" src=\"\/images\/2007\/wordpress21.gif\" alt=\"WordPress v2.1\" align=\"left\"\/>Quand, comme moi, on souhaite inclure des morceaux de code dans un article WordPress, cela devient vite une s\u00e9rieuse gal\u00e8re. En fait WP n&rsquo;a pas vraiment pr\u00e9vu ce cas et il se pose une quantit\u00e9 de probl\u00e8mes plus ou moins graves. Ceux que j&rsquo;ai rencontr\u00e9s jusqu&rsquo;ici :<\/p>\n<ul>\n<li>Les &lt;?php disparaissent (sauf acrobaties manuelles)<\/li>\n<li>Un certain nombre de caract\u00e8res ne s&rsquo;affichent pas (ou mal)<\/li>\n<li>La pr\u00e9sentation est assez pitoyable quand on utilise que &lt;code&gt;<\/li>\n<\/ul>\n<p>J&rsquo;ai donc recherch\u00e9 un plug-in (presque tout dans WordPress se fait par l&rsquo;ajout de ces merveilleux petits bouts de logiciel qui peuvent se rajouter facilement \u00e0 la configuration de base) qui soit adapt\u00e9 \u00e0 cette t\u00e2che, facile \u00e0 installer (et je ne tiens pas \u00e0 faire une maintenance intensive pour cette fonctionnalit\u00e9), facile \u00e0 utiliser.<\/p>\n<p>Voici donc un r\u00e9sum\u00e9 de ceux que j&rsquo;ai regard\u00e9 et de mon opinion les concernant.<br \/>\n<!--more--><\/p>\n<h3><a href=\"http:\/\/www.thunderguy.com\/semicolon\/wordpress\/code-markup-wordpress-plugin\/\">Code markup<\/a> v1.1.1<\/h3>\n<h4>Syntaxe<\/h4>\n<p>Il suffit d&rsquo;encadrer son code entre &lt;pre&gt;&lt;code&gt; et &lt;\/code&gt;&lt;\/pre&gt;.<\/p>\n<h4>A mon avis<\/h4>\n<p>Pour :<\/p>\n<ul>\n<li>Evite bien la transformation du code par WordPress<\/li>\n<li>Il reste possible de rajouter du formattage manuel dans le code inclus<\/li>\n<li>Compatible WordPress 1.5, 2.0 et 2.1<\/li>\n<li>Un seul fichier de plugin, \u00e0 activer par le tableau de bord WP<\/li>\n<\/ul>\n<p>Contre :<\/p>\n<ul>\n<li>Pas de coloration syntaxique<\/li>\n<\/ul>\n<p><!--adsense#square250--><\/p>\n<h3>ElasticDog <a href=\"http:\/\/elasticdog.com\/2004\/09\/code-viewer\/\">Code viewer<\/a> v1.1<\/h3>\n<h4>Syntaxe<\/h4>\n<p>Le code est stock\u00e9 dans un fichier externe, est affich\u00e9 avec indentation et retour \u00e0 la ligne automatique, peut-\u00eatre t\u00e9l\u00e9charg\u00e9 s\u00e9par\u00e9ment.<\/p>\n<h4>A mon avis<\/h4>\n<p>Pour :<\/p>\n<ul>\n<li>Pr\u00e9sentation assez souple (par exemple, num\u00e9rotation des ligne)<\/li>\n<li>Le stockage dans un fichier externe permet de ne pas avoir \u00e0 r\u00e9p\u00e9ter le code (s&rsquo;il appara\u00eet dans plusieurs articles ou en plusieurs endroits)<\/li>\n<li>Un seul fichier de plugin, \u00e0 activer par le tableau de bord WP ; plus une proc\u00e9dure d&rsquo;installation.<\/li>\n<\/ul>\n<p>Contre :<\/p>\n<ul>\n<li>Stockage dans un fichier texte s\u00e9par\u00e9 : particuli\u00e8rement lourd pour des petits morceaux de code<\/li>\n<\/ul>\n<h3>Coffe2code <a href=\"http:\/\/www.coffee2code.com\/archives\/2005\/03\/29\/plugin-preserve-code-formatting\/\">Preserve code Formatting<\/a> v0.9<\/h3>\n<h4>Syntaxe<\/h4>\n<p>Il suffit d&rsquo;encadrer son code entre &lt;pre&gt;&lt;code&gt; et &lt;\/code&gt;&lt;\/pre&gt; (d&rsquo;autres tags peuvent aussi \u00eatre d\u00e9finis).<\/p>\n<h4>A mon avis<\/h4>\n<p>Pour :<\/p>\n<ul>\n<li>Evite bien la transformation du code par WordPress<\/li>\n<li>Un seul fichier de plugin, \u00e0 activer par le tableau de bord WP<\/li>\n<\/ul>\n<p>Contre :<\/p>\n<ul>\n<li>Pas mis \u00e0 jour depuis 2005. A-t-il seulement \u00e9t\u00e9 test\u00e9 avec WordPress v2.1 ?<\/li>\n<li>Pas de coloration syntaxique<\/li>\n<\/ul>\n<p><a name=\"Priyadi\"><\/p>\n<h3>Priyadi&#8217;s <a href=\"http:\/\/priyadi.net\/archives\/2005\/09\/27\/wordpress-plugin-code-autoescape\/\">Code Autoescape<\/a> v2.0<\/h3>\n<h4>Syntaxe<\/h4>\n<p>Il suffit d&rsquo;encadrer son code entre &lt;pre&gt;&lt;code&gt; et &lt;\/code&gt;&lt;\/pre&gt;.<\/p>\n<h4>A mon avis<\/h4>\n<p>Pour :<\/p>\n<ul>\n<li>Evite bien la transformation du code par WordPress<\/li>\n<li>Compatible WordPress 1.5, 2.0 et 2.1<\/li>\n<li>Un seul fichier de plugin, \u00e0 activer par le tableau de bord WP<\/li>\n<\/ul>\n<p>Contre :<\/p>\n<ul>\n<li>Pas de coloration syntaxique<\/li>\n<\/ul>\n<h3><a href=\"http:\/\/www.coolcode.cn\/?p=26\">CoolCode<\/a><\/h3>\n<h4>A mon avis<\/h4>\n<p>Pour :<\/p>\n<ul>\n<li>Apporte aussi une fonction de coloration syntaxique<\/li>\n<\/ul>\n<p>Contre :<\/p>\n<ul>\n<li>Le site est en Chinois (je n&rsquo;ai pas os\u00e9 faire une vraie \u00e9valuation).<\/li>\n<\/ul>\n<p><!--adsense#top_post_right--><\/p>\n<h3>Dean <a href=\"http:\/\/www.deanlee.cn\/wordpress\/code_highlighter_plugin_for_wordpress\/\">Code Source Syntax highlighting<\/a> v1.1<\/h3>\n<h4>Syntaxe<\/h4>\n<p>Il suffit d&rsquo;encadrer son code entre &lt;pre lang=\u00a0\u00bbphp\u00a0\u00bb&gt; et &lt;\/pre&gt; (en pr\u00e9cisant le langage PHP, ou tout autre langage).<\/p>\n<h4>A mon avis<\/h4>\n<p>Pour :<\/p>\n<ul>\n<li>Evite bien la transformation du code par WordPress<\/li>\n<li>Apporte aussi une fonction de coloration syntaxique (adapt\u00e9e \u00e0 de nombreux langages).<\/li>\n<li>Compatible WordPress 1.5+<\/li>\n<li>Un seul fichier de plugin, \u00e0 activer par le tableau de bord WP, plus un fichier CSS pour g\u00e9rer la pr\u00e9sentation<\/li>\n<\/ul>\n<p>Contre :<\/p>\n<ul>\n<li>Il <em>faut<\/em> d\u00e9finir des tags CSS (probl\u00e8me mineur parce que, pour les autres, c&rsquo;est seulement <em>pr\u00e9f\u00e9rable<\/em>)<\/li>\n<\/ul>\n<h3>RobM <a href=\"http:\/\/robm.me.uk\/projects\/plugins\/wordpress\/code-entities\">Code entities<\/a> v1.1<\/h3>\n<h4>Syntaxe<\/h4>\n<p>Au vu de l&rsquo;\u00e9volution des plugins de ce type, l&rsquo;auteur lui-m\u00eame conseille aujourd&rsquo;hui plut\u00f4t Priyadi&#8217;s <a href=\"#Priyadi\">Code Autoescape<\/a>.<\/p>\n<h3>Conclusion<\/h3>\n<p>Comme vous pouvez l&rsquo;imaginer \u00e0 partir des informations donn\u00e9es ci-dessus, mon choix s&rsquo;est donc orient\u00e9 vers Dean <a href=\"http:\/\/www.deanlee.cn\/wordpress\/code_highlighter_plugin_for_wordpress\/\">Code Source Syntax highlighting<\/a> que j&rsquo;utilise maintenant pour Roumazeilles.net. L&rsquo;argument le plus important a clairement \u00e9t\u00e9 la possibilit\u00e9 d&rsquo;assurer une coloration syntaxique qui apporte une lisibilit\u00e9 accrue y compris pour des petits morceaux de code (confort pour les lecteurs du site).<\/p>\n<p>Je n&rsquo;affirme pas avoir tout vu dans cette comparaison (<em>benchmarking<\/em>) mais cela m&rsquo;a men\u00e9 \u00e0 faire un choix raisonn\u00e9 dont je souhaitais partager avec vous les raisons. Vous avez (ou allez) peut-\u00eatre faire un choix diff\u00e9rent ; n&rsquo;h\u00e9sitez pas \u00e0 nous expliquer pourquoi ou comment.<\/p>\n<h3>Exemples<\/h3>\n<h4>Code PHP<\/h4>\n<p>Voici comment se pr\u00e9sente un morceau de source PHP :<\/p>\n<pre lang=\"php\">\r\n<?PHP\r\n    header(\"Location: \/news\/fr\/news.php\");\r\n    exit;\r\n?>\r\n<\/pre>\n<h4>CSS code<\/h4>\n<p>Voici l&rsquo;affichage d&rsquo;un fichier CSS :<\/p>\n<pre lang=\"css\">\r\n\/*******************************\/\r\n\/* Links                       *\/\r\n\/*******************************\/\r\na:link    { color:#a0a010 }\r\na:visited { color:#606000 }\r\na:hover   { color:#e0e020; text-decoration: underline }\r\na:active  { color:#e0e020; text-decoration: underline }\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Quand, comme moi, on souhaite inclure des morceaux de code dans un article WordPress, cela devient vite une s\u00e9rieuse gal\u00e8re. En fait WP n&rsquo;a pas vraiment pr\u00e9vu ce cas et il se pose une quantit\u00e9 de probl\u00e8mes plus ou moins graves. Ceux que j&rsquo;ai rencontr\u00e9s jusqu&rsquo;ici : Les &lt;?php disparaissent (sauf acrobaties manuelles) Un certain [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44,36,51,56,37,55,2],"tags":[],"class_list":["post-845","post","type-post","status-publish","format-standard","hentry","category-blog","category-creer-un-site","category-html-et-css","category-java","category-nouveau-site","category-php","category-wordpress"],"_links":{"self":[{"href":"https:\/\/www.roumazeilles.net\/news\/fr\/wordpress\/wp-json\/wp\/v2\/posts\/845","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.roumazeilles.net\/news\/fr\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.roumazeilles.net\/news\/fr\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.roumazeilles.net\/news\/fr\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.roumazeilles.net\/news\/fr\/wordpress\/wp-json\/wp\/v2\/comments?post=845"}],"version-history":[{"count":0,"href":"https:\/\/www.roumazeilles.net\/news\/fr\/wordpress\/wp-json\/wp\/v2\/posts\/845\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.roumazeilles.net\/news\/fr\/wordpress\/wp-json\/wp\/v2\/media?parent=845"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.roumazeilles.net\/news\/fr\/wordpress\/wp-json\/wp\/v2\/categories?post=845"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.roumazeilles.net\/news\/fr\/wordpress\/wp-json\/wp\/v2\/tags?post=845"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}