Government of Canada / Gouvernement du Canada

Search

Prettify

Syntax highlighting of source code snippets in an html page using google-code-prettify.

How to use

  1. Apply class="wb-prettify" to an element on the page to load the component (once per page).
  2. Apply class="prettyprint" to a pre or code element to apply syntax highlighting. Alternatively use class="wb-prettify all-pre" to apply syntax highlighting to all pre elements on the page.
  3. Apply class="linenums" to a pre or code element to add line numbers. Alternatively use class="wb-prettify linenums" to apply line numbers to all applicable pre elements on the page. Specify the starting number by adding linenums:# before linenums.
  4. Add extra language support by using class="wb-prettify lang-*" (e.g., class="wb-prettify lang-css") and applying class="lang-*" to each applicable pre or code element. Supported formats are below:
    • 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

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:50 and 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 overrides 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" );	}	}); }

Before and after comparison

Before

	<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>

After

	<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>

Page details

Date modified: