| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Foo</title> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> | |
| <style type='text/css'> | |
| </style> | |
| <script type='text/javascript'> | |
| window.onload = function() { | |
| var s = document.getElementsByTagName('div'), cur = 0; | |
| if (!s) return; | |
| function go(n) { | |
| cur = n; | |
| var i = 1e3, e = s[n]; | |
| for (var k = 0; k < s.length; k++) s[k].style.display = 'none'; | |
| e.style.display = 'inline-block'; | |
| e.style.fontSize = i + 'px'; | |
| if (e.firstChild.nodeName === 'IMG') { | |
| document.body.style.backgroundImage = 'url(' + e.firstChild.src + ')'; | |
| e.firstChild.style.display = 'none'; | |
| } else { | |
| document.body.style.backgroundImage = ''; | |
| document.body.style.backgroundColor = e.style.backgroundColor; | |
| } | |
| while ( | |
| e.offsetWidth > window.innerWidth || | |
| e.offsetHeight > window.innerHeight) { | |
| e.style.fontSize = (i -= 10) + 'px'; | |
| if (i < 0) break; | |
| } | |
| e.style.marginTop = ((window.innerHeight - e.offsetHeight) / 2) + 'px'; | |
| if (window.location.hash !== n) window.location.hash = n; | |
| document.title = e.textContent || e.innerText; | |
| } | |
| document.onclick = function() { | |
| go(++cur % (s.length)); | |
| }; | |
| document.onkeydown = function(e) { | |
| (e.which === 39) && go(Math.min(s.length - 1, ++cur)); | |
| (e.which === 37) && go(Math.max(0, --cur)); | |
| }; | |
| function parse_hash() { | |
| return Math.max(Math.min( | |
| s.length - 1, | |
| parseInt(window.location.hash.substring(1), 10)), 0); | |
| } | |
| if (window.location.hash) cur = parse_hash() || cur; | |
| window.onhashchange = function() { | |
| var c = parse_hash(); | |
| if (c !== cur) go(c); | |
| }; | |
| go(cur); | |
| }; | |
| </script></head><body> | |
| <div><h2>markdown:</h2> | |
| <h3>the WYSIWYG alternative</h3> | |
| </div> | |
| <div><p>get excited... this is a talk about plain text!</p> | |
| </div> | |
| <div><h2>markup:</h2> | |
| <p>\<p>This is some text</p></p> | |
| </div> | |
| <div><h2>about markdown</h2> | |
| <ul> | |
| <li>Created by John Gruber in <strong>2004</strong></li> | |
| <li>Wiki-like markup</li> | |
| <li>easy-to-read </li> | |
| <li>easy-to-write </li> | |
| <li>plain text</li> | |
| </ul> | |
| </div> | |
| <div><h2>turns it into html</h2> | |
| </div> | |
| <div><h2>baked into lots of tools</h2> | |
| <ul> | |
| <li>Drupal</li> | |
| <li>WordPress</li> | |
| <li>Trello</li> | |
| <li>Github</li> | |
| <li><a href="http://macwright.org/biggie/">Biggie</a>*</li> | |
| <li>Mou</li> | |
| </ul> | |
| </div> | |
| <div><h2>Why it's cool</h2> | |
| <ul> | |
| <li>No guessing games</li> | |
| <li>Intuitive markup</li> | |
| <li>Ubiquitous</li> | |
| <li>It's free</li> | |
| </ul> | |
| </div> | |
| <div><h2>What I use it for</h2> | |
| <ul> | |
| <li>Pretty Documentation</li> | |
| <li>Writing blog posts or html pages</li> | |
| <li>Creating presentations</li> | |
| </ul> | |
| </div> |
get excited... this is a talk about plain text!
\
This is some text