Choisir un plugin WordPress pour poster du code en couleur
Pour ceux d’entre vous qui utilisent WordPress, qui pondent un « peu de code » à leurs heures perdues… Dieu sait si vous êtes nombreux ! Un jour ou l’autre, vous vous êtes demandé comment insérer un morceau de code tout beau, tout chaud au sein d’un post WordPress enfin montrer à la face du monde votre expertise par exemple dans le langage assembleur …
Comme toujours dans le monde merveilleux du groupe « WordPress and the plugins », il existe des béquilles qui vous facilitent le travail en colorant à la main chacune de vos balises.
Des critères pour sélectionner un plugin
J’ai jeté mon dévolu sur ces 3 plugins mais à l’installation, je n’en ai retenu qu’un seul. Ces trois plugins répondent à quelques critères objectifs que l’on peut attendre en terme de « color coding »* , « highlight coding »*, « syntax highlighting »*.
- La possibilité d’ajouter ou de retirer les numéros de ligne.
- La possibilité offerte pour les utilisateurs de faire un copier-coller facile sans se trimballer les numéros de lignes. Internet est le règne du bout-de-code-copier-coller-à-droite-à-gauche.
- La possibilité de poster des codes source dans un grand nombre de langage : actionscript, php, ruby…etc
* C’est ainsi que l’on nomme cette fonctionnalité recherchée en cherchant dans google via ces deux termes, vous trouvez pléthore de références si la proposition de ce triptyque ne vous plait décidément pas.
Le goût et les couleurs
Le triptyque de plugins à découvrir
Choix N°1 – WP-syntax
Ce plugin qui fonctionne à merveille est celui de Ryan Mcgeary qui s’appui sur GeSHi (Generic Syntax Highlighter) initialement conçu pour le système de forums phpBB qui inclut nativement un très grand nombre de langages. Notre choix pour ce blog même.
http://wordpress.org/extend/plugins/wp-syntax/
http://ryan.mcgeary.org/
http://qbnz.com/highlighter/
Choix N°2 – CodeColorer
Ce plugin d’un développer ukrainien du nom de Dmytro Shteflyuk offre notamment en plus du numéro de lignes le noir comme couleur par défaut pour le code très « ruby like ».
http://kpumuk.info/projects/wordpress-plugins/codecolorer/
Choix N°3 – Dojox WordPress Syntax Highlighter
Ce plugin concut par les allemands de OS Expert.net répond lui aussi aux trois critères énoncés ci-dessus. ?
http://osexpert.net/wordpress-syntax-highlighter
Envoyez les couleurs !
Un exemple de PHP sous WP-syntax
On renseigne le paramètre lang=”php” pour notifier qu’il s’agit de php.
// $Id: install.php,v 1.34.2.5 2008/07/09 21:48:41 drumm Exp $ require_once './includes/install.inc'; /** * The Drupal installation happens in a series of steps. We begin by verifying * that the current environment meets our minimum requirements. We then go * on to verify that settings.php is properly configured. From there we * connect to the configured database and verify that it meets our minimum * requirements. Finally we can allow the user to select an installation * profile and complete the installation process. * * @param $phase * The installation phase we should proceed to. */ function install_main() { require_once './includes/bootstrap.inc'; drupal_bootstrap(DRUPAL_BOOTSTRAP_CONFIGURATION); // This must go after drupal_bootstrap(), which unsets globals! global $profile, $install_locale; require_once './modules/system/system.install'; require_once './includes/file.inc'; // Ensure correct page headers are sent (e.g. caching) drupal_page_header(); // Check existing settings.php. $verify = install_verify_settings(); // Drupal may already be installed. if ($verify) { // Establish a connection to the database. require_once './includes/database.inc'; db_set_active(); // Check if Drupal is installed. if (install_verify_drupal()) { install_already_done_error(); } } // Load module basics (needed for hook invokes). include_once './includes/module.inc'; $module_list['system']['filename'] = 'modules/system/system.module'; $module_list['filter']['filename'] = 'modules/filter/filter.module'; module_list(TRUE, FALSE, FALSE, $module_list); drupal_load('module', 'system'); drupal_load('module', 'filter'); |
Un exemple de CSS sous WP-syntax
On renseigne le paramètre line=”1″ pour faire apparaître les numéros de ligne.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | /** general styles START **/ html { min-height: 100%; margin-bottom: 1px; } body { background-color: #E4F2FD; font-family: "Lucida Grande", Trebuchet, Arial, sans-serif; font-size: 12px; font-weight: normal; text-align: left; margin: 0 auto 0 auto; padding: 0; color: #000000; z-index: auto; } form { margin: 0; padding: 0; } /** general styles STOP **/ /* police text (begin) */ p.hecube_website_text{ font-size: 12px; text-align: justify; line-height: 20px; color: #464646; text-decoration: none; margin: 0px auto; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; z-index: auto; } |
Un exemple de XML sous WP-syntax
On renseigne le paramètre escaped=”true” lorsque le code contient les balises < et > transcrites en html.
<sitelist> <asset aspectRatio="normal" isSite="true" > <url><![CDATA[http://hecube.net]]></url> <headline><![CDATA[Le site de hecube.net]]></headline> <description><![CDATA[Hecube.net est une agence web spécialisée dans la conception et la création de site internet, la promotion et l'animation de site web ainsi que l'hébergement serveur dédié administré. Hecube accompagne les entreprises sur Internet en leur apportant le meilleur des technologies web créatrices de notoriété]]></description> </asset> </sitelist> |
Pour aller plus loin
- Les plugins qui sortent sur le site de WP pour le tag code-highlighter
http://wordpress.org/extend/plugins/tags/highlight/ - Les plugins qui sortent sur le site de WP pour le tag highlight
http://wordpress.org/extend/plugins/code-highlighter/ - Un très bon article en anglais sur le sujet de Lorelle VanFossen, qui fait autorité sur tout ce qui touche à WordPress.
http://lorelle.wordpress.com/2007/02/23/wordpress-plugins-that-help-you-write-code/
