Prettify

Vous cherchez la BOEW v3.1?

À partir du 23 septembre 2014, la version 3.1 de la Boîte à outils de l'expérience Web n'est plus supportée. Le code source et la documentation ont été déplacés vers le dépôt wet-boew-legacy.

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 :[{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

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 :