title	Readme reveal.js template
header-includes	<!-- Fontawesome icons Links: - animate: https://fontawesome.com/docs/web/style/animate Example: <i class="fa-brands fa-linux"></i> --> <link rel="stylesheet" href="font-awesome/css/all.css">

Summary

This project provides a template for a presentation using the reveal.js framework by converting a Markdown file into a reveal.js HTML presentation with Pandoc.

This is not an official template and should not be used as such, I created it for personal use and as an inspiration to others.

Configure reveal.js and Pandoc through YAML frontmatter

---
title: title
date: today
author: author
affiliation: university, company, ...
lang: English
theme: night
...

New slides are indicated by headings #, ##, ... (determining horizontal/vertical progression in reveal.js, behaviour is influenced by Pandoc option --slide-level) or vertical lines ---.

Prerequisites

• Pandoc document converter: convert Markdown to reveal.js HTML file
• *task build tool
• *xdotool to reload browser window

* optional

Build

To build this project - create the reveal.js slides as a HTML file from the Markdown file presentation.md - install task and run task or execute the relevant commands in the Taskfile in your preferred way, e.g. with make.

Build and reload is the default task (target) of the provided Taskfile, call task -l to get a list of available tasks. This is achieved by converting the slides with Pandoc and then reloading the browser window using xdotool, see script reload_browser.sh

Pandoc is used with Mermaid filter and reveal.js codeblock lua filter (not working yet)

pandoc --from=markdown -t revealjs --slide-level 2 -s -o presentation.html presentation.md \
--verbose \
-F mermaid-filter \
-L revealjs-codeblock.lua

For inspiration on available features see these example presentations and references

• reveal.js documentation
  • Themes
  • Configuration
  • Backgrounds
  • Features
    • Fragments (fade in/out, highlight, etc. parts of slides)
    • Transitions
• reveal.js test slides by Joseph Reagle (not quite up-to-date)

You can set up your editor to run task after saving to automate this process. In VIM for example you can use the command

:autocmd BufWritePost *.md silent! !task

For the use of Font Awesome icons it is assumed that you have them installed on your system and a symlink font-awesome to the installation directory. If you don't want to use [Font-awesome] icons remove the corresponding import in the CSS file and usage in the presentation file.

Acknowledgements

presentation framework

Pandoc document converter

Mermaid diagrams and charts

Task runner / build tool

Font Awesome icons

---