<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Duretz sur le Net ! &#187; code</title>
	<atom:link href="http://www.duretz.net/tag/code/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.duretz.net</link>
	<description>Le portail de la famille Duretz</description>
	<lastBuildDate>Wed, 07 Dec 2011 14:54:56 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Insérer du code dans un article</title>
		<link>http://www.duretz.net/2008/10/29/inserer-du-code-dans-un-article/</link>
		<comments>http://www.duretz.net/2008/10/29/inserer-du-code-dans-un-article/#comments</comments>
		<pubDate>Wed, 29 Oct 2008 12:05:05 +0000</pubDate>
		<dc:creator>Laurent Duretz</dc:creator>
				<category><![CDATA[Technologie]]></category>
		<category><![CDATA[code]]></category>
		<category><![CDATA[plugin]]></category>
		<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://www.duretz.net/?p=124</guid>
		<description><![CDATA[Insérer du code dans un article édité avec WordPress relève du combat de catch.
Vous pouvez sans problème copier/coller un bout de code dans l&#8217;article comme ici :
&#60;?php
echo(&#8216;Hello World&#8217;);
echo(&#8216;Ceci est une phrase beaucoup trop longue pour tenir sur une seule ligne dans le thème que j&#8217;ai choisi  [...]]]></description>
			<content:encoded><![CDATA[<p>Insérer du code dans un article édité avec WordPress relève du combat de catch.</p>
<p>Vous pouvez sans problème copier/coller un bout de code dans l&#8217;article comme ici :<span id="more-124"></span></p>
<blockquote><p>&lt;?php<br />
echo(&#8216;Hello World&#8217;);<br />
echo(&#8216;Ceci est une phrase beaucoup trop longue pour tenir sur une seule ligne dans le thème que j&#8217;ai choisi pour wordpress&#8217;); // Notez que ce code PHP fonctionne parfaitement !<br />
?&gt;</p></blockquote>
<p>Mais je trouve :</p>
<ol>
<li>Qu&#8217;il manque un peu de coloration syntaxique ;</li>
<li>Que les lignes de code trop longues se voient affubler d&#8217;un retour à la ligne intempestif.</li>
</ol>
<p>C&#8217;est avec ce petit besoin supplémentaire que les ennuis commencent.</p>
<p>Ce petit besoin donc, nous emmène du côté des plugins et là c&#8217;est l&#8217;embarras du choix :</p>
<ul>
<li><a title="Un premier plugin" href="http://wordpress.org/extend/plugins/wp-syntax/">WP-Syntax</a></li>
<li><a title="Un second" href="http://wordpress.org/extend/plugins/google-syntax-highlighter/">Google Syntax Highlighter for WordPress</a></li>
<li><a title="Un troisième" href="http://wordpress.org/extend/plugins/highlight-source-pro/">Highlight Source Pro</a></li>
<li><a title="Un quatrième" href="http://wordpress.org/extend/plugins/syntaxhighlighter/">SyntaxHighlighter</a></li>
<li><a title="Un cinquième" href="http://wordpress.org/extend/plugins/syntaxhighlighter-plus/">SyntaxHighlighter Plus</a></li>
<li><a title="Un sixième" href="http://wordpress.org/extend/plugins/wp-codebox/">WP-CodeBox</a></li>
<li><a title="Un septième" href="http://wordpress.org/extend/plugins/codecolorer/">CodeColorer</a></li>
<li><a title="Un huitième" href="http://wordpress.org/extend/plugins/devformatter/">Developer Formatter</a></li>
<li><a title="Un neuvième mais je n'irai pas plus loin" href="http://wordpress.org/extend/plugins/fv-code-highlighter/">FV Code Highlighter</a></li>
</ul>
<p>Sans entrer dans les détails, mon choix s&#8217;est porté sur WP-CodeBox.</p>
<p>Voici l&#8217;exemple précédent utilisé avec WP-CodeBox.</p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p124code4'); return false;">View Code</a> PHP</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p1244"><td class="line_numbers"><pre>1
2
3
4
</pre></td><td class="code" id="p124code4"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;</span>?php
<span style="color: #b1b100;">echo</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'Hello World'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #b1b100;">echo</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'Ceci est une phrase beaucoup trop longue pour tenir sur une seule ligne dans le thème que j'</span>ai choisi pour wordpress<span style="color: #0000ff;">'); // Notez que ce code PHP fonctionne parfaitement !
?&amp;gt;</span></pre></td></tr></table></div>

<p>Si l&#8217;apparence gagne en lisibilité, vous noterez que les caractères &laquo;&nbsp;&lt;&nbsp;&raquo; et &laquo;&nbsp;&gt;&nbsp;&raquo; des ligne 1 et 4 ont été  <em>échappés</em>. Cela signifie qu&#8217;ils ont été remplacés par un code HTML qui évite ainsi d&#8217;exécuter du code placer dans un article.</p>
<p>La seule méthode que je connaisse à ce jour pour éviter ce problème est de ne plus utiliser l&#8217;éditeur visuel pour un article contenant du code de façon à obtenir ceci :</p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p124code5'); return false;">View Code</a> PHP</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p1245"><td class="line_numbers"><pre>1
2
3
4
</pre></td><td class="code" id="p124code5"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;</span> ?php
<span style="color: #b1b100;">echo</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'Hello World'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #b1b100;">echo</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'Ceci est une phrase beaucoup trop longue pour tenir sur une seule ligne dans le thème que j'</span>ai choisi pour wordpress<span style="color: #0000ff;">'); // Notez que ce code PHP fonctionne parfaitement !
?&amp;gt;</span></pre></td></tr></table></div>

<p>Mais là encore, un space superflu sépare le &laquo;&nbsp;&lt;&nbsp;&raquo; du &laquo;&nbsp;?&nbsp;&raquo; à la ligne 1. Bon ok, je ne suis jamais content.</p>
<p>Pour ceux qui souhaitent limiter la taille de la boîte de code, ils peuvent modifier le fichier codebox.css du plugin et mettre à jour les éléments suivants :</p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p124code6'); return false;">View Code</a> CSS</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p1246"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
</pre></td><td class="code" id="p124code6"><pre class="css" style="font-family:monospace;"><span style="color: #808080; font-style: italic;">/* codebox */</span>
<span style="color: #6666ff;">.wp_codebox</span> <span style="color: #00AA00;">&#123;</span>
  <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#100</span><span style="color: #00AA00;">;</span>
  <span style="color: #000000; font-weight: bold;">background-color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#f9f9f9</span><span style="color: #00AA00;">;</span>
  <span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span> <span style="color: #933;">1px</span> <span style="color: #993333;">solid</span> <span style="color: #993333;">silver</span><span style="color: #00AA00;">;</span>
  <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span> <span style="color: #cc66cc;">0</span> <span style="color: #933;">1.5em</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>
  <span style="color: #000000; font-weight: bold;">overflow</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">auto</span><span style="color: #00AA00;">;</span>
  <span style="color: #000000; font-weight: bold;">max-height</span><span style="color: #00AA00;">:</span> <span style="color: #933;">200px</span>
<span style="color: #00AA00;">&#125;</span>
&nbsp;
<span style="color: #808080; font-style: italic;">/* IE FIX */</span>
<span style="color: #6666ff;">.wp_codebox</span> <span style="color: #00AA00;">&#123;</span>
  overflow-x<span style="color: #00AA00;">:</span> <span style="color: #993333;">auto</span><span style="color: #00AA00;">;</span>
  overflow-y<span style="color: #00AA00;">:</span> <span style="color: #993333;">auto</span><span style="color: #00AA00;">;</span>
  <span style="color: #000000; font-weight: bold;">padding-bottom</span><span style="color: #00AA00;">:</span> expression<span style="color: #00AA00;">&#40;</span>this<span style="color: #6666ff;">.scrollWidth</span> &amp;gt<span style="color: #00AA00;">;</span> this<span style="color: #6666ff;">.offsetWidth</span> ? <span style="color: #cc66cc;">15</span> <span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span>
  <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span> <span style="color: #933;">100%</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

]]></content:encoded>
			<wfw:commentRss>http://www.duretz.net/2008/10/29/inserer-du-code-dans-un-article/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

