javascript

bd cinéma couleur css firefox google gratuit ie6 interface iphone javascript jeu musique navigateur new york photo photoshop police vidéo wordpress

Je ne connaissais pas cette astuce et j’en avais besoin pour mon tout récent blog 29minparjour.com où je poste beaucoup de code dans des balises <pre>.

Syntaxhighlighter ? Pas une solution pour moi.

Au début, je voulais utiliser le syntaxhighlighter (très connu et très utilisé) mais je n’aimais pas avoir à spécifier à chaque fois dans le html que tel bloc devait être stylé, et dans quel language. De plus, le code à insérer (name=”code”) n’est pas valide…

J’avoue que le rendu est élégant (sauf avec la version 2.0, la dernière en date). D’ailleurs, Viget Labs avait amélioré le JS en permettant d’agrandir la fenêtre au survol. Une belle amélioration.

Malgré tout, c’était au niveau HTML que je trouvais ça laborieux. Je voulais quelque chose de tout simple.

CSS, aide-moi!

Je voulais juste un simple retour à la ligne pour éviter que les balises <pre> ne dépassent en largeur. J’ai trouvé ça sur le site de Tyler Longren :

pre {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* 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+ */
}

Ca fonctionne sous FF 3 et IE6. Le comble étant que le reste du site est un encore un peu cassé sous IE6… (soupir)…