Améliorer la présentation de son wiki Mediawiki avec des CSS
Les thèmes fournis avec Mediawiki sont plutôt pauvres et ressemblent à l'interface de Wikipedia. Sans rentrer dans la création d'un thème complet pour Mediawiki (je m'en fou de l'aspect global, c'est qu'un wiki local que j'ai installé et dont je suis le seul à consulter), j'ai quand même envie de rajouter des fonctionnalité d'affichage. Par exemple pour des paragraphes importants, j'aime qu'ils soient mise en valeur.
En tenant compte des possibilités de CSS, le code HTML directement à insérer dans une page wiki doit ressembler à ceci :
<p class="important">
<strong>NOTE</strong> : Pour garder une compatibilité avec la version 4 de PHP, il est possible de déclarer l'attribut avec le mot-clé
var, qui est équivalent au nouveau mot-clé public. L'utilisation de la syntaxe PHP 4 provoquera une erreur de niveau E_STRICT
pour avertissement.
</p>
Pour afficher de manière très visibles ce paragraphe avec le style "important", il faut que Mediawiki en tienne compte. Pour cela on doit insérer le contenu de la feuille de style directement dans la page du Wiki à l'adresse /MediaWiki:Common.css. Ainsi mon fichier /MediaWiki:Common.css ressemble à ceci :
/* Le CSS placé ici sera appliqué à tous les habillages. */
.important {
border: 2px solid black;
background: #F60;
color: white;
padding: 20px;
font-size: 110%;
}
Comment empêcher <pre> de faire dépasser le texte de la page ?
En HTML, la balise pre dit "pré formatée" permet de conserver la mise en page d'un texte sans aucune interprétation. C'est très utile pour conserver les espaces ou les caractères spéciaux normalement interpretés par HTML (comme < ou >). Mais cette balise a un gros défaut, c'est que si la ligne est très longue, elle va dépasser de la page.
Recommandée dans la rédaction d'articles de wiki de leur intranet, beaucoup d'employés recourent à la balise pre pour un peu tout et n'importe quoi. Puis lorsque les employés impriment certaines documentations, le texte est tronqué. Pas très sérieux tout ça...
La solution est de recourir à un ajout de code CSS, directement dans le fichier main.css stocké dans le répertoire du thème utilisé par MediaWiki (par défaut /skins/monobook). Ce hack permet les retours à la ligne automatiques :
pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
(hack pris sur labnol.blogspot.com)
Comment utiliser la coloration syntaxique sur MediaWiki ?
J'aime prendre des notes pour rassembler mes idées. Il y a plusieurs années j'aimais noter toutes mes "aventures" sous Linux et BSD sur un gros cahier. Mais vu le nombre de pages que cette bible a atteind, il était franchement difficile de retrouver la moindre information. Je suis donc passé aux fichiers .doc (ou plutôt .odt), bien plus souples mais dont l'organisation linéaire tel un livre ne collait pas à mes souhaits. Puis je suis passé à Google Notebook, génialissime mais qui nécessite d'être forcément connecté pour lire ces notes (je suis pas fan du "tout online").
A présent j'utilise un système de Wiki MediaWiki stocké sur mon serveur WAMP local : trouver une information est très simple et le fait que Wikipedia est basé sur MediaWiki a renforcé mon choix (même si MediaWiki est surdimensionné pour mes besoins).
Mon Wiki local comporte plusieurs rubriques dont la majorité des pages sont des tutoriaux et des prises de notes liés à du code informatique (langage Action Script 3, PHP5, HTML, Java, CSS, XML, etc..). Mais malheureusement MediaWiki ne gère pas la coloration syntaxique nécessaire pour se repérer dans des longues séries de code. Pour cela j'utilise l'extension Syntax Highlighter Code Colorizer for Mediawiki.
Voici comment faire pour intégrer la coloration syntaxique sous MediaWiki :
- Télécharger syntax-highlighter-code-colorizer.zip for MediaWiki sur la page download
- Dézipper l'archive dans le répertoire /extensions/ de MediaWiki
- Editer le fichier LocalSettings.php stocké à la racine et rajouter la ligne :
require_once("extensions/syntax-highlighter-code-colorizer/syntax-highlighter-mediawiki.php");
- Ensuite lorsqu'on créait une page Wiki il suffit d'utiliser le code HTML suivant :
<pre class="brush:[alias-du-code]></pre>
où [alias-du-code] est le language utilisé du code.
Exemple :
<pre class="brush:html">
<html>
<h1>Test du code<h1>
</html>
</pre>
Ce qui donne :
