Code

Display numbered snippets colored code in code wells for easier readibility and instruction.

Code Wells

Code Wells are rendered with the <pre> element. Google's Prettify package is used to color-code the output. Line numbers are added by default. To remove them, simply remove the linenums class.

Unlike other HTML elements, the <pre> element preserves all spacing exactly as you type it. Note: Code may not render in color until you view the page in live or preview mode.

Pasting HTML Code Inside the <pre> Element
You will need to use the HTML converter on HTML, or other code which uses angle brackets.

// This is sample jQuery code ... Replace with your own code snippet

$( document ).ready(function() {
   $('.navfeatures').addClass('active');
   $('.navcodewells').addClass('active');
});
<pre class="prettyprint linenums">

// Place your code snippet here. Spacing is preserved...

</pre>

HTML Converter

When pasting HTML or any code which uses angle brackets {< and >} into the <pre> element, you must first replace the angle bracket characters with their corresponding HTML entities {&​lt; and &​gt;} to render the code properly. This converter will perform the replacement and surround the code with <pre> tags.