| commit | author | age | ||
| 83c3f6 | 1 | --- |
| SP | 2 | layout: docs |
| 3 | title: Code | |
| 4 | description: Documentation and examples for displaying inline and multiline blocks of code with Bootstrap. | |
| 5 | group: content | |
| 6 | toc: true | |
| 7 | --- | |
| 8 | ||
| 9 | ## Inline code | |
| 10 | ||
| 11 | Wrap inline snippets of code with `<code>`. Be sure to escape HTML angle brackets. | |
| 12 | ||
| 13 | {% capture example %} | |
| 14 | For example, <code><section></code> should be wrapped as inline. | |
| 15 | {% endcapture %} | |
| 16 | {% include example.html content=example %} | |
| 17 | ||
| 18 | ## Code blocks | |
| 19 | ||
| 20 | Use `<pre>`s for multiple lines of code. Once again, be sure to escape any angle brackets in the code for proper rendering. You may optionally add the `.pre-scrollable` class, which will set a max-height of 340px and provide a y-axis scrollbar. | |
| 21 | ||
| 22 | {% capture example %} | |
| 23 | <pre><code><p>Sample text here...</p> | |
| 24 | <p>And another line of sample text here...</p> | |
| 25 | </code></pre> | |
| 26 | {% endcapture %} | |
| 27 | {% include example.html content=example %} | |
| 28 | ||
| 29 | ## Variables | |
| 30 | ||
| 31 | For indicating variables use the `<var>` tag. | |
| 32 | ||
| 33 | {% capture example %} | |
| 34 | <var>y</var> = <var>m</var><var>x</var> + <var>b</var> | |
| 35 | {% endcapture %} | |
| 36 | {% include example.html content=example %} | |
| 37 | ||
| 38 | ## User input | |
| 39 | ||
| 40 | Use the `<kbd>` to indicate input that is typically entered via keyboard. | |
| 41 | ||
| 42 | {% capture example %} | |
| 43 | To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br> | |
| 44 | To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd> | |
| 45 | {% endcapture %} | |
| 46 | {% include example.html content=example %} | |
| 47 | ||
| 48 | ## Sample output | |
| 49 | ||
| 50 | For indicating sample output from a program use the `<samp>` tag. | |
| 51 | ||
| 52 | {% capture example %} | |
| 53 | <samp>This text is meant to be treated as sample output from a computer program.</samp> | |
| 54 | {% endcapture %} | |
| 55 | {% include example.html content=example %} | |
