Prettify

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)

  1. #gcwu-date-mod dt,#gcwu-date-mod dd{
  2. float:left;
  3. }
  4. #gcwu-date-mod dd{
  5. margin:0 0 0 10px;
  6. }
  7. #gcwu-content h2,#gcwu-priorities h3{
  8. color:#333;
  9. font-weight:400;
  10. }
  11. #gcwu-content h2,#gcwu-priorities h3{
  12. border:none;
  13. margin-bottom:5px;
  14. font-size:1.6em;
  15. }
  16. div#gcwu-headlines ul li,div#gcwu-headlines ul{
  17. list-style:none !important;
  18. margin:0 !important;
  19. padding:0 !important;
  20. }

JavaScript (uses linenums:15 and linenums)

  1. _pe.fn.prettify = {
  2. type: 'plugin',
  3. depends : ['prettify'],
  4. executed : false,
  5. _exec: function (elm) {
  6. // Make sure only executes once
  7. if (!pe.fn.prettify.executed) {
  8. var opts,
  9. overrides,
  10. pre = $('body').find('pre'),
  11. classes = elm.attr('class').split(' '),
  12. i;
  13. // Load language extensions as needed (called by adding lang-* in class, e.g., lang-css)
  14. for (i = 0; i < classes.length; i += 1) {
  15. if (classes[i].length < 12 && classes[i].indexOf('lang-') === 0) {
  16. pe.add._load([pe.add.liblocation + 'dependencies/prettify/' + classes[i] + pe.suffix + '.js']);
  17. }
  18. }
 

loading