{# -------- STYLEGUIDE SECTION --------- 6. Code ------------------------------------- #} {% include 'styleguide/section/partial/section-heading.html' with { title: '6. Code' } only %} {# -------------------------------------- #} {# -------------------------------------- Inline Code ------------------------------------- #} {% include 'styleguide/section/partial/section-block.html' with { heading: 'Inline Code', description: 'Wrap inline snippets of code with <code>.', exampleCode: '

For example, <section> should be wrapped as inline.

', } only %} {# -------------------------------------- User Input ------------------------------------- #} {% include 'styleguide/section/partial/section-block.html' with { heading: 'User Input', description: 'Use the <kbd> to indicate input that is typically entered via keyboard.', exampleCode: '

To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,

', } only %} {# -------------------------------------- Block ------------------------------------- #} {% include 'styleguide/section/partial/section-block.html' with { heading: 'Block', description: 'Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.', exampleCode: '
<p>Sample text here...</p>
', } only %} {# -------------------------------------- Variables ------------------------------------- #} {% include 'styleguide/section/partial/section-block.html' with { heading: 'Variables', description: 'For indicating variables use the <var> tag.', exampleCode: 'y = mx + b', } only %} {# -------------------------------------- Sample Output ------------------------------------- #} {% include 'styleguide/section/partial/section-block.html' with { heading: 'Sample Output', description: 'For indicating blocks sample output from a program use the <samp> tag.', exampleCode: 'This text is meant to be treated as sample output from a computer program.', } only %}
{# .sg-container #}
{# .sg-section #}