Prettify

Looking for WET v3.1?

As of September 23, 2014, version 3.1 of the Web Experience Toolkit is no longer supported. The source code and documentation have been moved to the wet-boew-legacy repository.

Questions or comments?

Purpose

Provides syntax highlighting of source code snippets in an HTML page.

Use when

Working example

English example

French example

How to implement

  1. Add class="wb-prettify" to an element on the page to load the component (once per page): 
    <!-- Load the plugin.  Only needed once per page. -->
<span class="wb-prettify"></span>
  2. Add 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: 
    <!-- Apply syntax highlighting to this element -->
<pre class="prettyprint">
			
<!-- Apply syntax highlighting to all <pre> elements on the page -->
<span class="wb-prettify all-pre"></span>
  3. Add 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 and code elements on the page. Specify the starting number by adding linenums:# before the linenums CSS class: 
    <!-- Apply syntax highlighting (with line numbers) to this element -->
<pre class="prettyprint linenums">

<!-- Show line numbers, starting at 50 -->
<pre class="prettyprint linenums:50 linenums">

<!-- Add line numbers to all <pre> and <code> elements -->
<span class="wb-prettify linenums"></span>
  4. Add extra language support by using class="wb-prettify lang-*" and applying class="lang-*" to each applicable pre and code element: 
    <!-- Load the plugin with CSS syntax highlighting. -->
<span class="wb-prettify lang-css"></span>

<!-- Apply CSS syntax highlighting to this element -->
<pre class="prettyprint lang-css">
    Supported syntax highlighting formats are:[{htmlmin-lb}]
    • 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

Configuration options

All configuration options of the plugin are controlled with CSS classes.

Option Description How to configure
all-pre Applies syntax highlighting to all pre elements on the page. Add all-pre CSS class to the wb-prettify element.
linenums Adds line numbers to the syntax highlighting. Add linenums CSS class to the wb-prettify or prettyprint element.
linenums:# Specifies the starting line number (e.g. linenums:20 starts the line numbers at 20). Must be added along with the linenums CSS class. Add linenums:# CSS class to a prettyprint element, before the linenums CSS class
lang-* Specifies language specific syntax highlighting. Add lang-* CSS class to the wb-prettify and prettyprint elements.

Events

Document the public events that can be used by implementers or developers.

Event Trigger What it does
wb-init.wb-prettify Triggered manually (e.g., $( ".wb-prettify" ).trigger( "wb-init.wb-prettify" );). Initializes the plugin and applies syntax highlighting to the web page's pre and code elements. Note: The Prettify plugin will be initialized automatically unless the element is added after the page has already loaded.
wb-ready.wb-prettify (v4.0.5+) Triggered automatically after the Prettify enhancement has completed. Used to identify when Prettify has finished enhancing the page. 
$( document ).on( "wb-ready.wb-prettify", function( event ) {
});
wb-ready.wb (v4.0.5+) Triggered automatically when WET has finished loading and executing. Used to identify when all WET plugins and polyfills have finished loading and executing. 
$( document ).on( "wb-ready.wb", function( event ) {
});

Source code

Prettify source code on GitHub

Date modified: