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="wb-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="wb-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="wb-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="wb-prettify lang-*" (p. ex., class="wb-prettify lang-css") et en ajoutant class="lang-*" à chaque élément pre ou code applicable. Les formats supportés sont ci-dessous:
    • lang-apollo
    • lang-clj
    • lang-css
    • lang-dart
    • lang-go
    • lang-hs
    • lang-lisp
    • lang-lua
    • lang-ml
    • lang-n
    • lang-proto
    • lang-scala
    • lang-sql
    • lang-tex
    • lang-vb
    • lang-vhdl
    • lang-wiki
    • lang-xq
    • lang-yaml

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:50 et linenums)

/**
 * Initialize the plugin. This only runs once on the DOM.
 * @function init
 */
init = function() {
	var cssClass, cssClasses, i, len, $pre,
		$elm = $( this ),
		modeJS = wb.getMode() + ".min.js",
		deps = [ "site!deps/prettify" + modeJS ],
		settings = $.extend( {}, defaults, $elm.data() );

	wb.remove( selector );

	// Check the element for `lang-*` syntax CSS classes
	cssClasses = typeof $elm[0].className === "string" ? $elm[0].className.split( " " ) : [];
	for ( i = 0, len = cssClasses.length; i < len; i++ ) {
		cssClass = cssClasses[ i ];
		if ( cssClass.indexOf( "lang-" ) === 0 ) {
			deps.push( "site!deps/" + cssClass + modeJS );
		}
	}

	// CSS class overides of settings
	settings.allpre = settings.allpre || $elm.hasClass( "all-pre" );
	settings.linenums = settings.linenums || $elm.hasClass( "linenums" );

	// Apply global settings
	if ( settings.allpre || settings.linenums ) {
		$pre = $( "pre" );
		if ( settings.allpre ) {
			$pre.addClass( "prettyprint" );
		}
		if ( settings.linenums ) {
			$pre.filter( ".prettyprint" ).addClass( "linenums" );
		}
	}

	// Load the required dependencies and prettify the code once finished
	Modernizr.load({
		load: deps,
		complete: function() {
			wb.doc.trigger( "prettyprint.wb-prettify" );
		}
	});
}

Comparaison avant/après

Avant

<section id="wb-srch" class="col-lg-8 text-right">
	<h2>Search</h2>
	<form action="#" method="post" name="cse-search-box" role="search" class="form-inline">
		<div class="form-group">
			<label for="wb-srch-q" class="wb-inv">Search Canada.ca</label>
			<input id="wb-srch-q" list="wb-srch-q-ac" class="wb-srch-q form-control" name="q" type="search" value="" size="34" maxlength="170" placeholder="Search Canada.ca">
			<datalist id="wb-srch-q-ac"></datalist>
		</div>
		<div class="form-group submit">
			<button type="submit" id="wb-srch-sub" class="btn btn-primary btn-small" name="wb-srch-sub">
				<span class="glyphicon-search glyphicon"></span>
				<span class="wb-inv">Search</span>
			</button>
		</div>
	</form>
</section>

Après

<section id="wb-srch" class="col-lg-offset-4 col-md-offset-4 col-sm-offset-2 col-xs-12 col-sm-5 col-md-4">
	<h2>Search</h2>
	<form action="#" method="post" name="cse-search-box" role="search">
		<div class="form-group wb-srch-qry">
			<label for="wb-srch-q" class="wb-inv">Search Canada.ca</label>
			<input id="wb-srch-q" list="wb-srch-q-ac" class="wb-srch-q form-control" name="q" type="search" value="" size="34" maxlength="170" placeholder="Search Canada.ca">
			<datalist id="wb-srch-q-ac"></datalist>
		</div>
		<div class="form-group submit">
			<button type="submit" id="wb-srch-sub" class="btn btn-primary btn-small" name="wb-srch-sub">
				<span class="glyphicon-search glyphicon"></span>
				<span class="wb-inv">Search</span></button>
		</div>
	</form>
</section>
Date de modification :