diff options
Diffstat (limited to 'docs/base-css.html')
| -rw-r--r-- | docs/base-css.html | 80 |
1 files changed, 38 insertions, 42 deletions
diff --git a/docs/base-css.html b/docs/base-css.html index 167cb5e69..222b5c81d 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -71,6 +71,7 @@ <div class="subnav"> <ul class="nav pills"> <li><a href="#typography">Typography</a></li> + <li><a href="#code">Code</a></li> <li><a href="#tables">Tables</a></li> <li><a href="#forms">Forms</a></li> <li><a href="#buttons">Buttons</a></li> @@ -343,51 +344,46 @@ </dl> </div> </div><!-- /row --> +</section> - <!-- Code --> - - <h2>Code <small>Inline and block</small></h2> - <table class="table table-bordered table-striped"> - <thead> - <tr> - <th style="width: 190px;">Element</th> - <th>Result</th> - </tr> - </thead> - <tbody> - <tr> - <td><code><code></code></td> - <td>In a line of text like this, your wrapped code will look like this <code><html></code> element.</td> - </tr> - <tr> - <td><code><pre></code></td> - <td> -<pre><div> - <h1>Heading</h1> - <p>Something right here…</p> -</div></pre> - <p><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.</p> - </td> - </tr> - <tr> - <td><code><pre class="prettyprint"></code></td> - <td> - <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> -<pre class="prettyprint"><div> - <h1>Heading</h1> - <p>Something right here…</p> -</div></pre> -<pre class="prettyprint linenums"><div> - <h1>Heading</h1> - <p>Something right here…</p> -</div></pre> - <p><a href="http://code.google.com/p/google-code-prettify/">Download google-code-prettify</a> and view the readme for <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html">how to use</a>.</p> - </td> - </tr> - </tbody> - </table> +<!-- Code +================================================== --> +<section id="code"> + <div class="page-header"> + <h1>Code <small>Inline and block code snippets</small></h1> + </div> + <div class="row"> + <div class="span4"> + <h2>Inline</h2> + <p>Wrap inline snippets of code with <code><code></code>.</p> +<pre class="prettyprint linenums"> +For example, <code>section</code> should be wrapped as inline. +</pre> + </div><!--/span--> + <div class="span4"> + <h2>Basic block</h2> + <p>Use <code><pre></code> for multiple lines of code. Be sure to turn any carets into their unicode characters for proper rendering.</p> +<pre class="prettyprint linenums" style="margin-bottom: 9px;"> +<pre> + &lt;p&gt;Sample text here...&lt;/p&gt; +</pre> +</pre> + <p><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.</p> + </div><!--/span--> + <div class="span4"> + <h2>Google Prettify</h2> + <p>Take the same <code><pre></code> element and add two optional classes for enhanced rendering.</p> +<pre class="prettyprint linenums" style="margin-bottom: 9px;"> +<pre class="prettyprint + linenums"> + &lt;p&gt;Sample text here...&lt;/p&gt; +</pre> +</pre> + <p><a href="http://code.google.com/p/google-code-prettify/">Download google-code-prettify</a> and view the readme for <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html">how to use</a>.</p> + </div><!--/span--> + </div><!--/row--> </section> |