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 {<
and >
} to render the code properly. This converter will perform the replacement and surround the code with <pre>
tags.