VSCode Reveal intro

::: block *here be dragons* {style=background:red;width:500px} ::: --- // @[vine](etVpwB7uHlw) --- ### Solar System Exploration, 1950s – 1960s - [ ] Mercury - [x] Venus - [x] Earth (Orbit/Moon) - [x] Mars - [ ] Jupiter - [ ] Saturn - [ ] Uranus - [ ] Neptune - [ ] Comet Haley --- # some Table | | Grouping || First Header | Second Header | Third Header | ------------ | :-----------: | -----------: | Content | *Long Cell* || Content | **Cell** | Cell | New section | More | Data | And more | With an escaped '\\|' || [Prototype table] -- First header | Second header -------------|--------------- List: | More \ - over | data \ - several | \ - lines | -- First header | Second header -------------|--------------- Merged | Cell 1 ^^ | Cell 2 ^^ | Cell 3 -- --- <div class="mermaid"> sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts <br/>prevail! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good! </div> --- <div class="mermaid"> graph LR; A(AAAA)==> B(B node); B==> C(SEE SEE); class A diag-a-styles; class B diag-b-styles class C diag-c-styles; </div> --- # vscode-reveal Awesome VS code extension using The HTML Presentation Framework Revealjs <small>Created by [Vincent B.](https://www.evilznet.com) / [@Evilznet](https://twitter.com/Evilznet)</small> --- ## Hello There reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do. --- ## Vertical Slides Slides can be nested inside of each other. Use the _Space_ key to navigate through all slides. <a href="#" class="navigate-down"> <img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow"> </a> -- ## Basement Level 1 Nested slides are useful for adding additional detail underneath a high level horizontal slide. -- ## Basement Level 2 That's it, time to go back up. <a href="#/2"> <img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="transform: rotate(180deg); -webkit-transform: rotate(180deg);"> </a> --- ## Point of View Press **ESC** to enter the slide overview. Hold down alt and click on any element to zoom in on it using [zoom.js](http://lab.hakim.se/zoom-js). Alt + click anywhere to zoom back out. > Use ctrl + click in Linux --- ## Touch Optimized Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides. --- ## Markdown support ``` ## Markdown support Write content using inline or external Markdown. Instructions and more info available in the [readme](https://github.com/hakimel/reveal.js#markdown). ``` --- ## Fragments Hit the next arrow... ... to step through ... <span class="fragment">... a</span> <span class="fragment">fragmented</span> <span class="fragment">slide.</span> Note: This slide has fragments which are also stepped through in the notes window. -- ## Fragment Styles There's different types of fragments, like: grow {.fragment .grow} shrink {.fragment .shrink} fade-out {.fragment .fade-out} fade-right{.fragment .fade-right} fade-up{.fragment .fade-up} fade-down{.fragment .fade-down} fade-left{.fragment .fade-left} -- ## Fragment Styles fade-in-then-out{.fragment .fade-in-then-out} fade-in-then-semi-out {.fragment .fade-in-then-semi-out"} current-visible {.fragment .current-visible} Highlight **red**{.fragment .highlight-red} **blue**{.fragment .highlight-blue} **green**{.fragment .highlight-green} --- ## Transition Styles You can select from different transitions, like: [None](?transition=none#/transitions) - [Fade](?transition=fade#/transitions) - [Slide](?transition=slide#/transitions) - [Convex](?transition=convex#/transitions) - [Concave](?transition=concave#/transitions) - [Zoom](?transition=zoom#/transitions) --- ## Themes reveal.js comes with a few themes built in: <a href="#" onclick="document.getElementById('theme').setAttribute('href','libs/reveal.js/3.8.0/css/theme/black.css'); return false;">Black (default)</a> - <a href="#" onclick="document.getElementById('theme').setAttribute('href','libs/reveal.js/3.8.0/css/theme/white.css'); return false;">White</a> - <a href="#" onclick="document.getElementById('theme').setAttribute('href','libs/reveal.js/3.8.0/css/theme/league.css'); return false;">League</a> - <a href="#" onclick="document.getElementById('theme').setAttribute('href','libs/reveal.js/3.8.0/css/theme/sky.css'); return false;">Sky</a> - <a href="#" onclick="document.getElementById('theme').setAttribute('href','libs/reveal.js/3.8.0/css/theme/beige.css'); return false;">Beige</a> - <a href="#" onclick="document.getElementById('theme').setAttribute('href','libs/reveal.js/3.8.0/css/theme/simple.css'); return false;">Simple</a> <br> <a href="#" onclick="document.getElementById('theme').setAttribute('href','libs/reveal.js/3.8.0/css/theme/serif.css'); return false;">Serif</a> - <a href="#" onclick="document.getElementById('theme').setAttribute('href','libs/reveal.js/3.8.0/css/theme/blood.css'); return false;">Blood</a> - <a href="#" onclick="document.getElementById('theme').setAttribute('href','libs/reveal.js/3.8.0/css/theme/night.css'); return false;">Night</a> - <a href="#" onclick="document.getElementById('theme').setAttribute('href','libs/reveal.js/3.8.0/css/theme/moon.css'); return false;">Moon</a> - <a href="#" onclick="document.getElementById('theme').setAttribute('href','libs/reveal.js/3.8.0/css/theme/solarized.css'); return false;">Solarized</a> ---  ## Slide Backgrounds Set `data-background="#dddddd"` on a slide to change the background color. All CSS color formats are supported. [![Down arrow](https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png =178x238)](#){.navigate-down} --  ## Image Backgrounds ```markdown  ``` --  ## TILED BACKGROUNDS ```markdown  ``` --  ## Video Backgrounds ```markdown  ``` --  ## ... and GIFs! ```markdown  ``` ---  ## Background Transitions Different background transitions are available via the backgroundTransition option. This one's called "zoom". ---  ## Background Transitions You can override background transitions per-slide. --- ## Pretty Code ```js function linkify( selector ) { if( supports3DTransforms ) { var nodes = document.querySelectorAll( selector ); for( var i = 0, len = nodes.length; i < len; i++ ) { var node = nodes[i]; if( !node.className ) { node.className += ' roll'; } } } } ``` Code syntax highlighting courtesy of [highlight.js](http://softwaremaniacs.org/soft/highlight/en/description/). --- ## Marvelous List * No order here * Or here * Or here * Or here --- ## Fantastic Ordered List 1. One is smaller than... 2. Two is smaller than... 3. Three! --- ## Tabular Tables | Tables | Are | Cool | |-------------|:-----------:|----:| | col 3 is | right-aligned | $1600 | | col 2 is | centered | $12 | | zebra stripes | are neat | $1 | --- {.slide id="ClevQuot"} ## Clever Quotes These guys come in two forms, inline: <q cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">"The nice thing about standards is that there are so many to choose from"</q> and block: > "For years there has been a theory that millions of monkeys typing at random on millions of typewriters would reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue." --- ## Intergalactic Interconnections You can link between slides internally, [like this](#/2/3). Link to slides by an ID, e.g., [Clever Quotes](#ClevQuot). However, you must have set the ID at the destination slide using: `{.slide id="UniqueID"}` --- ## Speaker View There's a [speaker view](https://github.com/hakimel/reveal.js#speaker-notes). It includes a timer, preview of the upcoming slide as well as your speaker notes. Press the _S_ key to try it out. <aside class="notes">Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).</aside> --- ## Export to PDF Presentations can be [exported to PDF](https://github.com/hakimel/reveal.js#pdf-export), here's an example: <iframe data-src="https://www.slideshare.net/slideshow/embed_code/42840540" width="445" height="355" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:3px solid #666; margin-bottom:5px; max-width: 100%;" allowfullscreen=""></iframe> --- ## Global State Set `data-state="something"` on a slide and `"something"` will be added as a class to the document element when the slide is open. This lets you apply broader style changes, like switching the page background. ---  ## State Events Additionally custom events can be triggered on a per slide basis by binding to the `data-state` name. ```js Reveal.addEventListener( 'customevent', function() { console.log( '"customevent" has fired' ); } ); ``` --- ## Take a Moment Press B or . on your keyboard to pause the presentation. This is helpful when you're on stage and want to take distracting slides off the screen. --- ## Much more * Right-to-left support * [Extensive JavaScript API](https://github.com/hakimel/reveal.js#api) * [Auto-progression](https://github.com/hakimel/reveal.js#auto-sliding) * [Parallax backgrounds](https://github.com/hakimel/reveal.js#parallax-background) * [Custom keyboard bindings](https://github.com/hakimel/reveal.js#keyboard-bindings) --- ## Plugins -- ## search Handles finding a text string anywhere in the slides and showing the next occurrence to the user by navigatating to that slide and highlighting it. **Shortcut : `CTRL + SHIFT + F`** -- ## Zoom Zoom anywhere on your presentation **Shortcut : `alt + click`: Zoom in. Repeat to zoom back out.** -- ## Notes Add note to speaker view. Default markdown syntaxe is ```text note: a custom note here ``` -- ## Chalkboard Have you ever missed the traditional classroom experience where you can quickly sketch something on a chalkboard? Just press 'b' or click on the pencil button to open and close your chalkboard. -- ## Chalkboard - Click the `left mouse button` to write on the chalkboard - Click the `right mouse button` to wipe the chalkboard - Click the `DEL` key to clear the chalkboard -- ## MAKE NOTES ON SLIDES Did you notice the <i class="fa fa-pencil"></i> button? By pressing 'c' or clicking the button you can start and stop the notes taking mode allowing you to write comments and notes directly on the slide. -- ## Chart Add chart from simple string -- ### Line chart from JSON string <canvas class="stretch" data-chart="line">  </canvas> -- ### Line chart with CSV data and JSON configuration <canvas class="stretch" data-chart="line"> My first dataset, 65, 59, 80, 81, 56, 55, 40  My second dataset, 28, 48, 40, 19, 86, 27, 90  </canvas> -- ### Bar chart with CSV data <canvas class="stretch" data-chart="bar"> ,January, February, March, April, May, June, July My first dataset, 65, 59, 80, 81, 56, 55, 40 My second dataset, 28, 48, 40, 19, 86, 27, 90 </canvas> --  ### Stacked bar chart from CSV file with JSON configuration   <canvas class="stretch" data-chart="bar" data-chart-src="https://rajgoel.github.io/reveal.js-demos/chart/data.csv">  </canvas> -- ### Pie chart <canvas class="stretch" data-chart="pie"> ,Black, Red, Green, Yellow My first dataset, 40, 40, 20, 6 My second dataset, 45, 40, 25, 4 </canvas> -- ## EMBEDDING A TWEET To embed a tweet, simply determine its URL and include the following code in your slides: ```html <div class="tweet" data-src="TWEET_URL"></div> ``` -- <div class="tweet" data-src="https://twitter.com/Evilznet/status/1086984843056107525"></div> -- ## menu A SLIDEOUT MENU FOR NAVIGATING REVEAL.JS PRESENTATIONS -- See the <i class="fa fa-bars"></i> in the corner? Click it and the menu will open from the side. Click anywhere on the slide to return to the presentation, or use the close button in the menu. -- If you don't like the menu button, you can use the slide number instead. Go on, give it a go. The menu button can be hidden using the options, but you need to enable the slide number link. -- Or you can open the menu by pressing the m key. You can navigate the menu with the keyboard as well. Just use the arrow keys and <space> or <enter> to change slides. You can disable the keyboard for the menu in the options if you wish. -- ## LEFT OR RIGHT You can configure the menu to slide in from the left or right -- ### MARKERS The slide markers in the menu can be useful to show you the progress through the presentation. You can hide them if you want. You can also show/hide slide numbers. -- ### SLIDE TITLES The menu uses the first heading to label each slide but you can specify another label if you want. Use a data-menu-title attribute in the section element to give the slide a custom label, or add a menu-title class to any element in the slide you wish. You can change the titleSelector option and use any elements you like as the default for labelling each slide. -- ## MathSVG An extension of the math.js plugin allowing to render LaTeX in SVG. -- ### The Lorenz Equations <span> \[\begin{aligned} \dot{x} & = \sigma(y-x) \\ \dot{y} & = \rho x - y - xz \\ \dot{z} & = -\beta z + xy \end{aligned} \] </span> -- ### The Cauchy-Schwarz Inequality <script type="math/tex; mode=display"> \left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right) </script> -- ### Custom footer Includes a footer in all the slides of a Reveal.js presentation (with optional exclusion of some slides) that will show the title of the presentation. -- ## code-focus A plugin that allows focusing on specific lines of code blocks. -- ### Code Focus Demo ```html <section> <pre><code> // Useless comment. alert('hi'); </pre></code> <p class="fragment" data-code-focus="1"> This focuses on the comment. </p> <p class="fragment" data-code-focus="1-2"> Another fragment. </p> </section> ``` This section is a slide. {.fragment .current-only data-code-focus=1-12} This will be highlighted by `highlight.js`. {.fragment .current-only data-code-focus=2-5} This fragment focuses on the first line. {.fragment .current-only data-code-focus=6-8} This fragment focuses on lines 1 and 2. {.fragment .current-only data-code-focus=9-11} See the next slide for a demo with the contents of this code block. {.fragment .current-only data-code-focus=1-12} ---  # THE END - [Try the online editor](http://slides.com) - [Source code & documentation](https://github.com/hakimel/reveal.js)