Installing revealjs on Void Linux

revealjs is a JavaScript library for creating beautiful and interactive presentations using HTML. In this tutorial, we will cover how to install revealjs on Void Linux.

Prerequisites

Before you begin, make sure you have the following:

  • A Void Linux installation
  • A web server installed (e.g. nginx)

Installation

  1. Open a terminal window and update the package database:
sudo xbps-install -S
  1. Install Node.js:
sudo xbps-install -y nodejs
  1. Create a new directory for your presentation:
mkdir my-presentation
  1. Navigate to the directory:
cd my-presentation
  1. Install revealjs using npm:
npm install [email protected]

Note: The version number may change in the future. You can check the latest version on the revealjs homepage.

  1. Create an index.html file in your presentation directory:
touch index.html
  1. Open the index.html file using your preferred text editor and add the following code:
<!doctype html>
<html>
<head>
    <meta charset="utf-8">

    <title>My Presentation</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="node_modules/reveal.js/dist/reveal.css">
    <link rel="stylesheet" href="node_modules/reveal.js/dist/theme/white.css">

    <!-- Theme used for syntax highlighting of code -->
    <link rel="stylesheet" href="node_modules/reveal.js/plugin/highlight/monokai.css">

    <!-- Printing and PDF exports -->
    <script type="text/javascript" src="node_modules/reveal.js/plugin/print-pdf/print-pdf.js"></script>

    <!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
    <![endif]-->
</head>
<body>
<div class="reveal">
    <div class="slides">
        <section>
            <h1>Hello, World!</h1>
        </section>
    </div>
</div>

<script src="node_modules/reveal.js/dist/reveal.js"></script>

<script>
    // More info about config & dependencies:
    // - https://revealjs.com/config/
    // - https://revealjs.com/dependencies/
    Reveal.initialize({
        hash: true,

        plugins: [ RevealHighlight, RevealNotes, RevealMath ],
        keyboard: {13: 'next'}
    });
</script>
</body>
</html>

Note: This is a basic example. For more information on creating presentations using revealjs, check out the official documentation.

  1. Start your web server:
sudo sv start nginx
  1. Open your web browser and navigate to http://localhost/my-presentation/index.html.

Congratulations! You have successfully installed revealjs on Void Linux and created your first presentation using revealjs.