2017-03-31 19:51:29 +02:00
# Howto reveal.js
2017-11-20 16:24:17 +01:00
## Pour faire des slides verticaux, il suffit d'englober plusieurs sections dans une même section :
2017-04-12 18:45:16 +02:00
~~~{.html}
< 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 >
~~~
2017-11-20 16:24:17 +01:00
## Pour intégrer image/gif en background sur un slide en particulier, il faut ajouter l'attribut data-background à la section :
2017-04-12 18:45:16 +02:00
~~~{.html}
< 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 >
~~~
2017-04-12 21:35:34 +02:00
Idem pour un background color :
~~~{.html}
< 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 >
~~~
2017-11-20 16:24:17 +01:00
## Pour intégrer une video en background sur un slide en particulier, l'attribut a ajouter est data-background-video :
2017-04-12 21:35:34 +02:00
~~~{.html}
< 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 >
~~~
2017-11-20 16:24:17 +01:00
## Pour afficher du texte ou des images de façon fragmentée grâce à la class "fragment" :
2017-04-12 18:45:16 +02:00
~~~{.html}
< 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 >
~~~
2017-11-20 16:24:17 +01:00
## Transformer une présentation en .pdf :
2017-03-31 19:51:29 +02:00
~~~
2017-06-29 09:50:25 +02:00
$ ~/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
2017-03-31 19:51:29 +02:00
$ ~/GIT/decktape$ ./phantomjs decktape.js file:///tmp/foo.html foo.pdf
2017-04-12 18:45:16 +02:00
~~~
2018-05-09 22:20:11 +02:00
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`
~~~
2018-07-03 14:37:41 +02:00
### 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 :
2018-07-03 14:41:22 +02:00
~~~{.js}
2018-07-03 14:37:41 +02:00
< script >
2018-07-03 14:41:22 +02:00
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 );
2018-07-03 14:37:41 +02:00
< / 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
2018-05-09 22:20:11 +02:00
### 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é).