Reveal.js Framework Presentation

Zakhar Hololobov (77605)

Introduction

This presentation was created as part of Assignment 2.
The goal is to demonstrate the use of the Reveal.js framework for creating modern, web-based presentations.

The presentation is written in Markdown and rendered using Quarto, which internally uses Reveal.js.

What is Reveal.js?

Reveal.js is an open-source JavaScript framework designed for creating interactive HTML presentations.

Key characteristics: - Runs directly in a web browser - Supports keyboard navigation - Allows both horizontal and vertical slides - Highly customizable through themes and plugins

Reveal.js is widely used in education, technical talks, and software documentation.

Why Reveal.js?

Reveal.js was chosen for this assignment because: - It is modern and web-based - It supports Markdown formatting - Presentations can be hosted publicly - It allows advanced navigation and layout options

These features make Reveal.js suitable for academic and professional presentations.

Markdown Formatting Support

Reveal.js supports Markdown syntax, which simplifies slide creation.

Examples of supported formatting: - Bold and italic text - Ordered and unordered lists - Blockquotes - Code blocks - Links and images

Markdown makes content easy to edit and maintain.

Example List and Quote

Example List

  1. Easy to write
  2. Easy to read
  3. Easy to modify
  4. Version control friendly

Example Quote

“Markdown allows you to focus on content rather than formatting.”

Image Support

Reveal.js presentations can include images from local files or external URLs.

Images improve: - Visual clarity - Audience engagement - Understanding of complex concepts

Below is an example image used in this presentation.

Quarto Logo

Vertical Slides Example

This is the parent horizontal slide.

Vertical Slide 1

Vertical slides are useful for: - Adding detailed explanations - Grouping related topics - Avoiding overcrowded slides

Use the Up/Down arrow keys to navigate.

Vertical Slide 2

Vertical navigation helps structure content hierarchically.

Advantages: - Clear logical flow - Better content organization - Improved user experience

Non-default Theme

Reveal.js provides multiple themes for styling presentations.

This presentation uses a non-default theme (Solarized) to: - Improve readability - Demonstrate customization - Fulfill assignment requirements

Themes can be changed easily in the configuration file.

Hosting on GitHub Pages

The presentation is hosted using GitHub Pages, which allows free public hosting of static websites.

Steps: 1. Render presentation to HTML 2. Push files to GitHub repository 3. Enable GitHub Pages 4. Access presentation via public URL

This makes the presentation accessible from anywhere.

Conclusion

In this assignment: - A Reveal.js-based presentation was created - Markdown formatting was used - Images and a non-default theme were added - Vertical and horizontal navigation was implemented - The presentation was published via GitHub Pages

This demonstrates practical usage of Reveal.js for academic purposes.

References

  • Reveal.js Official Website
  • Quarto Documentation
  • GitHub Pages Documentation