Configuration

Place configuration values in config.toml or a presentation's front matter (_index.md).

Reveal.js themes

Themes control the look and feel of your presentation. Set the theme param to any valid Reveal.js theme.

[params.reveal_hugo]
theme = "moon"

Use a custom theme

To use a custom Reveal.js theme, place the CSS file in the static directory and set the custom_theme param.

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

Bundled themes

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

highlight.js themes

To change the syntax highlighting theme, set the highlight_theme to a valid highlight.js theme name.

[params.reveal_hugo]
highlight_theme = "zenburn"

Extending the layout

Use partials to add HTML to the page for one or all presentations at a time.

💡 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.5 KiB Raw Blame History