Configuration

Reveal.js themes

Put in config.toml or a presentation's front matter.

Use the theme key for themes that come with Reveal.js.

[params.reveal_hugo]
theme = "moon"
highlight_theme = "zenburn"

Reveal.js themes · highlight.js themes

Use a custom theme

Use the custom_theme key to point to a CSS file in the static directory.

[params.reveal_hugo]
custom_theme = "reveal-hugo/themes/robot-lung.css"

Like this theme?

reveal-hugo comes with 2 extra Reveal.js themes:

robot-lung (this one)
sunblind

They live in the `static/reveal-hugo/themes` folder and also [on Github](https://github.com/dzello/revealjs-themes).

Reveal.js params

Set snakecase versions of Reveal.js params, which will be camelized and passed to Reveal.initialize.

[params.reveal_hugo]
history = true
slide_number = true
transition = 'zoom'
transition_speed = 'fast'

Full list of params

Extending the layout

Use partials to add HTML to the page at the closing of the head and the body tags, either for all presentations or just a specific one.

This is the recommended way to add script and style tags to customize your presentations.

Here is where partials go for different presentations and places on the page.

Presentation	Before </head>	Before </body>
All	reveal-hugo/head.html	reveal-hugo/body.html
Root	home/reveal-hugo/head.html	home/reveal-hugo/body.html
Section	{section}/reveal-hugo/head.html	{section}/reveal-hugo/body.html

Example customization

In home/reveal-hugo/head.html:

<style>
.reveal section h1 {
  color: blue;
}
</style>

In home/reveal-hugo/body.html:

<script type="text/javascript">
Reveal.addEventListener('slidechanged', function(event) {
  console.log("🎞️ Slide is now " + event.indexh);
});
</script>

2.3 KiB Raw Blame History