• Ajouter une coloration syntaxique à son code

    Cela fait un petit moment maintenant que je souhaitais intégrer à mon blog une coloration syntaxique des codes. Je me suis donc mis en quête d'un script qui le permette. D'ailleurs, il est bien plus facile de comprendre un code bien indenté et syntaxiquement coloré. Je vous propose donc ici un tuto pour vous expliquer la mise en place de Syntaxhighlighter dans votre blog.

    Les pré-requis ? Avoir le javascript activé sur son compte Eklablog. (Faire la demande au support si ce n'est pas le cas)

    Vous voyez ci-contre un exemple de coloration d'un code css.

    Installation

    1. Commencez par télécharger ce petit fichier zip: Scripts
       
    2. Extrayez son contenu sur votre ordinateur
       
    3. Créez un répertoire sur votre blog (Contenu/Gérer les Fichiers/Nouveau dossier) et nommez le comme vous souhaitez (par exemple colsyntax)
       
    4. Copiez les fichiers extraits précédemment dans ce répertoire. (Tous les fichiers JS, le fichier clipboard.swf et le fichier Syntaxhighlighter.css)
       
    5. Editez le fichier Syntaxhighlighter.css (Contenu/Gérer les Fichiers/Editer) , copiez tout son contenu et collez-le dans le css de votre blog (Apparence/Modifier le thème/Ajouter du CSS). Celui ci-contre est celui que j'ai légèrement modifié pour mon blog.
       
    6. Dans un module simple des menus placez le code suivant: Veillez à mettre l'url correspondant à vos fichiers.
      Par exemple pour mon blog ce sera: src="http://data0.ek.la/le-blog-facile/perso/colsyntax/shcore.js"

       












      Je n'ai placé ici (en plus du fichier le plus important shcore.js) que les lignes correspondant à la coloration syntaxique des codes javascript, css et xml (ou html). Bien entendu vous pouvez ajouter d'autres lignes correspondant aux fichiers JS que vous avec enregistrés (delphi, python, php, c# etc.)

    Voilà, le plus dur est fait. Votre blog est paré pour coloriser les codes !

    Utilisation


    Prenons l'exemple d'un code css que l'on veut faire apparaître dans un article. Le code ci-dessous (à placer dans l'article à l'aide du bouton html de l'éditeur) se compose de deux parties.

    La première entre <textarea> et </textarea> est l'endroit où l'on va placer le code.

    La seconde (le code javascript) est à placer tout à la fin de l'article. N'oubliez pas de mettre la bonne url pour le fichier clipboard.swf) 

    Ce code donnera comme résultat:

     

    Paramètres

    Language Alias
    C++ cpp, c, c++
    C# c#, c-sharp, csharp
    CSS css
    Delphi delphi, pascal
    Java java
    Java Script js, jscript, javascript
    PHP php
    Python py, python
    Ruby rb, ruby, rails, ror
    Sql sql
    VB vb, vb.net
    XML/HTML xml, html, xhtml, xslt

    Pour la coloration syntaxique propre à chaque langage, on utilisera la propriété de la colonne alias. Par exemple, si l'on veut l'appliquer à du php, on écrira:

    <textarea class="php" name="code">
    ....le code php....
    </textarea> 

    Il faudra bien entendu que le fichier correspondant au php ait été chargé dans le module simple (shbrushphp.js)


    Et enfin pour adapter les couleurs à vos envies, vous pouvez modifier le code CSS.

    Pour terminer, notez la possibilité de copier directement le code dans le presse papier avec le lien en haut de chaque code.