<p>Using the google-code-prettify library, your blocks of code get a slightly different visual style and automatic syntax highlighting. You can also add an additional class to add line numbers.</p>
<preclass="prettyprint"><div>
<h1>Heading</h1>
<p>Something right here…</p>
</div></pre>
<preclass="prettyprint linenums"><div>
<h1>Heading</h1>
<p>Something right here…</p>
</div></pre>
<p><ahref="http://code.google.com/p/google-code-prettify/">Download google-code-prettify</a> and view the readme for <ahref="http://google-code-prettify.googlecode.com/svn/trunk/README.html">how to use</a>.</p>
&lt;p&gt;Sample text here...&lt;/p&gt;
</pre>
</pre>
<p><ahref="http://code.google.com/p/google-code-prettify/">Download google-code-prettify</a> and view the readme for <ahref="http://google-code-prettify.googlecode.com/svn/trunk/README.html">how to use</a>.</p>
<h2>{{_i}}Code <small>Inline and block</small>{{/i}}</h2>
<tableclass="table table-bordered table-striped">
<thead>
<tr>
<thstyle="width: 190px;">{{_i}}Element{{/i}}</th>
<th>{{_i}}Result{{/i}}</th>
</tr>
</thead>
<tbody>
<tr>
<td><code><code></code></td>
<td>{{_i}}In a line of text like this, your wrapped code will look like this <code><html></code> element.{{/i}}</td>
</tr>
<tr>
<td><code><pre></code></td>
<td>
<pre><div>
<h1>{{_i}}Heading{{/i}}</h1>
<p>{{_i}}Something right here…{{/i}}</p>
</div></pre>
<p>{{_i}}<strong>Note:</strong> Be sure to keep code within <code><pre></code> tags as close to the left as possible; it will render all tabs.{{/i}}</p>
<p>{{_i}}Using the google-code-prettify library, your blocks of code get a slightly different visual style and automatic syntax highlighting. You can also add an additional class to add line numbers.{{/i}}</p>
<preclass="prettyprint"><div>
<h1>{{_i}}Heading{{/i}}</h1>
<p>{{_i}}Something right here…{{/i}}</p>
</div></pre>
<preclass="prettyprint linenums"><div>
<h1>{{_i}}Heading{{/i}}</h1>
<p>{{_i}}Something right here…{{/i}}</p>
</div></pre>
<p>{{_i}}<ahref="http://code.google.com/p/google-code-prettify/">Download google-code-prettify</a> and view the readme for <ahref="http://google-code-prettify.googlecode.com/svn/trunk/README.html">how to use</a>.{{/i}}</p>
<h1>{{_i}}Code{{/i}}<small>{{_i}}Inline and block code snippets{{/i}}</small></h1>
</div>
<divclass="row">
<divclass="span4">
<h2>Inline</h2>
<p>Wrap inline snippets of code with <code><code></code>.</p>
<preclass="prettyprint linenums">
{{_i}}For example, <code>section</code> should be wrapped as inline.{{/i}}
</pre>
</div><!--/span-->
<divclass="span4">
<h2>Basic block</h2>
<p>{{_i}}Use <code><pre></code> for multiple lines of code. Be sure to turn any carets into their unicode characters for proper rendering.{{/i}}</p>
&lt;p&gt;{{_i}}Sample text here...{{/i}}&lt;/p&gt;
</pre>
</pre>
<p>{{_i}}<strong>Note:</strong> Be sure to keep code within <code><pre></code> tags as close to the left as possible; it will render all tabs.{{/i}}</p>
</div><!--/span-->
<divclass="span4">
<h2>Google Prettify</h2>
<p>Take the same <code><pre></code> element and add two optional classes for enhanced rendering.</p>
&lt;p&gt;{{_i}}Sample text here...{{/i}}&lt;/p&gt;
</pre>
</pre>
<p>{{_i}}<ahref="http://code.google.com/p/google-code-prettify/">Download google-code-prettify</a> and view the readme for <ahref="http://google-code-prettify.googlecode.com/svn/trunk/README.html">how to use</a>.{{/i}}</p>
