- Skip to main content
- Skip to footer

# Prettify

- Documentation
- Questions or comments?

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

## How to use

1. Apply `class="wet-boew-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="wet-boew-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="wet-boew-prettify linenums"` to all applicable `pre` elements. Specify the starting number by adding `linenums:#` before `linenums`.
4. Add extra language support by using `class="wet-boew-prettify lang-*"` (e.g., `class="wet-boew-prettify lang-css"`) and applying `class="lang-*"` to each applicable `pre` or `code` 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:
  2013-04-11