Reveal.js presentation framework references

CDN based loading

• Reveal.js can be loaded on-the-fly with publicly available javascripts CDN
  • CDN JS

Hacks

esc toggles between slide/panaroma view

General slide structure

<div class="reveal">
            <div class="slides">
              <section>
                <!--slide 1 -->
                <h1>hello world !</h1>
              </section>
              <section>
                <!--slide 2 -->
              </section>
              <section>
                <!--slide 3 -->
              </section>
          </div>
      </div>

Images, embedded frames (iframes), and videos

• use data-src, NOT src to ensure lazy loading

<section>
  <img data-src="image.png">
  <iframe data-src="https://hakim.se"></iframe>
  <video>
    <source data-src="video.webm" type="video/webm" />
    <source data-src="video.mp4" type="video/mp4" />
  </video>
</section>

Image background

<section data-background-image="assets/images/Xi-Jinpooh-in-office_1-2.png" data-background-size="cover"
                data-background-position="center" data-background-repeat="no-repeat" data-background-opacity="0.3">
               <!--slide content -->
            </section>

Markdown slides

• markdown plugin required

<section data-markdown>
  <textarea data-template>
    ## Slide 1
    A paragraph with some text and a [link](https://hakim.se).
    ---
    ## Slide 2
    ---
    ## Slide 3
  </textarea>
</section>

Do NOT include --- at the end of the last slide. You will create a blank slide.

Mathematical formulas

• Katex plugin required

<section>
  <h2>The Lorenz Equations</h2>
  \[\begin{aligned} \dot{x} &amp; = \sigma(y-x) \\ \dot{y} &amp; = \rho x - y -
  xz \\ \dot{z} &amp; = -\beta z + xy \end{aligned} \]
</section>

<section data-markdown>$$ J(\theta_0,\theta_1) = \sum_{i=0} $$</section>

Use \(\) and $ instead of \[\] or $$ for inline formulas

plantUML diagrams

Requires PlantUML encoder

<section> 
    <h3>l'organisation d'entreprise</h3>
<textarea class="plantuml">
@startuml
<style>
  component {
    FontSize: 28
    FontStyle: bold
    Padding 10
  }
  .dir {
    BackGroundColor #FFCCCC
    FontColor #800000
  }
  .carriere {
    BackGroundColor #CCE5FF
    FontColor #0B3D91
  }
  .tech {
    BackGroundColor #CCFFCC
    FontColor #0A6B00
  }
  .prod {
    BackGroundColor #FFE7CC
    FontColor #B35400
  }
  .achats {
    BackGroundColor #E6CCFF
    FontColor #5A2B8A
  }
  arrow {
    LineColor #666666
  }
</style>

component ld <<dir>> as "la direction"
component carriere <<carriere>> as "carrière"
component technique <<tech>> as "technique"
component production <<prod>> as "production"
component achats <<achats>> as "achats"

ld -down-> carriere
ld -down-> technique
ld -down-> production
ld -down-> achats
@enduml
</textarea>
</section>

Do NOT substitute pre for textarea.