# Prettify

- Documentation
- Questions ou commentaires?

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() + ".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" );
    		}
    	});
    }

Date de modification :
  2014-02-19