jeudi 22 décembre 2016

Extraits de code avec coloration syntaxique dans Blogger

Code-prettify est une librairie permettant d'afficher des extraits de code avec coloration syntaxique.

Installation

Aller dans Modèle →Modifier le code HTML et insérer avant la balise </head> la ligne suivante :
<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sons-of-obsidian'></script>
L'attribut skin permet de choisir l'apparence (voir les différents thèmes)

Pour avoir une scrollbar lorsque le texte est trop long, il faut ajouter, toujours avant la balise </head>, le bloc de code css suivant :
<style>
pre.prettyprint{
  width: auto;
  overflow: auto;
  max-height: 600px;
}
</style>

Utilisation 

Dans l'onglet de redaction html utliser ensuite la balise <pre> avec la classe prettyprint.

On peut préciser le langage en ajoutant la classe lang- suivit du langage ("bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html","java", "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh","xhtml", "xml", "xsl".)

Il est aussi possible d'afficher les numéros de ligne en ajoutant la classe linenums

exemples

<pre class="prettyprint lang-java linenums">public static double arrondi(double A, int B) {
  return (double) ( (int) (A * Math.pow(10, B) + .5)) / Math.pow(10, B);
}</pre>

Donne  :
public static double arrondi(double A, int B) {
  return (double) ( (int) (A * Math.pow(10, B) + .5)) / Math.pow(10, B);
}

Avec <pre class="prettyprint lang-bsh"> :
toto@pc_toto:~$ ps aux
USER       PID %CPU %MEM    VSZ   RSS TTY      STAT START   TIME COMMAND
root         1  0.0  0.0  34028  3336 ?        Ss   déc.20   0:01 /sbin/init
root         2  0.0  0.0      0     0 ?        S    déc.20   0:00 [kthreadd]
root         3  0.0  0.0      0     0 ?        S    déc.20   0:00 [ksoftirqd/0]
root         5  0.0  0.0      0     0 ?        S<   déc.20   0:00 [kworker/0:0H