Introduction

modifier

L'extension SyntaxHighlight GeSHi est installée depuis quelques temps sur la Wikiversité. Bien que cette extension s'avèrera très utile par la suite, il faudrait la personnaliser. Pour ce faire, il existe la page MediaWiki:Geshi.css (modifiable uniquement par les bibliothécaires) comprenant la feuille de style de l'extension.

Cette page a un double objectif :

  • Se mettre d'accord sur les couleurs de la coloration syntaxique
  • Reporter d'éventuels bugs, omissions, améliorations possibles

N'hésitez pas à laisser des commentaires dans les parties réservées à cet effet !

Quelques explications

modifier

Voici les différentes classes CSS disponibles :

  • les classes pour les mots clés :
    • la classe pour les mots clés 1 : .kw1
    • la classe pour les mots clés 2 : .kw2
    • la classe pour les classes/fonctions natives : .kw3
    • la classe pour les types de données : .kw4
  • les classes pour les commentaires :
    • les classes pour les commentaires d'une ligne (c'est-à-dire ceux qui commencent au marqueur et qui se terminent à la fin de la ligne) : il y a une classe par marqueur ; elles se nomment .co1, .co2...
    • la classe pour les commentaires multilignes (c'est-à-dire ceux qui prennent effet au marqueur de début et qui se termine à un marqueur de fin) : une seule classe pour tous les marqueurs ; elle se nomme .coMULTI
  • la classe pour les caractères d'échappement (comme par exemple \n ou \t) : .es0
  • la classe pour les parenthèses, crochets et accolades : .br0
  • la classe pour les chaînes de caractères : .st0
  • la classe pour les valeurs numériques : nu0
  • la classe pour le méthodes : .me0
  • les classes pour les expressions rationnelles : .re1, .re2...

Afin de modifier un style CSS, il faut utiliser la syntaxe

pre.source-<lang> <classe> { /* CSS */ }

où <lang> est le paramètre lang du langage et <classe> une classe citée plus haut. Par exemple, pour modifier la couleur et la graisse des mots clés 1 dans le langage Java, on a :

pre.source-java .kw1 { color: #0000FF !important; font-weight: bold !important; }

Vous pouvez facilement faire des tests sur votre monobook.css.

Style général

modifier

Ce style s'applique à tous les langages et évite de redéfinir les choses à chaque fois.

/* Parenthèses, accolades et crochets */
pre.source .br0 { color: #000000 !important; }
/* Commentaires sur une ligne */
pre.source .co1 { color: #008000 !important; font-style: italic !important; }
pre.source .co2 { color: #008000 !important; font-style: italic !important; }
/* Commentaires sur plusieurs lignes */
pre.source .coMULTI { color: #008000 !important; font-style: italic !important; }
/* Chiffres */
pre.source .nu0 { color: #000000 !important; }
/* Chaînes de caractères */
pre.source .st0 { color: #808080 !important; }

Ce qui peut se résumer comme suit :

Aspect Classe Couleur Gras Italique
Parenthèses, accolades et crochets .br0 noir   Non   Non
Commentaires .co1, .co2, .coMULTI vert   Non  
Chiffres .nu0 noir   Non   Non
Chaînes de caractères .st0 gris   Non   Non
Commentaires
Je ne comprends pas la différence entre les classes de commentaires inline co1, co2… Kaepora 25 mai 2007 à 08:21 (UTC)
En fait, le développeur a préféré créé deux classes pour pouvoir gérer deux façon indépendantes deux types de commentaires une ligne. Par exemple, en Java, le commentaire 1 est // et le deuxième est import (qui n’est pas un commentaire mais comme ça prend en compte qu'une ligne...). C’est un choix qui n'engage que le développeur   Julien1311 discuter 25 mai 2007 à 11:47 (UTC)
Deuxième commentaire : on peut inclure dans Geshi une indentation automatique ? Kaepora 25 mai 2007 à 08:31 (UTC)
Je pense pas que ce soit prévu. En fait geshi n'interprète pas le code, sa seule fonction est de comparer les mots à une liste de mots-clés dépendant du langage et de colorer en fonction. Une gestion des erreurs de syntaxe (parenthèses ou accolades non équilibrées) serait aussi intéressant mais ce n’est pas prévu. Julien1311 discuter 25 mai 2007 à 11:47 (UTC)

Styles par langage

modifier

Cette partie va présenter les style langage par langage. D'autres informations seront ajoutés comme certains comportements ou la liste des mots-clés. N'hésitez pas à signaler tout oubli de mot-clé ou tout comportement étonnant ! N'hésitez pas non plus à ajouter d'autres langages !

Style
pre.source-c .kw1 { color: #0000FF !important; font-weight: bold !important; }
pre.source-c .kw2 { color: #8000FF !important; }
pre.source-c .kw3 { color: #8000FF !important; }
pre.source-c .kw4 { color: #8000FF !important; }
pre.source-c .co2 { color: #0000FF !important; font-style: normal !important; }
Aspect Classe Couleur Gras Italique Mots-clés
Mots-clés 1 .kw1 bleu     Non
Mots-clés 2 .kw2 violet   Non   Non
Classes/fonctions natives .kw3 violet   Non   Non
Types de données .kw4 violet   Non   Non
Commentaires .co2 bleu   Non   Non '#'
Comportement particulier
Mode strict toujours désactivé
Exemple
#include <stdio>

int main(void) {

  // Mon premier programme en C

  while(true)
    printf("Bonjour le monde !\n");

  /*
  Quelques petites déclarations
  */

  int nb = 100;
  char c = 'a';
  float tab[10];
  int* pnb = &nb;

  return 0;
}
Commentaires
De nombreux mots-clés sont manquants ! Je ne comprend pas pourquoi # est considéré comme un caractère de commentaire, c’est totalement faux ! Julien1311 discuter 25 mai 2007 à 05:18 (UTC)
Style
pre.source-css .kw1 {color: #8080C0 !important; font-weight: bold !important;}
pre.source-css .kw2 {color: #000000 !important;}
pre.source-css .re3 {color: #000000 !important;}
Aspect Classe Couleur Gras Italique Mots-clés
Mots-clés 1 .kw1 bleu-gris     Non
Mots-clés 2 .kw2 noir   Non   Non
Expression rationnelle 3 .re3 noir   Non   Non
Comportement particulier
Mode strict toujours désactivé
Expression rationnelle 1 : '\#[a-zA-Z0-9\-_]+'
Expression rationnelle 2 : '\.[a-zA-Z0-9\-_]+'
Expression rationnelle 3 : '(\d+|(\d*\.\d+))(em|ex|pt|px|cm|in|%)'
Commentaires
L'expression rationnelle 1 est assez pénible. Elle permet de colorer les id d'une couleur particulière mais du coup les codes hexadécimaux des couleurs sont aussi colorés. Julien1311 discuter 25 mai 2007 à 05:35 (UTC)

Fortran

modifier
Style
pre.source-fortran .kw1 { color: #0000FF !important; font-weight: bold !important; }
pre.source-fortran .kw2 { color: #800000 !important; }
pre.source-fortran .kw3 { color: #0000FF !important; font-weight: bold !important; }
pre.source-fortran .kw4 { color: #8000FF !important; }
Aspect Classe Couleur Gras Italique Mots-clés
Mots-clés 1 .kw1 bleu     Non
Mots-clés 2 .kw2 marron   Non   Non
Classes/fonctions natives .kw3 bleu     Non
Types de données .kw4 violet   Non   Non
Comportement particulier
Mode strict toujours désactivé
Commentaires
Style
pre.source-java .kw1 { color: #0000FF !important; font-weight: bold !important; }
pre.source-java .kw2 { color: #8000FF !important; }
pre.source-java .kw3 { color: #000000 !important; }
pre.source-java .kw4 { color: #8000FF !important; }
Aspect Classe Couleur Gras Italique Mots-clés
Mots-clés 1 .kw1 bleu     Non
Mots-clés 2 .kw2 violet   Non   Non
Classes/fonctions natives .kw3 noir   Non   Non
Types de données .kw4 violet   Non   Non
Comportement particulier
Mode strict toujours désactivé
Exemple
class HelloWorld {

  static public void main(String [] args) {

    // Mon premier programme en JAVA

    while(true)
      System.out.println("Bonjour le monde !");

    /*
    C’est promis, demain, je passe au C++...
    */

    String p_args = args[0];
    int d_args = Integer.parseInt(args[1]);
    double s = Math.sin(Math.PI / 6.);

  }
}
Commentaires

JavaScript

modifier
Style
pre.source-java .kw1 { color: #0000FF !important; font-weight: bold !important; }
pre.source-java .kw2 { color: #000080 !important; font-style: italic !important; }
pre.source-java .kw3 { color: #000080 !important; font-style: italic !important; }
Aspect Classe Couleur Gras Italique Mots-clés
Mots-clés 1 .kw1 bleu     Non
Mots-clés 2 .kw2 violet   Non  
Classes/fonctions natives .kw3 violet   Non  
Comportement particulier
Mode strict pouvant être activé
Délimiteurs de script
  • <script type="text/javascript"> et </script>
  • <script language="javascript"> et </script>
Expression rationnelle : "/.*/([igm]*)?"
Commentaires
Style
pre.source-php .kw1 { color: #0000FF !important; font-weight: bold !important; }
pre.source-php .kw2 { color: #0000FF !important; font-weight: bold !important; }
pre.source-php .kw3 { color: #8000FF !important; }
Aspect Classe Couleur Gras Italique Mots-clés
Mots-clés 1 .kw1 bleu     Non
Mots-clés 2 .kw2 bleu     Non
Classes/fonctions natives .kw3 violet   Non   Non
Comportement particulier
Mode strict pouvant être activé
Délimiteurs de script :
  • <?php et ?>
  • <? et ?>
  • <% et %>
  • <script language="php"> et </script>
Commentaires