HTMLmini

# I'm a comment, no one notices me!
# This region contains the MINIhtml source
# The region on the right contains the compiled HTML 
# The region below previews that HTML

h2|HTMLmini Sandbox
hr
p
	' Welcome to the HTMLmini sandbox!'
	' HTML mini is a concise language that expands into HTML.'
	' It is inspired by the likes of '
	a[href'http://docs.emmet.io/']|emmet
	' and '
	a[href'http://haml.info/']|haml
	' but focuses on preserving the HTML format while still'
	' reducing the number of characters you have to type.'
	' MINIhtml doesn\'t offer any crazy preprocessing options,'
	' just a simple one-to-one translation to HTML.'
p
pre
	code|'

<div><p>Including escaping HTML!</p></div>
'
p
	'Why is HTMLmini awesome?'
	ul
		li|'It\'s lightweight'
		li|'It still looks like the HTML it creates'
		li|'It\'ll hyou a whole lot of key strokes'
h3|Quick Reference
table
	thead
		tr
			th|Description
			th|Source
			th|Output
	tbody
		tr
			td|Create a new element
			td.source|'div'
			td.source|'<div></div>'
		tr
			td|Setting ids
			td.source|'#my-id'
			td|'<div id="my-id"></div>'
		tr
			td|Setting classes
			td.source|'.class1.class2'
			td|'<div class="class1 class2"></div>'
		tr
			td|Setting attributes
			td.source|'[type\'my-type\'disabled]'
			td.source|'<div type="my-type" disabled></div>'
		tr
			td|Setting text
			td.source|'p|Hello World'
			td.source|'<p>Hello World</p>'
		tr
			td|Setting text with a string
			td.source|'"All the characters!@#$%"'
			td.source|'All the characters!@#$%'