Du code propre sur mon CMS!

Yop! je me suis pas mal pris la tête pour toruver comment faire ça alors, pour ceux qui savent pas déjà le faire, je laisse une trace.

Donc, j'ai fais ça sur drupal avec le thème par défaut "garland", couleur personalisée, en desactivant le cache pour plus de simplicité. Mais ça suffit pas avec ce thème, je crois que c'est à cause la couleur, ça génère une css temporaire donc faut recharger le thème lui-même pour voire les modifs. Pour ça, je vais dans la configuration du thème et je fais 'enregistrer la configuration'

Voci quel était mon problème : il me fallait afficher dans des balises de code le résultat de commandes entrées dans des terminaux GNU/Linux. Ces lignes de codes sont souvent longues, le résultat tient sur plusieurs lignes et est souvent identé, comme le résultat de la commande pstree, qui affiche l'arbres des processus du système.

Or, le html bouffe les espaces inutiles. La solution la plus connues est d'ajouter le code des espaces insécables mais cela suscite deux difficultés majeures: la première étant qu'il faut les ajouter à la main et ne pas se planter dans le nombre d'espaces à rajouter. La seconde est que quand on travaille en code, on a les poils qui se hérissent devant un code aussi moche que ce qui en résulte!

<

p>J'ai donc fouillé le web et ai fini par trouver la règle css à inclure dans les balises de code:
white-space: pre;

Vous connaissez la balise pre, certainement, elle permet de prendre en compte les saut de ligne. Ici, c'est le meme principe appliqué aux "whites-spaces".

Est alors apparu un nouveau soucis, celui des polices. J'ai eu beau mettre mes code bien face à face dans l'éditeur, pour que tout soit identé correctement, le résultat était décallé. C'est parceque les polices qu'on utilise sont jolies, les 'i' par exemple, prennent moins de place que les 'w' parceque c'est plus agréable à l'oeil. Il existe néanmoins des polices qui ont une taille fixe pour chaque lettre, ce qui évite les décallages. Ce sont les polices à chasse fixe, j'ai choisi monospace:

font-family:monospace;

Mais c'était pas fini, j'avais toujours le même décallage, en un peu moins prononcé, ce qui prouvait bien que ce que j'avais fait avait eu un résultat positif. La cause de ce problème était tout simplement que la police utilisée par mon éditeur n'était pas à chasse fixe. Merci à l'extension firebug de firefox qui m'a permis de trouver l'attribut css responsable et d'employer monospace également pour l'éditeur de code:

C'était donc presque prêt, me restait à rajouter quelques touches personnelles, pour avoir un affichage de type matrix (hé oui, on est geek ou on l'est pas!) avec une chouette bordure:

Les autre élement importants sont : le 'display:block', qui permet d'avoir chaque code sur une ligne dédiée plutôt que dans le texte si la balise code est incluse dans un paragraphe et surtout d'avoir un fond de couleur uniforme pour les codes de plusieurs lignes; Le 'padding:1%', sinon, le bord du cadre coïncide avec le bord des caractères, c'est moche; le line-height est là pour contre carrer l'héritage de mes css, qui le fixe à 170%, ce qui a pour effet d'espacer chaque ligne de code outre-mesure (on croirait des sauts de deux lignes).

<

p>Ha, oui, j'oubliais, le résultat, à cette adresse