Prettify

Looking for WET v3.1?

WET v4.0 is now the current version. There is a new location for the current page in WET v3.1.

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:
    • 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. 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.
prettyprint.wb-prettify Triggered manually and during plugin initialization. Applies syntax highlighting to the web page's pre and code elements.

Source code

Prettify source code on GitHub

Date modified: