add custom options

index.html

@@ -17,6 +17,13 @@
     </style>
 
     <script>
+        // Customisation of Slidedown
+        // for marked setting options with default value, please ref https://github.com/chjj/marked#usage
+        // Remark: Slidedown sets `marked.breaks` to true by default.
+        Slidedown.setOptions({
+            marked: {}
+        });
+
         function parseQuery(querystring) {
             // remove any preceding url and split
             querystring = querystring.substring(querystring.indexOf('?')+1).split('&');

lib/slidedown.build.css

@@ -1 +1,192 @@
-.slide,.slide .content,body,html{overflow-x:hidden}@font-face{font-family:Inconsolata;font-style:normal;font-weight:400;src:local('Inconsolata'),url(http://fonts.gstatic.com/s/inconsolata/v10/BjAYBlHtW3CJxDcjzrnZCJ0EAVxt0G0biEntp43Qt6E.ttf)format('truetype')}@font-face{font-family:'Open Sans';font-style:normal;font-weight:300;src:local('Open Sans Light'),local('OpenSans-Light'),url(http://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTYnF5uFdDttMLvmWuJdhhgs.ttf)format('truetype')}@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;src:local('Open Sans'),local('OpenSans'),url(http://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf)format('truetype')}@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;src:local('Open Sans Bold'),local('OpenSans-Bold'),url(http://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzInF5uFdDttMLvmWuJdhhgs.ttf)format('truetype')}body,html{height:100%;width:100%;margin:0;padding:0}body{font-family:"Open Sans",Helvetica,Arial,sans-serif}code{font-family:Inconsolata,monospace}.slide{position:absolute;top:0;bottom:0;min-height:100%;width:100%;display:none}.slide .content{min-height:calc(100% - 48px);width:fit-content;width:intrinsic;max-width:100%;margin:auto;padding-top:48px;overflow-y:auto}.slide footer{position:absolute;bottom:12px;width:100%;text-align:center}.slide .navigation-instructions{display:inline-block;font-size:small;color:grey;text-align:left}.slide.current,.slide.next,.slide.previous{display:block;transition:left .5s ease;-moz-transition:left .5s ease;-webkit-transition:left .5s ease}.slide.previous{left:-100%}.slide.current{left:0}.slide.next{left:100%}@media all and (max-width:959px){body{font-size:125%}}@media all and (min-width:960px){body{font-size:200%}.slide .content{max-width:960px}}@media all and (min-width:1280px){.slide .content{max-width:75%}}.slide h1,.slide h2,.slide h3{text-align:center}.slide h1 strong,.slide h2 strong,.slide h3 strong{color:red}.slide pre{position:relative;padding:12px;background-color:#eee;white-space:pre-wrap}.slide blockquote{border-left:6px solid #888;padding-left:12px}.slide p>img:first-child:last-child{display:block;margin:auto}.slide li code,.slide p code{padding:2px 4px;font-size:90%;color:#c7254e;background-color:#f9f2f4;border-radius:4px}[data-layout=title-only] h1{position:absolute;top:50%;left:0;right:0;margin-top:-36px;font-size:72px;font-weight:700;line-height:72px}[data-layout=title-subtitle] h1{position:absolute;bottom:50%;left:0;right:0;margin-bottom:0;font-size:48px;font-weight:700}[data-layout=title-subtitle] h2{position:absolute;top:50%;left:0;right:0;margin-top:0;font-size:36px;font-weight:400}[data-layout=side-by-side] .left,[data-layout=side-by-side] .right{position:absolute;text-align:center}[data-layout=side-by-side] .left ul,[data-layout=side-by-side] .right ul{display:inline-block;text-align:left}[data-layout=side-by-side] .left{left:24px;right:50%;padding-right:12px}[data-layout=side-by-side] .right{right:24px;left:50%;padding-left:12px}
+@import url("http://fonts.googleapis.com/css?family=Inconsolata|Open+Sans:300,400,700");
+html,
+body {
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+}
+
+body {
+  font-family: "Open Sans", Helvetica, Arial, sans-serif;
+}
+
+code {
+  font-family: "Inconsolata", monospace;
+}
+
+.slide {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  min-height: 100%;
+  width: 100%;
+  display: none;
+  overflow-x: hidden;
+}
+
+.slide .content {
+  min-height: calc(100% - 48px);
+  width: fit-content;
+  width: intrinsic;
+  max-width: 100%;
+  margin: auto;
+  padding-top: 48px;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.slide footer {
+  position: absolute;
+  bottom: 12px;
+  width: 100%;
+  text-align: center;
+}
+
+.slide .navigation-instructions {
+  display: inline-block;
+  font-size: small;
+  color: #808080;
+  text-align: left;
+}
+
+.slide.previous,
+.slide.current,
+.slide.next {
+  display: block;
+  transition: left 0.5s ease;
+  -moz-transition: left 0.5s ease;
+  -webkit-transition: left 0.5s ease;
+}
+
+.slide.previous {
+  left: -100%;
+}
+
+.slide.current {
+  left: 0;
+}
+
+.slide.next {
+  left: 100%;
+}
+
+@media all and (max-width: 959px) {
+  body {
+    font-size: 125%;
+  }
+}
+
+@media all and (min-width: 960px) {
+  body {
+    font-size: 200%;
+  }
+
+  .slide .content {
+    max-width: 960px;
+  }
+}
+
+@media all and (min-width: 1280px) {
+  .slide .content {
+    max-width: 75%;
+  }
+}
+
+.slide h1,
+.slide h2,
+.slide h3 {
+  text-align: center;
+}
+
+.slide h1 strong,
+.slide h2 strong,
+.slide h3 strong {
+  color: red;
+}
+
+.slide pre {
+  position: relative;
+  padding: 12px;
+  background-color: #eee;
+  white-space: pre-wrap;
+}
+
+.slide blockquote {
+  border-left: 6px solid #888;
+  padding-left: 12px;
+}
+
+/* Center images on their own line (<p><img /></p>) */
+
+.slide p > img:first-child:last-child {
+  display: block;
+  margin: auto;
+}
+
+/* Yeah, I like Bootstrap's code formatting, OK? */
+
+.slide li code,
+.slide p code {
+  padding: 2px 4px;
+  font-size: 90%;
+  color: #c7254e;
+  background-color: #f9f2f4;
+  border-radius: 4px;
+}
+
+[data-layout="title-only"] h1 {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  margin-top: -36px;
+  font-size: 72px;
+  font-weight: bold;
+  line-height: 72px;
+}
+
+[data-layout="title-subtitle"] h1 {
+  position: absolute;
+  bottom: 50%;
+  left: 0;
+  right: 0;
+  margin-bottom: 0;
+  font-size: 48px;
+  font-weight: bold;
+}
+
+[data-layout="title-subtitle"] h2 {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  margin-top: 0;
+  font-size: 36px;
+  font-weight: normal;
+}
+
+[data-layout="side-by-side"] .left,
+[data-layout="side-by-side"] .right {
+  position: absolute;
+  text-align: center;
+}
+
+[data-layout="side-by-side"] .left ul,
+[data-layout="side-by-side"] .right ul {
+  display: inline-block;
+  text-align: left;
+}
+
+[data-layout="side-by-side"] .left {
+  left: 24px;
+  right: 50%;
+  padding-right: 12px;
+}
+
+[data-layout="side-by-side"] .right {
+  right: 24px;
+  left: 50%;
+  padding-left: 12px;
+}