• Install
• Usage
  • Serve
  • Edit
  • Maths
  • Theme/Styling
  • Logo

Nordtheme reveal-hugo template

This repository is a template for a minimal nord-themed reveal.js presentation.

Install

Firstly, to develop the presentation, you need to have Hugo installed.

brew install hugo
# also install optional Pygments package for syntax highlighting in presentation
pip3 install Pygments

Hugo will serve the presentation as a local static site in your web browser and update as you make changes in the source code of the presentation.

As this is a template repository, the easiest way to get up and running is to click on the 'Use template' button. See further instructions here.

However, if you just want a local presentation without using GitHub then clone this template in a directory (ideally named for your presentation)

presentation="awesome_conference"
git clone https://github.com/mbhall88/reveal-hugo-nord "$presentation"
cd "$presentation"
git submodule update --init

Usage

Serve

To serve the presentation in your web browser run the following from the root directory of the repository.

hugo serve

In your web browser, navigate to http://localhost:1313/ . Every time you make changes this webpage will auto-reload to reflect those changes.

You should see a screen that looks like this

Edit

The reveal-hugo docs have a great tutorial to get you up and running. There is also a thorough blog post here.

The config.toml is a central place for defining the settings of your presentation. A full list of configurations can be found here.

The slides themselves are within content/. _index.md is the "root" for your slides and you can also define presentation-wide settings in this file too. You can put all of your slides in _index.md if you wish, but you can likewise break them up into sections. Sections will be vertically stacked within the presentation when placed in content/home/.

So if we had an _index.md file that looked like This

+++
title = "My presentation"
outputs = ["Reveal"]
+++

# Hello, world!

This is my first slide.

---

# Hello Mars!

This is my second slide

---

## Mars method

This slide describes the methods and has a pretty plot

We could move the slides about Mars into their own section with the following setup.

content/_index.md

+++
title = "My presentation"
outputs = ["Reveal"]
+++

# Hello world!

This is my first slide.

content/home/mars.md

+++
weight = 10
+++
{{% section %}}
# Hello Mars!

This is my second slide

---

## Mars method

This slide describes the methods and has a pretty plot.
{{% /section %}}

Note: weight is how you define the order of slides. If you have another .md file with weight = 11 it will come after content/home/method.md. See this for more info.

For more information on sections, see the docs.

Maths

Maths rendering with MathJax is supported provided you have access to an internet connection when initially serving the slides.

In short, you write equations in Tex/LaTex format.

An example of adding an equation to a slide

## Cool equations

Displayed equations are wrapped in double-\$

$$\frac{n!}{k!(n-k)!} = \binom{n}{k}$$  

Inline equations like $E=mc^2$ are wrapped in single-\$

Theme/Styling

If you would like to make any changes to the font, colours, style etc. then this can be done in static/stylesheets/robot-lung-nord.css. The current stylesheet is a copy of the robot-lung theme, which I have changed some colours to match the nord colour scheme.

Logo

If you would like to add a logo to your slides then instructions can be found in this short tutorial.