Using RevealJS
Learning to use this open source HTML presentation framework
I am going to start using RevealJS to make presentations. Mostly to help with learning to code with JavaScript, HTML, CSS. But also because, the what you see is what you get features of programs like Powerpoint can be limiting, and uninspired. This is document mostly serves as a reference cheat sheet. I’ve published it here to serve as a place holder and
Installing RevealJS
RevealJS is an open source HTML presentation framework. Developed by Hakim El Hattab
- Install the latest version of Node.JS
This is a cross-platform, open-source server environment that can run on Windows, Linux, Unix, macOS.
- Clone RevealJS repository
Via the MacOS Terminal.
git clone https://github.com/hakimel/reveal.js.git
- Install all the dependencies needed to run revealJS
cd reveal.js && npm install
The cloned reveal.js initialization file will be downloaded and stored in your Home folder automatically. In my case that is
/Users/seyramb/reveal.js
Visual Studio Code
I am going to try and use visual studio code more frequently as opposed to the Quarto interface when using RevealJS. Quarto is great, but I am trying to learn a bit more coding (i.e., HTML, Javascript etc.). Quarto is fantastic for markdown, less so for those languages.
Another advantage is that I can write to the terminal directlly via VS Code. As opposed to opening the built-in
Anyway, to start a new session of RevealJS you may need to run the following code
killall -9 node
This may be necessary when getting the error Error: listen EADDRINUSE. It is an error resulting from a conflict of ports.
check to see if the above worked by typing ps ax.
Configuration Options
Take a look at the configuration options
It provides instructions on changing some f the finer aspects ofa presentation
hash: true, – This is the default position. Which shows the number in the slide, allowoing you to reference a specific slide via HTML link
progress: false, – False tends to be the default position. In the true option it will show a progress bar at the bottom of the slide deck (as a bar) that will show progress through the presentation. If you build your slide of a phone or tablet, showing the slide can be a bit of an incovenience as it may affect using the controls, which are sometimes on the bottom of the display.
controls: true, – Default posion is true which will show the controls typically the bottom right by default. See controlsLayout below.
controlsLayout: 'edges', – Options are “bottom-right” and “edges”. It is turned off if the controls: is false.
controlsTutoria: true, – Will provide a tutorial at the begining of the presentation on using the controls.
controlsBackArrows: 'faded' – Visibility rule for backwards navigation arrows; “faded”, “hidden” or “visible”
Several configuration options check out: https://revealjs.com/config/
Plugins and Built-In Pulgins
https://revealjs.com/plugins/
When you initialize there are a handful of preinstalled plugins.
Reveal.initialize({
hash: true,
progress: true,
controls: true,
controlsTutoria: true,
controlsLayout: 'edges',
controlsBackArrows: 'faded',
// Learn about plugins: https://revealjs.com/plugins/
plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
});
The automatic plugins as seen from above inlcude:
- RevealMarkdown – A plugin that allows you to develop slides in Markdown
<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>
- RevealHighlight –
Essentially add some tag before the relevant area to highlight which ensures that that the relevant text is highlited. For example, you have a list and wish to highlight a document.
<section>
<pre><code data-trim data-noescape>
(def lazy-fib
(concat
[0 1]
((fn rfib [a b]
(lazy-cons (+ a b) (rfib b (+ a b)))) 0 1)))
</code></pre>
</section>
- RevealNotes – These are speaker notes used with the following code.
<section>
<h2>Some Slide</h2>
<aside class="notes">
Shhh, these are your private notes 📝
</aside>
</section>
If you are using Markdown [I will probably using this frequently]
<section data-markdown="example.md" data-separator="^\n\n\n"
data-separator-vertical="^\n\n" data-separator-notes="^Note:">
# Title
## Sub-title
Here is some content...
Note:
This will only display in the notes window.
</section>
During the presentation, you are able to access the Speark Notes by simply pressing S on the keyboard.
Third Party Plug-ins
Accessed here - https://github.com/hakimel/reveal.js/wiki/Plugins,-Tools-and-Hardware
CSS Snipet
Sometimes, you are trying to develop a CSS for a project. css-snipet provides a way to do this live within the proejct you are developing.
https://github.com/soluml/reveal-css-snippet
css-snipet – Live css editing in code blocks.
You can play with it in CodePen
https://codepen.io/soluml/pen/QbQmoa
CopyCode
A simple plugin that automatically shows a ‘copy’ button in code blocks
https://github.com/Martinomagnifico/reveal.js-copycode
Which then allows you to copy the code snippet from the slide. It is a feature similar to what we see in Quarto/R generated markdown documents.
Changing Themes
There are several built in themes, with the default being called black.
You are free to customize the themes and build your own via CSS. I like the sky theme, but I may play around with the font a bit. i have used the solarized font as well.
To change the default themes, search for the following code snippet.
<link rel="stylesheet" href="dist/theme/sky.css">
Custom Styling
Transitions
Image Source: