Mots-clé : pre

google code prettify – prettyprint : les codes possibles

Pour rappel rapide, l’utilisation est extrêmement simple : un simple include JavaScript de google code prettifier (je vous laisse le chercher et le faire), puis l’utilisation : au lieu d’écrire de simples balises <code></code> ou <pre></pre>, ajoutez-y la classe prettyprint comme ceci :
<code class="prettyprint">Mon code</code>

Et vous passerez d’un code tel que :
alert("Bonjour");
…à :
alert("Bonjour");

Mais le seul hic c’est que le JavaScript de google « essaie » de deviner ce qu’il y a entre dans le code pour le mettre en couleur. Parfois il ne trouve pas et donc ne colore pas la syntaxe, ou pire, il se trompe (sur de très courts morceaux de code c’est normal). Il vous suffit de préciser de quel type de code il s’agit.

  • Exemple avec du JavaScript :
    <pre class="prettyprint lang-js">var t=12;</pre>
    Ce qui donnne  

    var t=12;
  • Exemple avec du Shell :
    <pre class="prettyprint lang-sh">echo "$MAVAR ok"</pre>
    Ce qui donnne  

    echo "$MAVAR ok"

Voici tous les codes qu’il est possible d’utiliser si jamais vous utilisez le google code prettifier

  • lang-c
  • lang-cc
  • lang-coffee
  • lang-cs
  • lang-css
  • lang-el
  • lang-erlang
  • lang-go
  • lang-hs
  • lang-html
  • lang-java
  • lang-js
  • lang-lua
  • lang-ml
  • lang-proto
  • lang-py
  • lang-scala
  • lang-sh
  • lang-sql
  • lang-vb
  • lang-vhdl
  • lang-wiki
  • lang-yaml

HTML : tags <pre> / <code> : comment forcer retour à la ligne

Voici une astuce : vous avec une page qui s’affiche parfaitement, avec plein de choses, à part un petit détail plutôt gênant : vous avez des lignes de code qui « débordent » et lorsque vous voulez imprimer, comme, justement, ça déborde, vous n’avez pas le code en entier.

Il vous suffit de mettre ce code en dernier dans le css (afin qu’il « écrase » toutes les configurations précedentes des retour-chariot) :


pre, code {
 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+ */
}

Et voilà, vous pourrez imprimer votre document tranquillement, tout le code sera affiché.
Cet article fait suite à une question que j’ai posée sur stackoverflow.com. Cette dernière avait déjà été posée, et la réponse était valide : le lien est ici. Et la solution, carrément à la source, est ici.