This is a template to create presentations written in Markdown and compile them to HTML with reveal.js. It uses a style similar to the LaTex templates for the corpus linguistics group (Junicode font, Humboldt Universität zu Berlin logo and colors). Remember to follow the HU guidelines when using the logo.

Prerequisites

Install Pandoc (https://pandoc.org/) for converting the markdown files to HTML. You can optionally install pandoc-watch (https://github.com/dloureiro/pandoc-watch) if you want to generate the slides in the background whenever the markdown file changes.

Write Markdown

See the Pandoc documentation at https://pandoc.org/MANUAL.html#producing-slide-shows-with-pandoc for how to write Slides with Markdown.

Compiling the slides

You can

• execute pandoc manually on the command line,
• use the predefined VS Code tasks, or
• use make.

make

The command

make

will compile all markdown files (.md) ending to HTML files with the same name.

You can remove the compiled HTML files with

make clean

To recompile the CSS after changing the reveal.js/css/theme/humboldt.scss file execute

make css

The generated HTML files will compile fast, but need the whole repository (including the images, CSS and JavaScript) to work properly. To create a self-contained version, which only needs the HTML itfself, call

make self

This will be much slower, but the generated .self.html file can be copied and used independently of the rest of the files.

PDF generation

The resulting HTML file needs access to the reveal.js and mathjax folder. To generate a self-contained PDF, open the presentation in Chrome or Chromium browser, append ?print-pdf to the URL and print it as PDF with the browser.

Pre-defined styles

Pandoc Markdown supports so-called “fenced divs” (https://pandoc.org/MANUAL.html#divs-and-spans). These blocks can have CSS classes assigned to them. You can change the theme in the file reveal.js/css/theme/humboldt.scss and re-compile the CSS to add new CSS styles.

Here is a list of already existing styles that you can use:

• center to center a text block
• alert for text that should be marked as extra important
• small, large and huge alter the font-size
• underline creates underlined text
• columns is a wrapper style around divs with the style column to create columns, e.g.

:::::::::::::: {.columns}
::: {.column width="30%"}

*First column*

:::
::: {.column width="70%"}

*Second column*

:::

::::::::::::::