Présentation
Par défaut, un bloc de code (ici Java) se présente sous la forme suivante :
/**
* Method definition
*/
public String getSampleValue(MyObject object, String parameter) {
// Specific comment
return object.execute(parameter, "test", true);
}
La colorisation syntaxique pour le même bloc de code facilite l'identification des différents éléments (classes, attributs, constantes, commentaires) :
/**
* Method definition
*/
public String getSampleValue(MyObject object, String parameter) {
// Specific comment
return object.execute(parameter, "test", true);
}
Les numéros de lignes peuvent être ajoutés, avec la possibilité de préciser le numéro de départ :
/**
* Method definition
*/
public String getSampleValue(MyObject object, String parameter) {
// Specific comment
return object.execute(parameter, "test", true);
}
La librairie google-code-prettify fonctionne tout aussi bien avec de nombreux langages tels que XML :
<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd"> <!-- an extract from a sitemap --> <url> <loc>http://www.antoinehedin.com/</loc> <changefreq>daily</changefreq> </url> </urlset>
Ou HTML :
<div id="#publication"> <span class="title">My title</span> <div class="detail">My comment</div> </div>
Ou bien encore CSS :
#publication {
display: inline-block;
float: left;
width: 100%;
margin-top: 12px;
}
#publication .detail {
color: #000000;
border: 1px solid #888888;
padding: 2px;
}
Mise en œuvre
Il suffit, dans le bloc <head> de la page hébergeant le code à formater, d'ajouter la ligne suivante :
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
Il ne reste alors qu'à associer au bloc <pre> ou <code> souhaité la classe css "prettyprint" :
<pre class="prettyprint"> le code à formater... </pre>
L'ajout des numéros de lignes s'effectue en complétant la classe "prettyprint" par la classe "linenums" :
<pre class="prettyprint linenums"> le code à formater... </pre>
En suffixant la classe "linenums" par ":" et un nombre, la numérotation des lignes débute au nombre spécifié (4 dans l'exemple suivant) :
<pre class="prettyprint linenums:4"> le code à formater... </pre>
Remarque
Par défaut, seuls les numéros multiples de 5 figurent sur la gauche du code dont on souhaite numéroter les lignes. Ce comportement peut être contourné au profit d'une numérotation de toutes les lignes en personnalisant les styles css associés.
Dans l'exemple figurant plus haut dans le présent article, la numérotation complète des lignes a été obtenue en ajoutant les styles suivants à une des feuilles de styles référencées dans la page :
li.L0, li.L1, li.L2, li.L3, li.L4,
li.L5, li.L6, li.L7, li.L8, li.L9 {
list-style-type: decimal !important
}
Référence
Pour télécharger la librairie, (code javascript et styles css) ou pour personnaliser de manière plus poussée l'affichage de votre code, vous pouvez vous référer au lien https://github.com/google/code-prettify.