diff options
Diffstat (limited to 'deck.js/samples/deck-simplemath.html')
| -rw-r--r-- | deck.js/samples/deck-simplemath.html | 151 |
1 files changed, 151 insertions, 0 deletions
diff --git a/deck.js/samples/deck-simplemath.html b/deck.js/samples/deck-simplemath.html new file mode 100644 index 0000000..9e7693a --- /dev/null +++ b/deck.js/samples/deck-simplemath.html @@ -0,0 +1,151 @@ +<!DOCTYPE html> +<!--[if lt IE 7]> <html class="no-js ie6" lang="en"> <![endif]--> +<!--[if IE 7]> <html class="no-js ie7" lang="en"> <![endif]--> +<!--[if IE 8]> <html class="no-js ie8" lang="en"> <![endif]--> +<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]--> + <head> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> + + <title>deck.simplemath.js test/demo</title> + + <meta name="description" content="deck.*.js"> + <meta name="author" content="Rémi Emonet"> + <!--meta name="viewport" content="width=1024, user-scalable=no"/--> + + <!-- Core and extension CSS files --> + <link rel="stylesheet" href="../core/deck.core.css"> + <link rel="stylesheet" href="../extensions/status/deck.status.css"> + <link rel="stylesheet" href="../extensions/hash/deck.hash.css"> + + <!-- Style theme. More available in /themes/style/ or create your own. --> + <link rel="stylesheet" href="../themes/style/neon.css"> + + <!-- Transition theme. More available in /themes/transition/ or create your own. --> + <!--link rel="stylesheet" href="../themes/transition/horizontal-slide.css"--> + + <script src="../modernizr.custom.js"></script> + + <!-- Grab CDN jQuery, with a protocol relative URL; fall back to local if offline --> + <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script> + <script>window.jQuery || document.write('<script src="../jquery-1.7.2.min.js"><\/script>')</script> + + <!-- Deck Core and extensions --> + <script src="../core/deck.core.js"></script> + <script src="../extensions/hash/deck.hash.js"></script> + <script src="../extensions/status/deck.status.js"></script> + <script src="../extensions/fit/deck.fit.js"></script> + <link rel="stylesheet" href="../extensions/fit/deck.fit-fs.css"> + + <script src="../libs/display-latex2.user.js"></script> + <script src="../extensions/simplemath/deck.simplemath.js"></script> + + + <style type="text/css"> + .deck-container .slide {border: 1px dashed #333;} /* for the demo */ + .slide h1 {font-size: 3em;} + .slide h1 b {color: #0F0;} + .slide h1 em {color: #445; text-shadow: none; font-size: .3em;} + </style> + </head> + +<!-- for the demo, the body is not the container so it can be resized by the user --> +<body> + +This page surely has a purpose.<br/> +Use left/right arrow keys to browse the presentation.<br/> + +<!-- for the demo, a resizeable wrapper around the container --> +<div class="deck-container"> + +<!-- Begin slides --> +<section class="slide" id="title-slide"> + <h1 title="use arrow keys to navigate">Getting started with deck.js:<br/><b>simplemath</b> extension + <br/><em>use right arrow to move on</em> + </h1> +</section> + +<section class="slide"> + <h2>“simplemath”: What?</h2> + <ul> + <li>Add math equations in your slides</li> + <li>Use latex syntax</li> + <li>Just wrap your maths in a "span" element</li> + <li>Wants to learn latex syntax?</li> + <ul> + <li>view the source of this page</li> + <li>view <a href="http://www.andy-roberts.net/writing/latex/mathematics_1">online resources</a> (there are a lot)</li> + </ul> + <li>… examples on the next slide</li> + </ul> +</section> +<section class="slide"> + <h2>“simplemath” in action</h2> + <ul> + <li> + <span class="latex">e=mc^2</span> + <span class="latex">(\frac{x^2}{y^3})</span> + <span class="latex">[\begin{array}{cc} \sqrt{x} & 2 \\ 3 & x^4 \end{array}]</span> + </li> + <li><span class="latex"> + f(n) = \left\{ + \begin{array}{l l} + n/2 & \mbox{if } n \mbox{ is even}\\ + -(n+1)/2 & \mbox{if } n \mbox{ is odd} + \end{array} + </span></li> + <li><span class="latex">a^2 + \frac{1}{\sqrt{a^2 + \frac{1}{\sqrt{a^2 + \frac{1}{\sqrt{a^2 + b^{\infty}}}}}}}</span></li> + <br/> + </ul> +</section> +<section class="slide"> + <h2>Principle</h2> + <ul> + <li>Written in Javascript</li> + <li>Interprets latex syntax</li> + <li>Generates MathML (web standard for maths)</li> + <li>Lets your browser render the MathML</li> + <br/> + <li>Works fully offline</li> + <ul style="list-style-type:none"> + <li>− depends on browser support for MathML</li> + <li>+ works offline :)</li> + + </ul> + </ul> +</section> +<section class="slide"> + <h2>Browser support</h2> + <ul> + <li>Did it work for you? :)</li> + <li>See <a href="https://en.wikipedia.org/wiki/MathML#Web_browsers">the wikipedia page on MathML</a></li> + </ul> +</section> +<!-- DEMO: simplemath --> + +<!-- deck.navigation snippet --> +<!--a href="#" class="deck-prev-link" title="Previous">←</a> +<a href="#" class="deck-next-link" title="Next">→</a--> + +<!-- deck.status snippet --> +<!--p class="deck-status"> + <span class="deck-status-current"></span> + / + <span class="deck-status-total"></span> +</p--> + +<!-- deck.hash snippet --> +<a href="." title="Permalink to this slide" class="deck-permalink">#</a> + +<!-- Initialize the deck --> +<script> +$(function() { + $.deck('.slide', { + // fitMarginX:100, fitMarginY:100, + // fitMode: "stretched" //"center middle" //"bottom right" //"top left" + }); +}); +</script> +</div> +</body> +</html> |