| <!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'> | |
| li { | |
| margin-left: 60px; | |
| } | |
| </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 + ')'; | |
| document.body.style.backgroundRepeat = 'no-repeat'; | |
| document.body.style.backgroundPosition = '50% 50%'; | |
| document.body.style.backgroundSize = 'cover'; | |
| 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>markdown</div> | |
| <div>the WYSIWYG alternative</div> | |
| <div>or</div> | |
| <div>the HTML alternative</div> | |
| <div>get excited... this is a talk about... </div> | |
| <div>plain text!</div> | |
| <div><img src="resolver1.jpeg"></div> | |
| <div><h2>html markup:</h2> | |
| <p><h2>about markdown</h2><br /> | |
| <ul><br /> | |
| <li>Created by John Gruber in <strong>2004</strong></li><br /> | |
| <li>Wiki-like markup</li><br /> | |
| <li>easy-to-read </li><br /> | |
| <li>easy-to-write </li><br /> | |
| <li>plain text</li><br /> | |
| </ul> | |
| </div> | |
| <div><img src="resolver2.jpeg"></div> | |
| <div><h2>markdown markup: </h2> | |
| <p> | |
| ## about markdown <br /><br /> | |
| * Created by John Gruber in **2004** <br /> | |
| * Wiki-like markup<br /> | |
| * easy-to-read <br /> | |
| * easy-to-write <br /> | |
| * plain text<br /> | |
| </p> | |
| </div> | |
| <div><img src="resolver3.jpeg"></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>if this isn't clear, markdown turns text into html</h2> | |
| </div> | |
| <div><h2>baked into lots of tools</h2> | |
| <ul> | |
| <li>Drupal</li> | |
| <li>WordPress</li> | |
| <li><a href="https://trello.com/">Trello</a></li> | |
| <li>Github</li> | |
| <li><a href="https://github.com/tmcw/big">Big</a> and <a href="http://macwright.org/biggie/">Biggie</a>*</li> | |
| <li><a href="http://mouapp.com/">Mou</a></li> | |
| <li><a href="http://mashable.com/2013/06/24/markdown-tools/">78 others</a></li> | |
| </ul> | |
| </div> | |
| <div><h2>Why it's cool</h2> | |
| <ul> | |
| <li>No guessing games</li> | |
| <li>Less clicking</li> | |
| <li>Intuitive markup</li> | |
| <li>Ubiquitous</li> | |
| <li>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> | |
| <li>Meeting notes</li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h2>Read more at:</h2> | |
| <a href="http://daringfireball.net/projects/markdown">daringfireball.net/projects/markdown</a> | |
| </div> | |
| <div><img src="resolver4.jpeg"></div> | |
| <div>Image credits | |
| <ol> | |
| <li>No creator listed, Sports fans cheering in stadium, Athletics Photographs, 1893 - 2003 (UA023.004) held by Special Collections Research Center at NCSU Libraries, viewed 9/26/13, http://d.lib.ncsu.edu/collections/catalog/ua023_004-021-am0101-000-015</li> | |
| <li>Seward, Chris, Sports fan at N. C. State and UNC game, Athletics Photographs, 1893 - 2003 (UA023.004) held by Special Collections Research Center at NCSU Libraries, viewed 9/26/13, http://d.lib.ncsu.edu/collections/catalog/ua023_004-021-am0101-000-047</li> | |
| <li>Caram, Ed, Go Wolfpack! -- Cheering band member, Marching bands (UA023.004.191) held by Special Collections Research Center at NCSU Libraries , viewed 9/26/13, http://d.lib.ncsu.edu/collections/catalog/0018042</li> | |
| <li>No creator listed, Engineers Fair, Engineers' Fair (UA023.023.082) held by Special Collections Research Center at NCSU Libraries , viewed 9/26/13, http://d.lib.ncsu.edu/collections/catalog/0005615</li> | |
| </ol></div> | |
get excited... this is a talk about plain text!
\
This is some text
