Prettify

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 (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: