- Passer au contenu principal
- Passer à « À propos de ce site »

# Prettify

Questions ou commentaires?

## But

Affiche de la syntaxe des extraits de code source.

Needs translation

## Use when

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

## Exemple pratique

Exemple en anglais

Exemple en français

## Comment mettre en œuvre

1. Appliquer `class="wb-prettify"` à un élément sur la page pour charger le composant (une fois par page) :

       <span class="wb-prettify"></span>

2. Appliquer `class="prettyprint"` à un élément pre ou code pour appliquer la mise en surbrillance de syntaxe. Comme alternative utiliser `class="wb-prettify all-pre"` pour appliquer la mise en surbrillance de syntaxe à tous les éléments pre sur la page :

       <pre class="prettyprint">

       <!-- Appliquer la mise en surbrillance de syntaxe à tous les éléments pre sur la page -->
       <span class="wb-prettify all-pre"></span>

3. Appliquer `class="linenums"` à un élément pre ou code pour ajouter les nombres de ligne. Comme alternative utiliser `class="wb-prettify linenums"` pour ajouter les nombres de ligne à tous les éléments pre applicables. Spécifier le nombre commençant en ajoutant `linenums:#` avant linenums :

       <pre class="prettyprint linenums">

       <!-- Spécifier le nombre commençant -->
       <pre class="prettyprint linenums:50 linenums">

       <!-- Ajouter les nombres de ligne à tous les éléments pre applicables -->
       <span class="wb-prettify linenums"></span>

4. Ajouter le soutien supplémentaire de langage de programmation avec `class="wb-prettify lang-*"` et en ajoutant `class="lang-*"` à chaque élément pre ou code applicable :

       <span class="wb-prettify lang-css"></span>
       <pre class="prettyprint lang-css">

   Les formats supportés sont ci-dessous :
   - 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

Needs translation

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