mardi 4 février 2014

Insérer un bloc de code dans vos articles dans Blogger

Quand on veut mettre du code dans un article dans Blogger, on veut qu'il apparaisse de façon distincte afin de faciliter la lecture.

Et il vaut mieux qu'il apparaisse sans être interprêté, comme du texte. Pour qu'il soit vu comme du texte et non comme du code à être interprêté, on va commencer par remplacer tous les < et > par le code ASCII du caractère:

1. Nettoyer le code:

  • rendez-vous sur la page: SimpleCode 
  • collez le code dans la case Enter Markup
  • cliquez Process
  • copiez le code affiché dans la case Cut 'n Paste
  • tous les < sont remplacés par &lt; et tous les > sont remplacés par &gt;

2. Méthode pre:

C'est la méthode la plus simple et qui convient pour de petits blocs de code.

Passez en mode HTML et insérez votre code entre les tags pre:
<pre>
Code à insérer 
</pre>

Exemple:

/**
     * Constructor: an ID# and two shared resources
     * @param i
     * @param fork1
     * @param fork2
     */
    public Philosopher(int i, Semaphore fork1, Semaphore fork2)
    {
        id = i;
        myFork = fork1;
        myNeighborsFork = fork2;
    }

3. Méthode pre avec style:

Si la méthode pre convient pour de petits blocs, les grands blocs de code sont plus difficiles à sélectionner pour vos lecteurs.

Il est possible de le placer dans un cadre déroulant:
  • ça diminue l'espace occupé dans votre article
  • ça facile la sélection du code par vos lecteurs (cliquer dans le cadre, sélectionner tout avec CTRL+A et copier).

Exemple:

/**
     * Constructor: an ID# and two shared resources
     * @param i
     * @param fork1
     * @param fork2
     */
    public Philosopher(int i, Semaphore fork1, Semaphore fork2)
    {
        id = i;
        myFork = fork1;
        myNeighborsFork = fork2;
    }

Procédure:

Ajoutez le code suivant dans Modèle > Personnaliser > Avancé > Ajouter le fichier CSS:
.scrollCode {
display:block;
height:100px;
overflow:auto;
border:1px solid black; /* optional; just for better visual*/
}
Ce style est maintenant disponible pour tout le blog.

Dans l'article, placez le code en HTML:
<pre class="stylecode">
Insérer le code ici
</pre>

Voilà, j'ai sélectionné les méthodes les plus simples mais il y en a d'autres, par exemple qui permettent de mettre la syntaxe en évidence avec des couleurs et des numéros de ligne mais un peu plus compliquées.