Prettify
Syntax highlighting of source code snippets in an html page using google-code-prettify.
How to use
- Apply
class="wet-boew-prettify"
to an element on the page to load the component (once per page). - Apply
class="prettyprint"
to apre
orcode
element to apply syntax highlighting. Alternatively useclass="wet-boew-prettify all-pre"
to apply syntax highlighting to allpre
elements on the page. - Apply
class="linenums"
to apre
orcode
element to add line numbers. Alternatively useclass="wet-boew-prettify linenums"
to all applicablepre
elements. Specify the starting number by addinglinenums:#
beforelinenums
. - Add extra language support by using
class="wet-boew-prettify lang-*"
(e.g.,class="wet-boew-prettify lang-css"
) and applyingclass="lang-*"
to each applicablepre
orcode
element.
Examples
HTML
<form action="#" method="post">
<div>
<label for="data1">Form input default appearance:</label>
<input name="data1" type="text" id="data1" />
</div>
<div>
<label for="data2">Form text area default appearance:</label>
<textarea name="data2" cols="15" rows="3" id="data2"></textarea>
</div>
<div>
<label for="data4">Form <code>select</code> default appearance:</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>Form <code>legend</code>, <code>fieldset</code> and <code>checkbox</code> default appearance</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="Submit default appearance" />
<input name="reset" type="reset" id="reset" value="Reset default appearance" />
</div>
</form>
CSS (uses 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 (uses linenums:15 and 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']);
}
}
- Date modified: