## In this presentation, you'll find - An example title slide - Examples of section slides (#) and normal slides (##) - Examples of custom classes and how to put them on some element - Examples of incremental apparition of bullet points - **NB: Use left/right arrows to navigate** # {*no-status title-slide} // comment - - ## Overview {#the-overview} - we could have written something - in this overview - but the goal is to illustrate the fact that - you can: 1. give an identifier to any element (or a slide) 1. easily copy a slide with `@copy` (this will be illustrated at the end) ## One can type slides in markdown - Most of this demo is like that that ## You can use HTML too, if you need very specific things

this is a two-column layout (that could be achieved with some classes and css styles also)

lorem ipsum …

## You can mix HTML + MD too

* this is **interpreted** (standard div with the markdown attribute) `

...

`

---

* this is **interpreted** (custom mdiv element) * this is **interpreted** (custom mdiv again)

---

* this is **not** interpreted (plain elements)
\

...\

---

(no 4-space indent) two column, **interpreted** lorem ~~ipsum~~ … ## Adding classes and incremental display - This has a css class that makes it hightlighted in red {in-red} - This is normal - this is nested - also this one in highlighted {in-red} - The `slide` class can be added to make incremental display - This one should only appear later {slide} - this one appears with its parent - and later {slide} - and later {slide} - This one is there from the beginning ## Adding images etc {imgInline} - One can use plain html or markdown - As here: or (md)  or (sized)  - Or there: NB: these ones are online but you can use local images as well ## Including SVG images @svg: Test.svg 700 200 - One can use the special `@svg` annotation - SVG images loaded this way can be styled and animated - For this, one can use the `@anim` annotation (see next slide) ## Animating SVG images - 1^st: make something appear, with @`anim: #use47` - @anim: #use47 - 3 next steps: with @`anim: #use49 | #use51 | #use53` - @anim: #use49 | #use51 | #use53 - disappearing and doing multiple things per step, with
@`anim: -#use49 | - #use51,#use53 | #use51,#use53 + #use49 + -#use47` - @anim: -#use49 | - #use51,#use53 | #use51,#use53 + #use49 + -#use47 - adding a class (also works on non-SVG), with
@`anim: %+class:in-red: #tspan3448` - @anim: %+class:in-red: #tspan3448 @svg: Test.svg 700 200 ## Global Effects - One can also have effects that affects not only the slide but the container - This can be done, e.g., in the next 4 steps with - @`anim: %+class:/bgred` - @`anim: %+class:/zoomed-out` - @`anim: %-class:/bgred` - @`anim: %-class:/zoomed-out` - @anim: %+class:/bgred - @anim: %+class:/zoomed-out - @anim: %-class:/bgred - @anim: %-class:/zoomed-out ## Useful [shortcuts](http://home.heeere.com/tech-deckjs-ext.html#keys) - 'h' to toggle the help area - 'g' to open the "goto slide" panel - 'm' to view the slide selector - 'c' to clone the view (the original becomes the presenter view) - left/right to step forward and backward - down/up to move slide by slide (when presenting, e.g., down will go to the beginning of the next slide, before any animation/incremental display takes place) - 'z'/'a' to browse slide by slide (when browsing, e.g., 'z' will go the end of the next slide) ## Writing Maths - One can write math equations using the latex syntax, opening and closing with a dollar sign - Examples below - $\left[\begin{array}{cc} \sqrt{x} & 2 \\\\ 3 & x^4 \end{array}\right]$ or $\left\(\frac{x^2}{y^3}\right\)$ is made of $x^2$ and $y^3$ - $\mathcal{L} = \sum_d \sum_w \sum_{t_a} n(w,t_a,d) log \sum_z \sum_{t_s} p(w,t_r|z) p(z,t_s|d)$ {center} $a^2 + \frac{1}{\sqrt{a^2 + \frac{1}{\sqrt{a^2 + \frac{1}{\sqrt{a^2 + b^{\infty}}}}}}}$ *$a^2 + \frac{1}{\sqrt{a^2 + \frac{1}{\sqrt{a^2 + \frac{1}{\sqrt{a^2 + b^{\infty}}}}}}}$ {in-red}* (classy) ## Highlighting source code - Some python ```python def main(): a = 12 print(a+a) return a+1 main() ``` - Some shell ```bash echo "hello ${world}" ``` ## Highlighting source code - With the `dense` class (custom css for this page) ```python def magic(a): return a*a+1 {dense} ``` - and more ```python def magic(a): return a*a+1 {dense} ``` # More stuff about different extensions at [http://home.heeere.com/tech-deckjs-ext.html](http://home.heeere.com/tech-deckjs-ext.html) # That's it, let's bring back our overview # @copy: #the-overview # Once more our overview, with some "animation" # @copy: #the-overview: %+class:in-red: ol ## random END image {/no-status /blackbg image-full bottom-right darkened} # fake end (check the slide number and go to the next slide) {deck-status-fake-end} ## supplementary slides - One can “hide” slides by putting them after a slide with class `deck-status-fake-end` ## more supplementary ## Obtaining a standalone file? - click on **THAT{save-dom-button}** (anything with the `save-dom-button` class) - or press 'd'

/ − automatically replaced by the author − automatically replaced by the title