---
{
	"title": "Prettify",
	"language": "en",
	"category": "Plugins",
	"categoryfile": "plugins",
	"description": "Provides syntax highlighting of source code snippets in an HTML page using google-code-prettify.",
	"altLangPrefix": "prettify",
	"dateModified": "2014-08-04"
}
---
<span class="wb-prettify all-pre hide"></span>

<section>
	<h2>Purpose</h2>
	<p>Provides syntax highlighting of source code snippets in an HTML page.</p>
</section>

<section>
	<h2>Use when</h2>
	<ul>
		<li>Applying syntax highlighting to source code snippets on a web page.</li>
	</ul>
</section>

<section>
	<h2>Working example</h2>
	<p><a href="../../../demos/prettify/prettify-en.html">English example</a></p>
	<p><a href="../../../demos/prettify/prettify-fr.html">French example</a></p>
</section>

<section>
	<h2>How to implement</h2>
	<ol>
		<li>
			Add <code>class="wb-prettify"</code> to an element on the page to load the component (once per page):
			<pre><code>&lt;!-- Load the plugin. Only needed once per page. --&gt;
&lt;span class="wb-prettify"&gt;&lt;/span&gt;</code></pre>
		</li>
		<li>
			Add <code>class="prettyprint"</code> to a pre or code element to apply syntax highlighting. Alternatively use <code>class="wb-prettify all-pre"</code> to apply syntax highlighting to all pre elements on the page:
			<pre><code>&lt;!-- Apply syntax highlighting to this element --&gt;
&lt;pre class="prettyprint"&gt;

&lt;!-- Apply syntax highlighting to all &lt;pre&gt; elements on the page --&gt;
&lt;span class="wb-prettify all-pre"&gt;&lt;/span&gt;</code></pre>
		</li>
		<li>
			Add <code>class="linenums"</code> to a pre or code element to add line numbers. Alternatively use <code>class="wb-prettify linenums"</code> to apply line numbers to all applicable pre and code elements on the page. Specify the starting number by adding <code>linenums:#</code> before the linenums CSS class:
			<pre><code>&lt;!-- Apply syntax highlighting (with line numbers) to this element --&gt;
&lt;pre class="prettyprint linenums"&gt;

&lt;!-- Show line numbers, starting at 50 --&gt;
&lt;pre class="prettyprint linenums:50 linenums"&gt;

&lt;!-- Add line numbers to all &lt;pre&gt; and &lt;code&gt; elements --&gt;
&lt;span class="wb-prettify linenums"&gt;&lt;/span&gt;</code></pre>
		</li>
		<li>Add extra language support by using <code>class="wb-prettify lang-*"</code> and applying <code>class="lang-*"</code> to each applicable pre and code element:
			<pre><code>&lt;!-- Load the plugin with CSS syntax highlighting. --&gt;
&lt;span class="wb-prettify lang-css"&gt;&lt;/span&gt;

&lt;!-- Apply CSS syntax highlighting to this element --&gt;
&lt;pre class="prettyprint lang-css"&gt;</code></pre>

			Supported syntax highlighting formats are:
			<ul>
				<li>lang-apollo</li>
				<li>lang-clj</li>
				<li>lang-css</li>
				<li>lang-dart</li>
				<li>lang-go</li>
				<li>lang-hs</li>
				<li>lang-lisp</li>
				<li>lang-lua</li>
				<li>lang-ml</li>
				<li>lang-n</li>
				<li>lang-proto</li>
				<li>lang-scala</li>
				<li>lang-sql</li>
				<li>lang-tex</li>
				<li>lang-vb</li>
				<li>lang-vhdl</li>
				<li>lang-wiki</li>
				<li>lang-xq</li>
				<li>lang-yaml</li>
			</ul>
		</li>
	</ol>
</section>

<section>
	<h2>Configuration options</h2>
	<p>All configuration options of the plugin are controlled with CSS classes.</p>
	<table class="table">
		<thead>
			<tr>
				<th>Option</th>
				<th>Description</th>
				<th>How to configure</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><code>all-pre</code></td>
				<td>Applies syntax highlighting to all pre elements on the page.</td>
				<td>Add all-pre CSS class to the wb-prettify element.</td>
			</tr>
			<tr>
				<td><code>linenums</code></td>
				<td>Adds line numbers to the syntax highlighting.</td>
				<td>Add linenums CSS class to the wb-prettify or prettyprint element.</td>
			</tr>
			<tr>
				<td><code>linenums:#</code></td>
				<td>Specifies the starting line number (e.g. linenums:20 starts the line numbers at 20). Must be added along with the linenums CSS class.</td>
				<td>Add linenums:# CSS class to a prettyprint element, before the linenums CSS class</td>
			</tr>
			<tr>
				<td><code>lang-*</code></td>
				<td>Specifies language specific syntax highlighting.</td>
				<td>Add lang-* CSS class to the wb-prettify and prettyprint elements.</td>
			</tr>
		</tbody>
	</table>
</section>

<section>
	<h2>Events</h2>
	<p>Document the public events that can be used by implementers or developers.</p>
	<table class="table">
		<thead>
			<tr>
				<th>Event</th>
				<th>Trigger</th>
				<th>What it does</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><code>wb-init.wb-prettify</code></td>
				<td>Triggered manually (e.g., <code>$( ".wb-prettify" ).trigger( "wb-init.wb-prettify" );</code>).</td>
				<td>Initializes the plugin and applies syntax highlighting to the web page's <code>pre</code> and <code>code</code> elements. <strong>Note:</strong> The Prettify plugin will be initialized automatically unless the element is added after the page has already loaded.</td>
			</tr>
			<tr>
				<td><code>wb-ready.wb-prettify</code> (v4.0.5+)</td>
				<td>Triggered automatically after the Prettify enhancement has completed.</td>
				<td>Used to identify when Prettify has finished enhancing the page.
					<pre><code>$( document ).on( "wb-ready.wb-prettify", function( event ) {
});</code></pre>
				</td>
			</tr>
			<tr>
				<td><code>wb-ready.wb</code> (v4.0.5+)</td>
				<td>Triggered automatically when WET has finished loading and executing.</td>
				<td>Used to identify when all WET plugins and polyfills have finished loading and executing.
					<pre><code>$( document ).on( "wb-ready.wb", function( event ) {
});</code></pre>
				</td>
			</tr>
		</tbody>
	</table>
</section>

<section>
	<h2>Source code</h2>
	<p><a href="https://github.com/wet-boew/wet-boew/tree/master/src/plugins/prettify">Prettify source code on GitHub</a></p>
</section>