]>
Commit | Line | Data |
---|---|---|
91e44d91 S |
1 | --- |
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 | --- | |
7 | ||
8 | Styles for inline code snippets and longer, multiline blocks of code. | |
9 | ||
10 | ## Contents | |
11 | ||
12 | * Will be replaced with the ToC, excluding the "Contents" header | |
13 | {:toc} | |
14 | ||
15 | ## Inline code | |
16 | ||
17 | Wrap inline snippets of code with `<code>`. Be sure to escape HTML angle brackets. | |
18 | ||
19 | {% example html %} | |
20 | For example, <code><section></code> should be wrapped as inline. | |
21 | {% endexample %} | |
22 | ||
23 | ## Code blocks | |
24 | ||
25 | 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 350px and provide a y-axis scrollbar. | |
26 | ||
27 | {% example html %} | |
28 | <pre><code><p>Sample text here...</p> | |
29 | <p>And another line of sample text here...</p> | |
30 | </code></pre> | |
31 | {% endexample %} | |
32 | ||
33 | ## Variables | |
34 | ||
35 | For indicating variables use the `<var>` tag. | |
36 | ||
37 | {% example html %} | |
38 | <var>y</var> = <var>m</var><var>x</var> + <var>b</var> | |
39 | {% endexample %} | |
40 | ||
41 | ## User input | |
42 | ||
43 | Use the `<kbd>` to indicate input that is typically entered via keyboard. | |
44 | ||
45 | {% example html %} | |
46 | To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br> | |
47 | To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd> | |
48 | {% endexample %} | |
49 | ||
50 | ## Sample output | |
51 | ||
52 | For indicating sample output from a program use the `<samp>` tag. | |
53 | ||
54 | {% example html %} | |
55 | <samp>This text is meant to be treated as sample output from a computer program.</samp> | |
56 | {% endexample %} |