Prettify
Mise en surbrillance de syntaxe des extraits de code source dans une page html en utilisant google-code-prettify.
Comment utiliser
- Appliquer
class="wb-prettify"
à un élément sur la page pour charger le composant (une fois par page). - Appliquer
class="prettyprint"
à un élémentpre
oucode
pour appliquer la mise en surbrillance de syntaxe. Comme alternative utiliserclass="wb-prettify all-pre"
pour appliquer la mise en surbrillance de syntaxe à tous les élémentspre
sur la page. - Appliquer
class="linenums"
à un élémentpre
oucode
pour ajouter les nombres de ligne. Comme alternative utiliserclass="wb-prettify linenums"
à tous les élémentspre
applicables. Spécifier le nombre commençant en ajoutantlinenums:#
avantlinenums
. - Ajouter le soutien supplémentaire de langage de programmation avec
class="wb-prettify lang-*"
(p. ex.,class="wb-prettify lang-css"
) et en ajoutantclass="lang-*"
à chaque élémentpre
oucode
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" );
}
});
}
- Date de modification :