Projet:Informatique/Geshi

Une page de Wikiversité.
Sauter à la navigation Sauter à la recherche

Introduction[modifier le wikicode]

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 le wikicode]

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 le wikicode]

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 Non Non
Commentaires .co1, .co2, .coMULTI vert Non Non Fait
Chiffres .nu0 noir Non Non Non Non
Chaînes de caractères .st0 gris Non Non 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 Smiley souriant 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 le wikicode]

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 !

C[modifier le wikicode]

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 Fait Non Non
Mots-clés 2 .kw2 violet Non Non Non Non
Classes/fonctions natives .kw3 violet Non Non Non Non
Types de données .kw4 violet Non Non Non Non
Commentaires .co2 bleu Non Non 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)

CSS[modifier le wikicode]

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 Fait Non Non
Mots-clés 2 .kw2 noir Non Non Non Non
Expression rationnelle 3 .re3 noir Non Non 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 le wikicode]

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 Fait Non Non
Mots-clés 2 .kw2 marron Non Non Non Non
Classes/fonctions natives .kw3 bleu Fait Non Non
Types de données .kw4 violet Non Non Non Non
Comportement particulier
Mode strict toujours désactivé
Commentaires

Java[modifier le wikicode]

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 Fait Non Non
Mots-clés 2 .kw2 violet Non Non Non Non
Classes/fonctions natives .kw3 noir Non Non Non Non
Types de données .kw4 violet Non Non 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 le wikicode]

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 Fait Non Non
Mots-clés 2 .kw2 violet Non Non Fait
Classes/fonctions natives .kw3 violet Non Non Fait
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

PHP[modifier le wikicode]

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 Fait Non Non
Mots-clés 2 .kw2 bleu Fait Non Non
Classes/fonctions natives .kw3 violet Non Non Non Non
Comportement particulier
Mode strict pouvant être activé
Délimiteurs de script :
  • <?php et ?>
  • <? et ?>
  • <% et %>
  • <script language="php"> et </script>
Commentaires