diff --git a/docs/_includes/css/code.html b/docs/_includes/css/code.html deleted file mode 100644 index ba2edc1512..0000000000 --- a/docs/_includes/css/code.html +++ /dev/null @@ -1,52 +0,0 @@ -
-

Code

- -

Inline

-

Wrap inline snippets of code with <code>.

-
- For example, <section> should be wrapped as inline. -
-{% highlight html %} -For example, <section> should be wrapped as inline. -{% endhighlight %} - -

User input

-

Use the <kbd> to indicate input that is typically entered via keyboard.

-
- To switch directories, type cd followed by the name of the directory.
- To edit settings, press ctrl + , -
-{% highlight html %} -To switch directories, type cd followed by the name of the directory.
-To edit settings, press ctrl + , -{% endhighlight %} - -

Basic block

-

Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.

-
- 
<p>Sample text here...</p>
-
-{% highlight html %} -
<p>Sample text here...</p>
-{% endhighlight %} - -

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.

-
-

y = mx + b

- -
-{% highlight html %} -y = mx + b -{% endhighlight %} - -

Sample output

-

For indicating blocks sample output from a program use the <samp> tag.

-
-

This text is meant to be treated as sample output from a computer program.

-
-{% highlight html %} -This text is meant to be treated as sample output from a computer program. -{% endhighlight %} -
diff --git a/docs/_includes/css/code.md b/docs/_includes/css/code.md new file mode 100644 index 0000000000..965b4bbc08 --- /dev/null +++ b/docs/_includes/css/code.md @@ -0,0 +1,68 @@ + + +# Code + +Styles for inline code snippets and longer, multiline blocks of code. + + + + + +## Inline code + +Wrap inline snippets of code with `code`. Be sure to escape HTML angle brackets. + +{% example html %} +For example, <section> should be wrapped as inline. +{% endexample %} + + + + + +## User input + +Use the `` to indicate input that is typically entered via keyboard. + +{% example html %} +To switch directories, type cd followed by the name of the directory.
+To edit settings, press ctrl + , +{% endexample %} + + + + + +## Preformatted text + +Or, code blocks. Use `
`s for multiple lines of code. Once again, be sure to escape any angle brackets in the code for proper rendering.
+
+{% example html %}
+
<p>Sample text here...</p>

+{% 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 `` tag.
+
+{% example html %}
+y = mx + b
+{% endexample %}
+
+
+
+
+
+## Sample output
+
+For indicating blocks sample output from a program use the `` tag.
+
+{% example html %}
+This text is meant to be treated as sample output from a computer program.
+{% endexample %}
diff --git a/docs/css.html b/docs/css.html
index 2ede526504..caf77cc52b 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -9,9 +9,9 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
   {% include css/overview.md %}
   {% include css/grid.md %}
   {% include css/type.md %}
+  {% include css/code.md %}
 {% endmarkdown %}
 
-{% include css/code.html %}
 {% include css/tables.html %}
 {% include css/forms.html %}