{"id":656,"date":"2007-04-21T16:07:38","date_gmt":"2007-04-21T15:07:38","guid":{"rendered":"http:\/\/www.roumazeilles.net\/news\/en\/wordpress\/2007\/04\/21\/display-code-in-wordpress\/"},"modified":"2007-10-07T22:50:44","modified_gmt":"2007-10-07T20:50:44","slug":"display-code-in-wordpress","status":"publish","type":"post","link":"https:\/\/www.roumazeilles.net\/news\/en\/wordpress\/2007\/04\/21\/display-code-in-wordpress\/","title":{"rendered":"Display code in WordPress"},"content":{"rendered":"<p><img decoding=\"async\" src=\"\/images\/2007\/wordpress21.gif\" alt=\"WordPress v2.1\" align=\"left\"\/>When, as I do, you want to include some bits and pieces of software code in a WordPress post, it starts to become a serious headache. As a matter of fact, WP has not really been prepared for this and it creates a number of issues. Those I already encountered here:<\/p>\n<ul>\n<li>The &lt;?php tend to disappear (unless you start juggling)<\/li>\n<li>Some charcaters would not display at all (or badly)<\/li>\n<li>The overall presentation is pretty bland if you use &lt;code&gt;<\/li>\n<\/ul>\n<p>So, I looked for a plugin (nearly everything in WordPress is done by adding on of those marvellous little code gems that can be included in a few seconds into the basic configuration) adapted to this task, easy to install (I don&#8217;t want to be stuck with heavy maintenance just for this), easy to use.<\/p>\n<p>Here is the summary of what I checked and my opinion regarding them.<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>Syntax<\/h4>\n<p>Just insert your code between &lt;pre&gt;&lt;code&gt; and &lt;\/code&gt;&lt;\/pre&gt;.<\/p>\n<h4>In my opinion<\/h4>\n<p>Pros:<\/p>\n<ul>\n<li>Correctly avoids WordPress text transformation<\/li>\n<li>It is still possible to add some manual formating in the code itself<\/li>\n<li>Compatible with WordPress 1.5, 2.0 &#038; 2.1<\/li>\n<li>Single file plugin, to be activated from the WP dashboard<\/li>\n<\/ul>\n<p>Cons:<\/p>\n<ul>\n<li>No syntax coloration<\/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>Syntax<\/h4>\n<p>Your code is stored in an external file, is displayed with indentation and auto line-return, may be downloaded separately.<\/p>\n<h4>In my opinion<\/h4>\n<p>Pros:<\/p>\n<ul>\n<li>Rather flexible presentation\/format (e.g. line numbering)<\/li>\n<li>External file storage allows code duplication if it appears in several posts or in several locations)<\/li>\n<li>Single file plugin, to be activated from the WP dashboard; Plus described installation procedure<\/li>\n<\/ul>\n<p>Cons:<\/p>\n<ul>\n<li>External file storage: Rather heavy duty solution for small snipets of 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>Syntax<\/h4>\n<p>Just insert your code between &lt;pre&gt;&lt;code&gt; and &lt;\/code&gt;&lt;\/pre&gt; (some other tags can also be defined).<\/p>\n<h4>In my opinion<\/h4>\n<p>Pros:<\/p>\n<ul>\n<li>Correctly avoids WordPress text transformation<\/li>\n<li>Single file plugin, to be activated from the WP dashboard<\/li>\n<\/ul>\n<p>Cons:<\/p>\n<ul>\n<li>Not updated since 2005. It is not even sure it was tested with WordPress v2.1 ?<\/li>\n<li>No syntax coloration<\/li>\n<\/ul>\n<p><a name=\"Priyadi\"><\/p>\n<h3>Priyadi\u00e2\u20ac\u2122s <a href=\"http:\/\/priyadi.net\/archives\/2005\/09\/27\/wordpress-plugin-code-autoescape\/\">Code Autoescape<\/a> v2.0<\/h3>\n<h4>Syntax<\/h4>\n<p>Just insert your code between &lt;pre&gt;&lt;code&gt; and &lt;\/code&gt;&lt;\/pre&gt;.<\/p>\n<h4>In my opinion<\/h4>\n<p>Pros:<\/p>\n<ul>\n<li>Correctly avoids WordPress text transformation<\/li>\n<li>Compatible with WordPress 1.5, 2.0 &#038; 2.1<\/li>\n<li>Single file plugin, to be activated from the WP dashboard<\/li>\n<\/ul>\n<p>Cons:<\/p>\n<ul>\n<li>No syntax coloration<\/li>\n<\/ul>\n<h3><a href=\"http:\/\/www.coolcode.cn\/?p=26\">CoolCode<\/a><\/h3>\n<h4>In my opinion<\/h4>\n<p>Pros:<\/p>\n<ul>\n<li>Includes syntax coloration<\/li>\n<\/ul>\n<p>Cons:<\/p>\n<ul>\n<li>The web site is 99% in Chinese (I did not complete a real evaluation).<\/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>Syntax<\/h4>\n<p>Just insert your code between &lt;pre lang=&#8221;php&#8221;&gt; and &lt;\/pre&gt; (specifying PHP language or any other language).<\/p>\n<h4>In my opinion<\/h4>\n<p>Pros:<\/p>\n<ul>\n<li>Correctly avoids WordPress text transformation<\/li>\n<li>Compatible with WordPress 1.5+<\/li>\n<li>Also includes syntax coloration (for many languages).<\/li>\n<li>Single file plugin, to be activated from the WP dashboard, and a CSS file to fine-tune formating<\/li>\n<\/ul>\n<p>Cons:<\/p>\n<ul>\n<li>You <em>must<\/em> define CSS tags (minor problem since, for the others, you prefer to do so)<\/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>Syntax<\/h4>\n<p>In view of the current evolution of this type of plugins, even the author advises to use Priyadi\u00e2\u20ac\u2122s <a href=\"#Priyadi\">Code Autoescape<\/a> instead of his own.<\/p>\n<h3>Conclusion<\/h3>\n<p>As you can deduct from the information I provided here, my choice was Dean <a href=\"http:\/\/www.deanlee.cn\/wordpress\/code_highlighter_plugin_for_wordpress\/\">Code Source Syntax highlighting<\/a> that I currently use for Roumazeilles.net. The strongest reason was clearly the ability to do syntax coloration to increase readability even for small code snippets (I care about my readers confort).<\/p>\n<p>I can&#8217;t say I saw every aspect of these plugins in the comparison (<em>benchmark<\/em>) but it led me to a reasoned choice that I wanted to share with you. You may be doing a different choice; Feel free to tell us which one and why.<\/p>\n<h3>Examples<\/h3>\n<h4>PHP code<\/h4>\n<p>Here is how PHP source code appears:<\/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>Here is how a CSS file is displayed:<\/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>When, as I do, you want to include some bits and pieces of software code in a WordPress post, it starts to become a serious headache. As a matter of fact, WP has not really been prepared for this and it creates a number of issues. Those I already encountered here: The &lt;?php tend to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[42,37,52,58,38,57,2],"tags":[],"class_list":["post-656","post","type-post","status-publish","format-standard","hentry","category-blog","category-create-a-web-site","category-html-and-css","category-java","category-new-web-site","category-php","category-wordpress"],"_links":{"self":[{"href":"https:\/\/www.roumazeilles.net\/news\/en\/wordpress\/wp-json\/wp\/v2\/posts\/656","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.roumazeilles.net\/news\/en\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.roumazeilles.net\/news\/en\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.roumazeilles.net\/news\/en\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.roumazeilles.net\/news\/en\/wordpress\/wp-json\/wp\/v2\/comments?post=656"}],"version-history":[{"count":0,"href":"https:\/\/www.roumazeilles.net\/news\/en\/wordpress\/wp-json\/wp\/v2\/posts\/656\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.roumazeilles.net\/news\/en\/wordpress\/wp-json\/wp\/v2\/media?parent=656"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.roumazeilles.net\/news\/en\/wordpress\/wp-json\/wp\/v2\/categories?post=656"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.roumazeilles.net\/news\/en\/wordpress\/wp-json\/wp\/v2\/tags?post=656"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}