Code

Inline

Wrap inline snippets of code with <code>.

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

= 'For example, '
code &lt;section&gt;
= ' should be wrapped as inline.'

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Block

Use <pre> for multiple lines of code.

<h1>Sample heading here...</h1>

<h1>Sample heading here...</h1>
<p>Sample content here...</p>

pre
  code
    | &lt;h1&gt;Sample heading here...&lt;/h1&gt;

pre
  code
    | &lt;h1&gt;Sample heading here...&lt;/h1&gt;
      &lt;p&gt;Sample content here...&lt;/p&gt;

<pre><code>&lt;h1&gt;Sample heading here...&lt;/h1&gt;</code></pre><pre><code>&lt;h1&gt;Sample heading here...&lt;/h1&gt;
&lt;p&gt;Sample content here...&lt;/p&gt;</code></pre>

Selectable

For showing a code snippet which is selected automatically on clicking, add .code-snippet to a <input type="text"> or <textarea> element.

Don't forget to add readonly attribute and onclick="this.select()".

<h1>Sample heading here...</h1>
<p>Sample content here...</p>

input.code-snippet type="text" readonly="readonly" value="<h1>Sample heading here...</h1>" onclick="this.select()"

textarea.code-snippet readonly="readonly" onclick="this.select()"
  | &lt;h1&gt;Sample heading here...&lt;/h1&gt;
    &lt;p&gt;Sample content here...&lt;/p&gt;

<input class="code-snippet" type="text" readonly="readonly" value="&lt;h1&gt;Sample heading here...&lt;/h1&gt;" onclick="this.select()" /><textarea class="code-snippet" readonly="readonly" onclick="this.select()">&lt;h1&gt;Sample heading here...&lt;/h1&gt;
&lt;p&gt;Sample content here...&lt;/p&gt;</textarea>

Syntax highlight

wip