- Skip to main content
- Skip to "About this site"

# Prettify

Questions or comments?

## Purpose

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

## Use when

- Applying syntax highlighting to source code snippets on a web page.

## 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:
   - 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:
  2014-08-04