---

categories: [Widgets]

layout: page

title: Code

resource: true

url-js-extra: '!URL_COMPONENTS!google-code-prettify/bin/prettify.min.js'

---

<h2>Inline</h2>

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

<h2>User input</h2>

<p>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></p>

<h2>Basic block</h2>

<pre>&lt;p class="my-class"&gt;Sample text here...&lt;/p&gt;</pre>

<h2>Variables</h2>

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

<h2>Sample output</h2>

<samp>This text is meant to be treated as sample output from a computer program.</samp>

<h2>Syntax highlighting with google-code-prettify</h2>

<h3>Basic block</h3>

<pre class="prettyprint">&lt;p class="my-class"&gt;Sample text here...&lt;/p&gt;</pre>

<h3>Larger block with line numbers</h3>

<pre class="prettyprint linenums lang-html">

&lt;!doctype html&gt;

&lt;html lang=&quot;en&quot;&gt;

&lt;head&gt;

&lt;meta charset=&quot;utf-8&quot;&gt;

&lt;title&gt;&lt;/title&gt;

&lt;link rel=&quot;stylesheet&quot; href=&quot;css/style.css&quot;&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;header&gt;&lt;/header&gt;

&lt;div role=&quot;main&quot;&gt;&lt;/div&gt;

&lt;footer&gt;&lt;/footer&gt;

&lt;script src=&quot;js/script.js&quot;&gt;&lt;/script&gt;

&lt;/body&gt;

&lt;/html&gt;

</pre>

<script>

$(document).ready(function(){

prettyPrint();

});

</script>