<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Slide</title>
<style>*{margin:0;padding:0;box-sizing:border-box}#slide{display:none}.slide{white-space:nowrap}.slide-content{align-self:center}@media screen{body{position:absolute;top:50%;left:50%}.slide-4x3{width:1024px;height:768px;margin:-384px 0 0 -512px}.slide-16x9{width:1024px;height:576px;margin:-288px 0 0 -512px}.slide-16x10{width:1024px;height:640px;margin:-320px 0 0 -512px}.slide{position:absolute;width:100%;height:100%;display:flex;justify-content:center;overflow:hidden}}@media print{body{transform:none!important}h1{font-size:1.8rem;line-height:1.5;letter-spacing:-.05rem;font-weight:300}.slide-root{width:100%;display:flex;flex-wrap:wrap;align-items:stretch}.slide-content{transform:none!important}.slide{display:flex;justify-content:center;flex:1;padding:.5rem;margin:.5rem .5rem 4rem .5rem;border:1px solid rgba(0,0,0,0.2);visibility:visible!important}}</style>
<script>function trimIndent(e){var t=(e.match(INDENT_RE)||[""])[0].length;if(t>0){var n=e.substring(0,t);return e.replace(new RegExp(n,"g"),"")}}function renderSlide(e,t,n){var i=t.split("\n"),r=-1,o=document.createElement("div"),d=document.createElement("div"),s="";o.className="slide slide-"+n,d.className="slide-content";for(var l=0;l<i.length;l++){var a=i[l];if(a.startsWith("#"))s=s+"<h1>"+a.substring(1)+"</h1>";else if(a.startsWith(" ")||a.startsWith(" "))s=s+"<pre>"+a.replace(/^( )|\t/,"")+"</pre>";else{a.startsWith(".")&&(a=a.substring(1));for(var c=0;c<a.length;c++){var h=a.charAt(c);"*"==h?-1==r?(s+="<strong>",r=s.length):(r!=s.length?s+="</strong>":s=s.substring(0,s.length-8)+"*",r=-1):s+=h}s+="<br/>"}}d.innerHTML=s,o.appendChild(d),e.appendChild(o),o.style.visibility="hidden"}function render(e){var t=document.createElement("div");t.className="slide-root",document.body.appendChild(t),e=trimIndent(e);for(var n=e.split(/[\s+]\n/gm),i=0;i<n.length;i++){var r=n[i].trim();renderSlide(t,r,i)}return t}function resize(){var e=window.innerWidth,t=window.innerHeight,n=document.body.offsetWidth,i=document.body.offsetHeight,r=n/i>e/t?e/n:t/i;document.body.style.transform="scale("+r+")"}function goTo(e){currentSlide=e,window.location.hash=e;for(var t=document.querySelectorAll(".slide"),n=0;n<t.length;n++){var i=t[n],r=i.children[0],o=.8*i.offsetWidth/r.offsetWidth,d=.8*i.offsetHeight/r.offsetHeight;r.style.transform="scale("+Math.min(o,d)+")",n==currentSlide?i.style.visibility="":i.style.visibility="hidden"}}function next(){goTo(Math.min(currentSlide+1,document.querySelectorAll(".slide").length-1))}function prev(){goTo(Math.max(currentSlide-1,0))}var INDENT_RE=/^(?:( )+|\t+)/,currentSlide=-1;window.onload=function(){resize(),render(document.getElementById("slide").innerHTML),goTo(window.location.hash.substring(1)||0),window.onclick=next,window.onresize=resize,window.onkeydown=function(e){39==e.keyCode?next():37==e.keyCode&&prev()}};</script>
<style media="screen">
@import url(https://fonts.googleapis.com/css?family=Lato:400,700&subset=latin,latin-ext);
@import url(https://fonts.googleapis.com/css?family=Oswald:400,700);
@import url(https://fonts.googleapis.com/css?family=Inconsolata);
/* Customize theme: change body, h1, strong, pre or .slide class */
body {
font-family: 'Lato', sans-serif;
background-color: #edd400;
color: #453029;
line-height: 1.54;
}
.slide h1 {
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 2.6rem;
}
.slide pre {
font-family: 'Inconsolata';
font-size: 0.6rem;
line-height: 1.1;
}
.slide-10 h1 { color: #fff; text-shadow: 1px 1px 3px #453029; }
.slide-11 {
background: url("http://trikita.co/slide/icon.png"), url("http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/asanoha-400px.png");
background-repeat: no-repeat, repeat;
background-size: 35%, auto;
background-position: bottom right;
}
.slide-13 .slide-content {
background-image: url("http://trikita.co/slide/write_framed.png"),
url("http://trikita.co/slide/styles.gif"),
url("http://trikita.co/slide/illustrate_framed.png");
background-repeat: no-repeat;
background-size: 40%, 40%, 40%;
background-position: bottom left, bottom center, bottom right;
}
</style>
</head>
<body class="slide-16x9">
<pre id="slide">
#SLIDE
Good speech deserves time it takes
Save time for speech
Leave presentation to *Slide*
#Focus on content
Learn 5 markup rules
to make content look great
# #1
Each paragraph is a slide
# #2
Headers start with #
# #3
Emphasize *words*
surrounding them with **asterisks**
# #4
Indent code with 2 spaces
/* Day of week: Sakamoto's algorithm */
int dow(int y, int m, int d)
{
static int t[] = {0, 3, 2, 5, 0, 3, 5, 1, 4, 6, 2, 4};
y -= m < 3;
return (y + y/4 - y/100 + y/400 + t[m-1] + d) % 7;
}
# #5
Lines starting with a dot
disable markup such as
headlines, code or blank lines
↵ = new slide
.# = headline
** = emphasize
␣␣ = monospace
.. = escape
# Styling with CSS
# Selectors
..slide
..slide h1
..slide strong
..slide pre
.
..slide-N, where N is slide number
# Example
.
.slide-10 h1 {
color: #fff;
text-shadow: 1px 1px 3px #453029;
}
.
# CSS backgrounds
.slide-12 {
background: url("icon.png"),
url("bg.png");
background-repeat: no-repeat, repeat;
background-size: 40%, auto;
background-position: bottom right;
}
# Print mode
You can print slide thumbnails
to practice your speech
Slide for Android
.
.
.
# Links
http://trikita.co/slide
https://github.com/trikita/slide
https://github.com/trikita/slide-html
https://play.google.com/store/apps/details?id=trikita.slide
</pre>
</body>
</html>