Seyram A. Butame

You see the Black Skin Blue Eyed Boys/ They ain't gonna fight no wars.

Using RevealJS

Learning to use this open source HTML presentation framework

Coding Window

Coding Window.

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

  1. Install the latest version of Node.JS

This is a cross-platform, open-source server environment that can run on Windows, Linux, Unix, macOS.

  1. Clone RevealJS repository

Via the MacOS Terminal.

git clone

  1. 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


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:

Plugins and Built-In Pulgins

When you initialize there are a handful of preinstalled plugins.

				hash: true,
				progress: true,
				controls: true,
				controlsTutoria: true,
				controlsLayout: 'edges',
				controlsBackArrows: 'faded',

				// Learn about plugins:
				plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]

The automatic plugins as seen from above inlcude:

  1. 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](
    ## Slide 2
    ## Slide 3

  1. 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.

  <pre><code data-trim data-noescape>
(def lazy-fib
   [0 1]
   ((fn rfib [a b]
        (lazy-cons (+ a b) (rfib b (+ a b)))) 0 1)))

  1. RevealNotes – These are speaker notes used with the following code.
  <h2>Some Slide</h2>

  <aside class="notes">
    Shhh, these are your private notes 📝

If you are using Markdown [I will probably using this frequently]

<section data-markdown="" data-separator="^\n\n\n"
         data-separator-vertical="^\n\n" data-separator-notes="^Note:">
# Title
## Sub-title

Here is some content...

This will only display in the notes window.

During the presentation, you are able to access the Speark Notes by simply pressing S on the keyboard.

Third Party Plug-ins

Accessed here -,-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.

css-snipet – Live css editing in code blocks.

You can play with it in CodePen


A simple plugin that automatically shows a ‘copy’ button in code blocks

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


Image Source:

User interface research Animated Illustration by nanoagency

Window Icon by Jemis Mali