3.9 KiB
3.9 KiB
Howto reveal.js
Pour faire des slides verticaux, il suffit d'englober plusieurs sections dans une même section :
<section>
<section>
<h2>Vertical Slides</h2>
<p>
Slides can be nested inside of each other.
</p>
</section>
<section>
<h2>Basement Level 1</h2>
<p>
Nested slides are useful for adding additional detail underneath a high level horizontal slide.
</p>
</section>
</section>
Pour intégrer image/gif en background sur un slide en particulier, il faut ajouter l'attribut data-background à la section :
<section data-background="url-de-l-image.png">
<h2>A slide with a image</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</section>
Idem pour un background color :
<section data-background="#87CBE7">
<h2>A slide with a different background-color</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</section>
Pour intégrer une video en background sur un slide en particulier, l'attribut a ajouter est data-background-video :
<section data-background="url-de-la-video.webm">
<h2>A slide with a video</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</section>
Pour afficher du texte ou des images de façon fragmentée grâce à la class "fragment" :
<section>
<h2>A slide with a image</h2>
<p class="fragment">Lorem ipsum dolor sit amet...</p>
<p class="fragment"> ...consectetur adipiscing elit...</p>
<p class="fragment">...sed do eiusmod tempor incididunt ut...</p>
</p>...labore et dolore magna aliqua.</p>
<img class="fragment" data-src="url-de-l-image.png">
</section>
Transformer une présentation en .pdf :
$ ~/GIT/$ git clone https://github.com/astefanutti/decktape.git
$ ~/GIT/decktape$ curl -L https://github.com/astefanutti/decktape/releases/download/v1.0.0/phantomjs-linux-x86-64 -o phantomjs; chmod +x phantomjs
$ ~/GIT/decktape$ ./phantomjs decktape.js file:///tmp/foo.html foo.pdf
Note : cette méthode ne marche plus avec les dernières version de phantomjs et/ou decktape.
Alternative en utilisant Docker
Si vous avez Docker sur votre machine :
$ docker run -t -v ~:/home/user astefanutti/decktape <fichier HTML> slides.pdf
$ docker cp `docker ps -lq`:slides/slides.pdf .
$ docker rm `docker ps -lq`
Alternative en utilisant Chromium
Si vous avez Chromium sur votre machine, assurez-vous que le fichier /css/print/pdf.css soit chargé (il est chargé par défaut dans l'index.html). Si vous utilisez un autre fichier html, vous pouvez ajouter la section suivante dans le HEAD :
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
- Depuis Chromium, ouvrez votre fichier html et ajoutez à la fin
?print-pdf
. Exemple : revealjs.com?print-pdf. - Vous pouvez ajouter l'option
&showNotes=true
pour conserver les speaker notes - Ouvrez la fenêtre d'impression en faisant
control+p
- Assurez-vous que la destination soit « Save as PDF »
- Le mode doit être « Paysage » ou « Landscape »
- Les marges doivent être à « None »
- Activez l'option « Background graphics »
- Sauvegardez
Alternative en utilisant NodeJS
Débrouillez vous pour obtenir un nodejs et npm suffisamment récent puis suivre la procédure officielle : https://github.com/astefanutti/decktape#install (non testé).