« Projet:Informatique/Geshi » : différence entre les versions

Une page de Wikiversité, la communauté pédagogique libre.
Contenu supprimé Contenu ajouté
Kaepora (discussion | contributions)
Kaepora (discussion | contributions)
Ligne 85 : Ligne 85 :
;Commentaires
;Commentaires
:Je ne comprends pas la différence entre les classes de commentaires inline co1, co2, ... [[Utilisateur:Kaepora|Kaepora]] 25 mai 2007 à 08:21 (UTC)
:Je ne comprends pas la différence entre les classes de commentaires inline co1, co2, ... [[Utilisateur:Kaepora|Kaepora]] 25 mai 2007 à 08:21 (UTC)
:Deuxième commentaire : on peut inclure dans Geshi une indentation automatique ? [[Utilisateur:Kaepora|Kaepora]] 25 mai 2007 à 08:31 (UTC)


==Styles par langage==
==Styles par langage==

Version du 25 mai 2007 à 08:31

Introduction

L'extension SyntaxHighlight GeSHi est installée depuis quelques jours 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

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

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: #FF8000 !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 orange 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)
Deuxième commentaire : on peut inclure dans Geshi une indentation automatique ? Kaepora 25 mai 2007 à 08:31 (UTC)

Styles par langage

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

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; }
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

  printf("Hello World\n");

  /*
  Du grand classique...
  */

  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

Style
pre.source-css .kw1 {color: #8080C0 !important; font-weight: bold !important;}
pre.source-css .kw2 {color: #000000 !important;}
pre.source-css .nu0 {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
Chiffres .nu0 violet 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

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

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é
Commentaires

Javascript

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; }
pre.source-java .nu0 { color: #FF0000 !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
Chiffres .nu0 rouge Non Non Non 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

PHP

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