Wrap inline snippets of code with <code>
. Be sure to escape HTML angle brackets.
For example, <section>
should be wrapped as inline.
For example, <code><section></code> should be wrapped as inline.
We use <pre>
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 .-scrollable
modifier, which will set a max-height and provide a y-axis scrollbar.
<p>Sample text here...</p>
<p>And another line of sample text here...</p>
<pre>
<code>
<p>Sample text here...</p>
<p>And another line of sample text here...</p>
</code>
</pre>
For indicating variables use the HTML5 <var>
tag.
y = mx + b
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
You can 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 + ,
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>
You can use the <samp>
for indicating sample output from a program.
This text is meant to be treated as sample output from a computer program.
<samp>This text is meant to be treated as sample output from a computer program.</samp>
Here you can find a list of the Sass variables you can use for code elements. If you're looking to find common variables that these rely on, you should take a look at the Sass Variables page.
$mark-padding0.2rem 0.4rem
$mark-color
$color-gray-80
$mark-background-color
#fcf8e3
$code-font-size
90%
$code-padding
0.15rem 0.4rem
$code-color
#bd4147
$code-background
$color-gray-10
$code-color-dark
#ff6d6b
$code-background-dark
lighten($color-gray-80, 5%)
$kbd-font-size
$code-font-size
$kbd-box-shadow
inset 0 -0.1rem 0 rgba(0, 0, 0, 0.25)
$kbd-nested-font-weight
$font-weight-bold
$kbd-color
$color-white
$kbd-background
$color-gray-90
$kbd-padding
$code-padding
$pre-font-size
$code-font-size
$pre-color
$color-gray-90
$pre-color-dark
$color-white
$pre-scrollable-max-height
340px