Journal

Suivez l’actualité de Fairytree

La coloration syntaxique dans vos pages MODx

Pour insérer du code de programmation dans une page web, on utilise généralement le balise HTML <pre>. Par défaut, le code n'aura pas de mise en forme particulière (autre que celle donnée par CSS) et ne sera donc pas particulièrement lisible. Pour corriger cela, nous allons faire appel à la coloration syntaxique.

Ajout du plugin «PRE Element Fix» dans TinyMCE

Je pars du principe que vous utilisez TinyMCE, l'éditeur riche proposé par défaut dans MODx Evolution.

On constate à l'usage que la gestion de la balise <pre> dans TinyMCE n'est pas excellente : les passages à la ligne sont interprétés différemment selon les navigateurs et la représentation du code dans l'éditeur n'est pas très visible (une simple tabulation). Heureusement, un plugin dénommé PRE Element Fix permet de corriger ces petits désagréments. Son installation est très simple :

  • téléchargez le plugin PRE Element Fix,
  • décompressez l'archive et déposez le dossier obtenu dans le répertoire des plugins de TinyMCE. Sous MODx Evolution 1.0.2, le chemin est le suivant:
    /assets/plugins/tinymce3241/jscripts/tiny_mce/plugins/
  • ajoutez preelementfix dans votre configuration TinyMCE (Outils › Configuration › Interface et fonctionnalités › Plugin).

Désormais, si vous appliquez le format «Preformatte» à votre code, vous devriez le voir s'afficher de cette façon :

Code HTML préformatté affiché dans TinyMCE

A l'usage, c'est quand même bien plus lisible que la simple tabulation d'origine.

Intégration du script Prettify

Pour la gestion de la coloration syntaxique, j'ai choisi d'utilise le script JS Prettify. Bien entendu, il en existe d'autres mais celui-ci est particulièrement simple à mettre en place. Le script se compose de deux fichiers: un fichier Javascript et une feuille de style. Une fois ces deux fichiers envoyés sur votre serveur, insérez ces deux lignes dans votre modèle:

<!-- CSS -->
<link type="text/css" href="prettify.css" rel="stylesheet" />

<!-- JS -->
<script type="text/javascript" src="prettify.js"></script>

Bien entendu, les attributs href et src sont à ajuster en fonction du répertoire où vous avez déposé les fichiers.

Enfin, un événement Javascript doit être ajouté à la balise body :

<body id="article" onload="prettyPrint()">

Création de la classe .prettyprint

Pour activer la coloration syntaxique, une classe .prettyprint doit être associée à chacune des balises <pre>. Nous allons déclarer cette classe dans TinyMCE, afin qu'elle soit disponible dans la barre d'outils. Allez dans Outils › Configuration › Interface et fonctionnalités › Sélecteurs CSS et ajoutez le code suivant :

Coloration syntaxique=prettyprint

La partie de gauche correspond à l'intitulé qui s'affichera dans la liste déroulante.

Utilisation

Maintenant que tout est installé correctement, vous pourrez colorer n'importe quel code en deux étapes :

  • sélectionnez le code et appliquez le format «Preformatté»,
  • gardez la sélection du code et appliquez le style «Coloration syntaxique».

Si vous avez bien suivi mes explications, votre code devrait maintenant s'afficher avec une agréable coloration syntaxique.

NB: les différents codes de cet article utilisent la technique que je viens de décrire.

Partager cet article