Reveal.js, create presentations using CSS and HTML in Ubuntu 20.04

about revel.js

In the next article we are going to take a look at Reveal.js. With this software we will have the possibility of create presentations using HTML and CSS. It is an open source HTML presentation framework, with which any user with a web browser will be able to create presentations, in addition to being able to use all the functions that the framework offers for free.

The basic settings are for creating presentations only. The complete configuration will give us access to all the functions and plugins of reveal.js, to speaker notes, as well as development tasks required to make changes to the font.

Presentations made with reveal.js are based on open web technologies. This means that anything we can do on the web, we should be able to do it in our presentation too. We can change the styles with CSS, include an external web page using an iframe or add our own custom behavior using the JavaScript API what are you offering.

reveal.js example for ubunlog

This frame comes with a wide range of features including nested slides, Markdown support, automatic animation, PDF export, speaker notes, LaTeX support, and syntax highlighting code.

Reveal.js on Ubuntu 20.04

Before starting the Reveal.js installation it will be necessary that we first install some necessary packages. To do this, we will have to open a terminal (Ctrl + Alt + T) and execute the following command in it:

install dependencies

sudo apt install curl gnupg2 unzip git

The next step we will need to take is install NodeJS version 14, although version 10 onwards should work too. For this we have to add the nodejs repository, which we can do by typing in the same terminal:

install nodejs repository 14

curl -sL https://deb.nodesource.com/setup_14.x | sudo bash -

This will start the whole process of adding the repository along with your GPG key. Once the process is finished, we can install NodeJS with the following command:

install nodejs 14

sudo apt install nodejs

When the installation is finished, we will be able to check installed version of NodeJS executing the following command:

node version

node -v

Download and install Reveal.js

At this point, it’s time to start the download. To do this, we will clone Reveal.js repository using Git. To do this we will only have to open a terminal (Ctrl + Alt + T) and execute the following command:

download reveal.js

git clone https://github.com/hakimel/reveal.js.git

When the cloning is done, on our computer we will find a folder called revel.js. To access it e install the app, we will only have to use the following commands in the terminal (Ctrl + Alt + T):

install reveal.js

cd reveal.js

sudo npm install

Once all the application dependencies are installed, we can now run it using the following command:

start reveal.js server

npm start

The above command will indicate that the service will be provided through port 8000, which is the default port, along with the server’s IP address. Now, we just have to open our favorite web browser and go to http: // server-ip: 8000. In this direction we will see the default presentation of reveal.js, which will indicate that the installation has been a success.

start reveal.js

We will also be able change port using –port as follows:

npm start -- --port=8001

Once reveal.js is installed, it is recommended to refer to the guides for Markup options and of setting to fine-tune this framework. For more information about how to install reveal.js, users can also consult the page on GitHub of the project.

Reveal.js is an alternative to PowerPoint to create presentations, which we can use in education or even at work. By following the instructions in this article, any user will be able to install this program on an Ubuntu 20.04 system. Anyone can create great presentations using HTML and CSS.

If you want to know more about how to use this application, on the project website, users will be able to consult the official documentation. In it, its creator shows us how we can work with this tool in a very simple and fast way.

example platform slides

If you are interested in being able to enjoy the benefits of reveal.js without having to write HTML or Markdown, the creator also offers us the possibility to test slides.com. This is a visual editor and platform with all the functions of reveal.js.

Add Comment