This last month I’ve been looking at the hugo-reveal theme more and more often as a method to create quick and functional slide decks using Reveal.js. Google Slides and Powerpoint/LibreOffice Impress (or Keynote on macOS) are functional, and what people generally think of when you say presentation or keynote. However, if you’re planning to present something to do with code, and want to use something like carbon.now.sh to make nicely formatted screenshots of your code, I highly recommend you take a look at this article before you make your final decision.
Pendant ce dernier mois, j'ai regardé de plus en plus souvent le thème hugo-reveal comme une méthode pour créer rapidement des jeux de diapositives fonctionnels en utilisant Reveal.js. Google Slides et Powerpoint ou Impress de LibreOffice (ou Keynote sur macOS) sont opérationnels, et c'est à eux que pensent généralement les gens quand vous parlez de présentation ou de conférence. Cependant, si vous prévoyez de présenter quelque chose à faire avec du code, et voulez utiliser quelque chose comme carbon.now.sh pour faire des copies d'écran de votre code joliment formatées, je vous recommande chaudement de jeter un œil à cet article avant de prendre votre décision.
Project files All project files are on github. https://github.com/lswest/fcm-146-hugo-reveal If you prefer to download the files first, and simply follow along with the article, that’s fine.
Fichiers du projet
Tous les fichiers du projet sont sur github. https://github.com/lswest/fcm-146-hugo-reveal
Si vous préférez commencer par télécharger les fichiers, et simplement suivre l'article, c'est bien aussi.
Setup The first few steps to getting up and running are pretty simple: • Install git • Install hugo (odds are you can find a version in your local repositories - otherwise check gohugo.io). • Run: hugo new site presentation-name • Then you can do one of the following options: • run: git init in the folder created above, followed by: git submodule add https://github.com/dzello/reveal-hugo.git themes/reveal-hugo • Just download a zip archive from their github page (see further reading).
Paramétrage
Les quelques premières étapes pour l'installation et le lancement sont simples : ••Installer git ••Installer hugo (vous avez des chances de trouver une version dans vos dépôts locaux ; autrement, regardez sur gohugo.io). ••Lancer : hugo new site nom-de-la-présentation ••Ensuite, vous pouvez prendre l'une des options suivantes : ••lancer : git init dans le dossier créé ci-dessus, suivi de : git submodule add https://github.com/dzello/reveal-hugo.git themes/reveal-hugo ••Simplement télécharger une archive zip depuis leur page github (voir Pour aller plus loin).
Starting your presentation There are a few things I usually do before writing any of the slides. I’ll be covering them in the next few headings. If you’re completely satisfied with the default appearance, just do the steps in the first heading.
Commencer votre présentation
Habituellement, je fais quelques petites choses avant de commencer à écrire mes diapos. J'en parlerai dans les paragraphes suivants. Si vous êtes complètement satisfait de l'apparence par défaut, faites seulement les étapes du prochain paragraphe.
Configure Hugo You’ll need to actually define the output type and the theme to use. This is the same information as you’d find on the reveal-hugo project page. I’ve placed the code on GitHub, so instead of pasting lines of code, I will refer to the following link and the corresponding line numbers. File: https://github.com/lswest/fcm-146-hugo-reveal/blob/master/config.toml lines: 5-10 I also highly recommend adjusting the archetypes file so you don’t need to constantly update the preamble for your files if you decide to split the slideshow up into multiple content files.
Configuration de Hugo
Vous devrez en fait définir le type de sortie et le thème à utiliser. Cette information est la même que celle que vous trouverez dans la page du projet reveal-hugo. J'ai mis le code sur GitHub ; ainsi, plutôt que de coller les lignes de code, je ferai référence au lien suivant et aux numéros de ligne correspondants.
Fichier : https://github.com/lswest/fcm-146-hugo-reveal/blob/master/config.toml lignes : 5-10
Je vous recommande fortement d'ajuster le fichier d’archétypes de sorte que vous n'ayez pas à mettre à jour constamment le préambule de vos fichiers si vous décidez de couper le contenu de la présentation en plusieurs fichiers.
File: https://raw.githubusercontent.com/lswest/fcm-146-hugo-reveal/master/archetypes/default.md?raw=True What I do in this file is swap out the “—” with “+++” (to switch to TOML frontmatter), and then remove the draft = true, and set the output format. With the above two steps done, you can now create your first file: hugo new _index.md This will create a file under content/_index.md. In most cases, this file will contain your entire slideshow. If you prefer to split it up, you’ll want to check the project’s documentation for details.
File: https://raw.githubusercontent.com/lswest/fcm-146-hugo-reveal/master/archetypes/default.md?raw=True
Dans ce fichier, je remplace « — » par « +++ » (pour passer à un « frontmatter » TOML), puis j'enlève le draft = true et paramètre le format de sortie.
Une fois les deux étapes ci-dessus réalisées, vous pouvez créer votre premier fichier :
hugo new _index.md
Cela créera un fichier sous content/_index.md. Dans la plupart des cas, ce fichier contiendra toute votre présentation. Si vous préférez la découper, vous devrez regarder la documentation du projet pour les détails.
Image shortcode I prefer to scale my images in the Markdown itself, instead of resizing it by hand. To do this, I edited an official example from the hugo Image Processing page for slideshows. File: https://github.com/lswest/fcm-146-hugo-reveal/blob/master/layouts/shortcodes/image.html Usage: image_file_resize_400x (note the lack of extension). The picture file should be in the same content folder level where the markdown file is – you’re calling the shortcode from.
Shortcode des images
Je préfère mettre à l'échelle mes images directement dans le Markdown, plutôt que de les redimensionner à la main. Pour ce faire, j'ai édité un exemple officiel de la page de traitement des images d'Hugo pour les présentations.
File: https://github.com/lswest/fcm-146-hugo-reveal/blob/master/layouts/shortcodes/image.html
Usage: image_file_resize_400x (notez l'absence d'extension).
Le fichier image devra être dans le même niveau de dossier de contenu que le fichier du markdown, vous appelez le « shortcode » à partir de là.
Syntax Hugo-reveal puts a few of the Reveal.JS features behind shortcodes, and they are as follows: fragmentMarkdown goes herefragment - Allows you to step through the fragments (i.e. reveal one bullet point at a time) noteText goes herenote - Creates a note for the speaker view. sectionSlides go heresection - Creates a series of vertical slides. — - Start new slide ~~~ - Start/end code fragment. You can supply a programming language on the same line as your opening “~~~” (example: “~~~python”) For anyone wondering what the difference between “issue146” and “issue146” is - the percentage signs mean that markdown contained in the shortcode will be compiled, and the less than/greater than indicates that any inner text is just text.
Syntaxe
hugo-reveal met quelques fonctionnalités de Reveal.js derrière des shortcodes et ils sont comme ceci :
fragmentLe Markdown se place icifragment - Vous permet de passer des fragments un par un (par ex., pour dévoiler une liste point par point).
noteLe texte se place icinote - Crée une note pour l'affichage du présentateur.
sectionLes diapos vont icisection - Crée une série de diapos verticales.
— - Commence une nouvelle diapo
~~~ - Commence/termine un fragment de code. Vous pouvez fournir un langage de programmation sur la même ligne que votre « ~~~ » d'ouverture (exemple : « ~~~python »)
Pour tous ceux qui se demandent quelle est la différence entre « issue146 » et « issue146 » - le symbole du pourcentage signifie que le markdown contenu dans le shortcode sera compilé et le caractère plus petit/plus grand indique que le texte à l'intérieur n'est que du texte.
Running the slideshow Just open a console, cd to the directory your hugo project is in, and run hugo serve. This will run the hugo site on http://localhost:1313 (by default at least). You can also build straight up HTML with hugo build if you want to host the files somewhere. Bear in mind that building the HTML and just opening it in the browser will disable some features (such as speaker notes).
Lancement de la présentation
Ouvrez simplement une console, changez de répertoire pour celui de votre projet hugo et lancez hugo serve. Ceci lancera le site d'hugo à http://localhost:1313 (par défaut, du moins). Vous pouvez aussi construire le HTML directement avec hugo build si vous voulez que les fichiers soient hébergés quelque part. Gardez en tête que la construction du HTML et son ouverture dans un navigateur désactivera certaines fonctionnalités (telles que les notes du présentateur).
Speaker notes Sometimes you want to make little notes for yourself on a slide, that aren’t visible to the audience. You can do this here as well, by using the note shortcode (see Syntax section). To open the speaker view, simply press the “s” key on your keyboard once the slideshow has started. It will open a new window and give you a presenter view. I would recommend you do this at the start of the presentation and move it to your monitor, leaving the normal slideshow on the projector. You can control the slideshow from the presenter view as well, and it will be synchronized between the two views.
Notes du présentateur
Parfois, vous voulez vous préparer de petites notes par diapo, qui ne sont pas visibles de l'auditoire. Vous pouvez aussi faire ça en utilisant le shorcode pour les notes (Voir la section Syntaxe). Pour ouvrir la vue du présentateur, appuyez simplement sur la touche « s » de votre clavier une fois que la présentation a démarré. Cela ouvrira une nouvelle fenêtre qui vous affiche la vue du présentateur. Je vous recommande de le faire au début de la présentation et de la déplacer sur votre écran, en laissant la présentation normale sur le projecteur.
Sharing your presentation After you’ve presented, you may want to put the slides up for anyone to look at, or to send it to your audience. While you can share the source code, it’s never going to be quite as convenient as a PDF. To create a PDF of the slides, you can visit http://localhost:1313/?print-pdf - this enables a special print stylesheet. After that, just print the page from your browser, and choose a PDF printer (or save to PDF). An example can be found here: https://github.com/lswest/fcm-146-hugo-reveal/blob/master/FCM%20146%20Example%20Slide%20Deck.pdf
Partager votre présentation
Une fois la présentation faite, vous pourriez vouloir rendre disponible la présentation pour que chacun la regarde, ou l'envoyer à votre auditoire. Bien que vous puissiez partager le code source, rien n'est plus pratique qu'un PDF. Pour créer un PDF des diapos, vous pouvez visiter http://localhost:1313/?print-pdf, cela active une feuille de style spéciale pour l'impression. Après cela, imprimez la page à partir de votre navigateur et choisissez l'imprimante PDF (ou sauvegardez en PDF). Un exemple peut être trouvé ici : https://github.com/lswest/fcm-146-hugo-reveal/blob/master/FCM%20146%20Example%20Slide%20Deck.pdf
Conclusion Hopefully this article has adequately shown why Reveal.JS should be a valid consideration when creating code-heavy slideshows. If you have already used it, feel free to let me know about any bugs or issues you’ve run into. Also, if you have any questions or requests for new articles, feel free to reach out to me at lswest34+fcm@gmail.com.
Conclusion
Avec un peu de chance, cet article a suffisamment montré pourquoi Reveal.JS serait une solution valable pour créer des présentations pleines de code. Si vous l'avez déjà utilisé, n'hésitez pas à m'informer des défauts et problèmes que vous avez rencontrés. De même, si vous avez des questions ou des demandes de nouveaux articles, n'hésitez pas à me joindre à lswest34+fcm@gmail.com.
Further Reading https://github.com/dzello/reveal-hugo - reveal-hugo GitHub project. https://github.com/lswest/fcm-146-hugo-reveal - The project demo I set up for this article.
Pour aller plus loin
https://github.com/dzello/reveal-hugo - Projet reveal-hugo sur GitHub.
https://github.com/lswest/fcm-146-hugo-reveal - La démo de projet que j'ai montée pour cet article.