diff options
Diffstat (limited to 'docs/components/code.md')
| -rw-r--r-- | docs/components/code.md | 22 |
1 files changed, 10 insertions, 12 deletions
diff --git a/docs/components/code.md b/docs/components/code.md index 19c02c84e..423987d92 100644 --- a/docs/components/code.md +++ b/docs/components/code.md @@ -13,25 +13,14 @@ Wrap inline snippets of code with `code`. Be sure to escape HTML angle brackets. For example, <code><section></code> should be wrapped as inline. {% endexample %} -## User input - -Use the `<kbd>` to indicate input that is typically entered via keyboard. - -{% example html %} -To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br> -To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd> -{% endexample %} - ## Preformatted text -Or, code blocks. Use `<pre>`s for multiple lines of code. Once again, be sure to escape any angle brackets in the code for proper rendering. +Or, code blocks. 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. {% example html %} <pre><p>Sample text here...</p></pre> {% endexample %} -You may optionally add the `.pre-scrollable` class, which will set a max-height of 350px and provide a y-axis scrollbar. - ## Variables For indicating variables use the `<var>` tag. @@ -40,6 +29,15 @@ For indicating variables use the `<var>` tag. <var>y</var> = <var>m</var><var>x</var> + <var>b</var> {% endexample %} +## User input + +Use the `<kbd>` to indicate input that is typically entered via keyboard. + +{% example html %} +To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br> +To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd> +{% endexample %} + ## Sample output For indicating blocks sample output from a program use the `<samp>` tag. |