Comment afficher du code sur votre blogue [Wordpress]

Même si vous n’êtes pas programmeur, il peut arriver que vous ayez de temps à autre à publier un bout de code sur votre blogue. Par exemple, vous désirez partager un bookmarklet, un script ou une portion de texte que vous avez trouvé sur le Web. Lorsque vous insérez le code, vous devez veiller à ce qu’il interfère avec le texte de votre billet. Je vous suggère donc deux méthodes: l’une se nomme WP-Syntax et l’autre Snipt.org.

WP-Syntax est un plugin pour Wordpress. Une fois installée, vous pouvez ajouter du code sur un billet qui apparaîtra dans un rectangle qui n’interférera pas avec le texte de votre billet. Le seul problème de WP-Syntax, c’est que vous devez utiliser l’éditeur HTML et ajouter des balises pour que WP-Syntax prenne en compte votre code.

Heureusement, il existe un deuxième plugin qui lui se nomme WP-Syntax Button. Il ajoutera un bouton «Code» sur l’éditeur visuel. Vous n’aurez alors qu’à coller le code sur votre billet, puis sélectionnez-le et appuyez sur le bouton «Code». Ce plugin facilite grandement l’utilisation de WP-Syntax.

La deuxième méthode est plus simple et surtout fonctionne avec toutes les plateformes, puisqu’il s’agit d’un service Web. Il se nomme Snipt.org, il est gratuit est très efficace. Pour créer un compte sur Snipt, vous utilisez votre nom d’utilisateur et mot de passe Twitter. Malheureusement, Snipt n’utilise pas le système d’authentification de Twitter. Vous devez donc leur faire confiance. Pour ma part, j’ai créé un compte Twitter secondaire uniquement pour ce genre de situations.

Exemple de code provenant de Snipt:

Exemple de code provenant de WP-Syntax:

javascript<span style="color: #66cc66;">:</span>var<span style="color: #66cc66;">%</span>20a<span style="color: #66cc66;">=</span><span style="color: #ff0000;">''</span>;for<span style="color: #66cc66;">(</span>var<span style="color: #66cc66;">%</span>20ln<span style="color: #66cc66;">=</span><span style="color: #cc66cc;">0</span>;ln<span style="color: #66cc66;">%</span>3Cdocument.<span style="color: #202020;">links</span>.<span style="color: #202020;">length</span>;ln<span style="color: #66cc66;">++</span><span style="color: #66cc66;">)</span><span style="color: #66cc66;">{</span>var<span style="color: #66cc66;">%</span>20lk<span style="color: #66cc66;">=</span>document.<span style="color: #202020;">links</span><span style="color: #66cc66;">[</span>ln<span style="color: #66cc66;">]</span>;a<span style="color: #66cc66;">+=</span>ln<span style="color: #66cc66;">+</span><span style="color: #ff0000;">':%20%3Ca%20href=\'</span><span style="color: #ff0000;">'+lk+'</span>\<span style="color: #ff0000;">'%20title=\'</span><span style="color: #ff0000;">'+lk.text+'</span>\<span style="color: #ff0000;">'%3E'</span><span style="color: #66cc66;">+</span>lk<span style="color: #66cc66;">+</span><span style="color: #ff0000;">'%3C/a%3E%3Cbr%3E\n'</span>;<span style="color: #66cc66;">}</span>w<span style="color: #66cc66;">=</span>window.<span style="color: #202020;">open</span><span style="color: #66cc66;">(</span><span style="color: #ff0000;">''</span>,<span style="color: #ff0000;">'Links'</span>,<span style="color: #ff0000;">'scrollbars,resizable,width=400,height=600'</span><span style="color: #66cc66;">)</span>;w.<span style="color: #202020;">document</span>.<a href="http://sap4.com/wiki/index.php?title=write"><span style="color: #000066;">write</span></a><span style="color: #66cc66;">(</span>a<span style="color: #66cc66;">)</span>;

Snipt offre une interface simple, vous pouvez utiliser ce service gratuit pour vous construire une bibliothèque personnelle de vos scripts et bookmarklets. Chacun de vos éléments possède un code qui vous permet d’embarquer facilement le code que vous désirez partager.

Vous pouvez aussi partager du texte en utilisant ces services

Les deux solutions fonctionnent très bien. Snipt a deux avantages: il offre une boîte qui intègre le tire de votre code et vous pouvez le partager rapidement sur plusieurs réseaux sociaux. De son côté, comme WP-Syntax est hébergé sur votre serveur, vous avez le contrôle total.
Benoit Descary

Liens:
WP-Syntax: http://wordpress.org/extend/plugins/wp-syntax
WP-Syntax Button: http://wordpress.org/extend/plugins/wp-syntax-button
Sinp: http://snipt.org