Préalable à l'écriture des futurs articles de ce blog, mon second article se portera sur un outil indispensable lorsque nous désirons écrire du code (html, css, php, ...), dans un article.

Cet outil, c'est la coloration syntaxique. Il en existe de nombreux. Dainis Graveris dresse une liste de 16 projets libres utilisant Javascript, pour la réaliser cette coloration. Ajouter de la coloration syntaxique sur PluXml est très simple, surtout vous utilisez le plugin CKeditor comme éditeur de texte WYSIWYG .

Prérequis

Tout d'abord, il vous faut :

• Évidemment le plugin PluXml CKéditor qui téléchargeable ici,
• Devez aussi télécharger le plugin de Ckeditor qui va baliser votre code à l'aide de la balise HTML <pre> (texte préformaté) et la class CSS correspondant au choix de code que vous aurez fait.
• Et le javascript, à ajouter à votre thème, qui va réaliser la coloration à la volée à la lecture de pages web : SyntaxHighlighter d'Alex Gorbatchev.

Installation

Au niveau de l'éditeur de texte

1. Copiez le répertoire plugins/syntaxhighlight de votre plugin CKEditor dans le répertoire  du plugin PluXml de CKEditor.
2. Mettre à jour votre configuration de CKEditor pour pour utiliser ce plugin : fichier config.js file comme suit :

   config.extraPlugins = 'syntaxhighlight'; config.toolbar_Full.push(['Code']); 

3. Maintenant il faut extraire le contenu de l'archive de SyntaxHighlighter et le télécharger par FTP dans un répertoire de votre thème PluXml, nous choisirons pour l'exemple "syntaxhighlighter" comme nom de répertoire.
4. Ouvrez un article, vous barre de menu de votre éditeur de texte devrait présenter un nouveau bouton   :

Au niveau du thème de votre site

Maintenant, vous allez simplement ajouter le support pour le type de code que vous vous voulez. Ne mettez pas l'ensemble des codes disponibles pour ne pas alourdir vos pages inutilement. Si vous parcourez le dossier Scripts du répertoire de syntaxhighlighter, vous remarquerez plusieurs fichiers du type shBrushnom-du-code.js, comme shBrushPhp.js pour le Php), ces fichiers sont les règles de coloration syntaxique pour chaque type de language. Voici la liste des codes interprétés par SyntaxHighlighter :

• Bash/shell
• C#
• C++
• CSS
• Delphi
• Diff
• Groovy
• JavaScript
• Java
• Perl
• PHP
• Plain Text
• Python
• Ruby
• Scala
• SQL
• Visual Basic
• XML

Ouvrez votre fichier header.php de votre thème et copier avant la fin de la balise , le code suivant :

<script type="text/javascript" src="<?php $plxShow->template(); ?>/syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="<?php $plxShow->template(); ?>/syntaxhighlighter/scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="<?php $plxShow->template(); ?>/syntaxhighlighter/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="<?php $plxShow->template(); ?>/syntaxhighlighter/scripts/shBrushJScript.js"></script>

Le premier fichier Javascript shCore.js, le noyau principal du script (comme son nom l'indique) est indispensable à son fonctionnement. Les 3 suivants (shBrushPhp.js, shBrushCss.js, shBrushJScript.js) sont les fichiers Javascript qui vont permettent de visualiser les codes en Php, CSS, et Javascript (3 codes que je vais utiliser dans mes articles). A vous de supprimer ou d'ajouter les fichiers shBrushnom-du-code.js en fonction du type de code que vous utiliser (voir la liste ci-dessus). Les 2 dernières lignes sont celles des feuilles de style de SyntaxHighlighter. A noter, qu'il existe d'autres feuilles de style par défaut ( shThemeDefault.css ) sur le site de SyntaxHighlighter pour obtenir une intégration en phase avec la charte graphique de votre site.

Usage dans un article

Lorsque vous faites un Copier/Coller de code à l'aide de CKEditor, utilisez le bouton . Si vous souhaitez du php sélectionner "php" dans le menu déroulant et coller  votre code. Votre code sera balisé de la façon suivante ( balise HTML <pre> et class de la feuille de style ) :

Votre code apparaît comme ceci dans votre éditeur de texte : php echo "Votre code php"; et comme ceci sur votre page d'article : php echo "Votre code php"; J'espère que cet article vous sera utile. N'hésitez pas à faire vos commentaires.