• Testing Markdown
  • Formatting & Blocks
    • Inline Formatting & Objects
    • Example Javascript
    • Some more Javascript
    • Tables

Testing Markdown¹

This page is a generic test document, demonstrating what Markdown is capable of. Deviations from the original syntax, using Kramdown / PHP Markdown Extra will be indicated². It is used to verify styling and legibility, using a wide range of stylistic devices.

Formatting & Blocks³

A simple paragraphs illustrated here, and created by using a carriage return/blank line in the source text. A paragraph will generate a standard block-level ‘p’ tag in the output HTML. Bold (‘strong’) and italic (‘em’) effects are created by using single/double underscores (‘_’) or asterisks (‘*’). These can also be combined to create bold italics.

Inline Formatting & Objects⁴

Headings can contain inline formatting too, and (like paragraphs) can also contain inline code.

Headings⁵

Some headings can even have custom ids/anchors, as above. ² Headings may be used to generate a table-of-contents on the page as well.

Ordered List⁶

These are prefixed by numbers in the source document, generating an ‘ol’ tag.

1. The First Item
2. The Second Item
3. The Third Item

Unordered List

These are prefixed by asterisks, pluses or dashes in the source document, generating a ‘ul’ tag.

• A List Item
  • Sub-List Item
  • Sub-List Item
• A List Item
• A List Item

Quotes⁷

Above this quote should be a horizontal line, used to break up the page.

Example Highlighted Javascript follows, but this line is indented code (not highlighted)!

Example Javascript

(function(document) {
	var toggle = document.querySelector(".nav-toggle");
	var navigation = document.querySelector("#nav-container");
	var checkbox = document.querySelector("#nav-display");
	document.addEventListener("click", function(e) {
		var target = e.target;
		if(!checkbox.checked || navigation.contains(target) || (target === checkbox || target === toggle)) return;
		checkbox.checked = false;
	}, false);
})(document);

The code above is highlighted using the Rouge Highlighter, which can be found here: http://rouge.jneen.net/

More Javascript code follows, but this time with line numbers

Some more Javascript

1
2
3
4
5
6
7
8
9
10

(function(document) {
	var toggle = document.querySelector(".nav-toggle");
	var navigation = document.querySelector("#nav-container");
	var checkbox = document.querySelector("#nav-display");
	document.addEventListener("click", function(e) {
		var target = e.target;
		if(!checkbox.checked || navigation.contains(target) || (target === checkbox || target === toggle)) return;
		checkbox.checked = false;
	}, false);
})(document);

Finally, here is some more fenced code!

Tables