Prettify

Mise en surbrillance de syntaxe des extraits de code source dans une page html en utilisant google-code-prettify.

Comment utiliser

  1. Appliquer class="wet-boew-prettify" à un élément sur la page pour charger le composant (une fois par page).
  2. Appliquer class="prettyprint" à un élément pre ou code pour appliquer la mise en surbrillance de syntaxe. Comme alternative utiliser class="wet-boew-prettify all-pre" pour appliquer la mise en surbrillance de syntaxe à tous les éléments pre sur la page.
  3. Appliquer class="linenums" à un élément pre ou code pour ajouter les nombres de ligne. Comme alternative utiliser class="wet-boew-prettify linenums" à tous les éléments pre applicables. Spécifier le nombre commençant en ajoutant linenums:# avant linenums.
  4. Ajouter le soutien supplémentaire de langage de programmation avec class="wet-boew-prettify lang-*" (p. ex., class="wet-boew-prettify lang-css") et en ajoutant class="lang-*" à chaque élément pre ou code applicable.

Exemples

HTML

<form action="#" method="post">
	<div>
		<label for="data1">Formulaire - Entrée - apparence par défaut :</label>
		<input name="data1" type="text" id="data1" />
	</div>
	<div>
		<label for="data2">Formulaire - Zone texte - apparence par défaut :</label>
		<textarea name="data2" cols="15" rows="3" id="data2"></textarea>
	</div>
	<div>
		<label for="data4">Formulaire - Sélection - apparence par défaut :</label>
		<select id="data4" name="data4">
			<option value="Option 1">Option 1</option>
			<option value="Option 2">Option 2</option>
			<option value="Option 3">Option 3</option>
			<option value="Option 4">Option 4</option>
		</select>
	</div>
	<fieldset>
		<legend>Formulaire - <code lang="en">legend</code>, <code lang="en">fieldset</code> et case à cocher - apparence par défaut</legend>
		<div>
			<input name="checkbox" type="checkbox" id="data5" value="checkbox" /> <label for="data5">Option 1</label>  
			<input name="checkbox" type="checkbox" id="data6" value="checkbox" /> <label for="data6">Option 2</label>  
			<input name="checkbox" type="checkbox" id="data7" value="checkbox" /> <label for="data7">Option 3</label>  
			<input name="checkbox" type="checkbox" id="data8" value="checkbox" /> <label for="data8">Option 4</label>
		</div>
	</fieldset>
	<div>
		<input name="submit" type="submit" id="submit" value="Soumettre - apparence par défaut" />
		<input name="reset" type="reset" id="reset" value="Réinitialiser - apparence par défaut" />
	</div>
</form>

CSS (utilise linenums)

#gcwu-date-mod dt,#gcwu-date-mod dd{
	float:left;
}

#gcwu-date-mod dd{
	margin:0 0 0 10px;
}

#gcwu-content h2,#gcwu-priorities h3{
	color:#333;
	font-weight:400;
}

#gcwu-content h2,#gcwu-priorities h3{
	border:none;
	margin-bottom:5px;
	font-size:1.6em;
}

div#gcwu-headlines ul li,div#gcwu-headlines ul{
	list-style:none !important;
	margin:0 !important;
	padding:0 !important;
}

JavaScript (utilise linenums:15 et linenums)

_pe.fn.prettify = {
	type: 'plugin',
	depends : ['prettify'],
	executed : false,
	_exec: function (elm) {
		// Make sure only executes once
		if (!pe.fn.prettify.executed) {
			var opts,
				overrides,
				pre = $('body').find('pre'),
				classes = elm.attr('class').split(' '),
				i;

			// Load language extensions as needed (called by adding lang-* in class, e.g., lang-css)
			for (i = 0; i < classes.length; i += 1) {
				if (classes[i].length < 12 && classes[i].indexOf('lang-') === 0) {
					pe.add._load([pe.add.liblocation + 'dependencies/prettify/' + classes[i] + pe.suffix + '.js']);
				}
			}