File
Login or Register via GitHub
<html><head> <meta charset="utf-8"> <title>Reavel test</title> <meta name="description" content="A framework for easily creating beautiful presentations using HTML"> <meta name="author" content="Hakim El Hattab"> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <link rel="stylesheet" href=https://rawgithub.com/hakimel/reveal.js/master/css/reveal.min.css"> <link rel="stylesheet" href="https://rawgithub.com/hakimel/reveal.js/master/css/theme/default.css" id="theme"> <link rel="stylesheet" href="https://rawgithub.com/hakimel/reveal.js/master/lib/css/zenburn.css"> </head><body> <div class="reveal"> <!-- Any section element inside of this container is displayed as a slide --> <div class="slides"> <section> <h1>Reveal.js</h1> <h3>HTML Presentations Made Easy</h3> <p> <small>Created by <a href="http://hakim.se">Hakim El Hattab</a> / <a href="http://twitter.com/hakimel">@hakimel</a></small> </p> </section> <section> <section> <h2>Vertical Slides</h2> <p> Slides can be nested inside of other slides, try pressing <a href="#" class="navigate-down">down</a>. </p> <a href="#" class="image navigate-down"> <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow"> </a> </section> <section> <h2>Basement Level 1</h2> <p>Press down or up to navigate.</p> </section> <section> <h2>Basement Level 2</h2> <p>Cornify</p> <a class="test" href="http://cornify.com"> <img width="280" height="326" src="https://s3.amazonaws.com/hakim-static/reveal-js/cornify.gif" alt="Unicorn"> </a> </section> <section> <h2>Basement Level 3</h2> <p>That's it, time to go back up.</p> <a href="#/2" class="image"> <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="-webkit-transform: rotate(180deg);"> </a> </section> </section> </div> <script src="https://rawgithub.com/hakimel/reveal.js/master/js/reveal.min.js"></script> <script src="https://rawgithub.com/hakimel/reveal.js/master/lib/js/head.min.js"></script> <script> Reveal.initialize({ controls: true, progress: true, history: true, center: true, theme: Reveal.getQueryHash().theme, // available themes are in /css/theme transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none // Parallax scrolling // parallaxBackgroundImage: 'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg', // parallaxBackgroundSize: '2100px 900px', // Optional libraries used to extend on reveal.js dependencies: [ { src: 'https://rawgithub.com/hakimel/reveal.js/master/lib/js/classList.js', condition: function() { return !document.body.classList; } }, { src: 'https://rawgithub.com/hakimel/reveal.js/master/plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, { src: 'https://rawgithub.com/hakimel/reveal.js/master/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, { src: 'https://rawgithub.com/hakimel/reveal.js/master/plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }, { src: 'https://rawgithub.com/hakimel/reveal.js/master/plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } }, { src: 'https://rawgithub.com/hakimel/reveal.js/master/plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } } ] }); </script></body></html>
Output
You can jump to the latest bin by adding /latest to your URL
Keyboard Shortcuts
| Shortcut | Action |
|---|---|
| ctrl + [num] | Toggle nth panel |
| ctrl + 0 | Close focused panel |
| ctrl + enter | Re-render output. If console visible: run JS in console |
| Ctrl + l | Clear the console |
| ctrl + / | Toggle comment on selected lines |
| ctrl + ] | Indents selected lines |
| ctrl + [ | Unindents selected lines |
| tab | Code complete & Emmet expand |
| ctrl + shift + L | Beautify code in active panel |
| ctrl + s | Save & lock current Bin from further changes |
| ctrl + shift + s | Open the share options |
| ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts | |
JS Bin URLs
| URL | Action |
|---|---|
| / | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
| /edit | Edit the current bin |
| /watch | Follow a Code Casting session |
| /embed | Create an embeddable version of the bin |
| /latest | Load the very latest bin (/latest goes in place of the revision) |
| /[username]/last | View the last edited bin for this user |
| /[username]/last/edit | Edit the last edited bin for this user |
| /[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
| /quiet | Remove analytics and edit button from rendered output |
| .js | Load only the JavaScript for a bin |
| .css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. | |
public
0viewers