static/scss/bootstrap-4.0.0-alpha.6/docs/content/code.md

   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>&lt;section&gt;</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>&lt;p&gt;Sample text here...&lt;/p&gt;
  29 &lt;p&gt;And another line of sample text here...&lt;/p&gt;
  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 %}