- - - -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`. - -```toml -[params.reveal_hugo] -history = true -slide_number = true -transition = 'zoom' -transition_speed = 'fast' -``` - -[Full list of params](https://github.com/hakimel/reveal.js/#configuration) - ---- - -## highlight.js themes - -To change the syntax highlighting theme, set the `highlight_theme` -to a valid [highlight.js theme name](https://highlightjs.org/static/demo/). - -```toml -[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 to put partials for different presentations and places in the DOM. -
- -| 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 | - - - - - -💡 You can also create an `end.html` to put content before the end of the `.reveal` div tag. - - - ---- - -## Custom CSS Example - -In `home/reveal-hugo/head.html`: - -```html - -``` - ---- - -## Custom JS Example - -In `home/reveal-hugo/body.html`: - -```html - -``` - ---- - -### Extending the layout -#### (alternative) - -You can declare a custom CSS or javascript in your configuration. - -```toml -[reveal_hugo] -custom_css = "css/custom.css" -custom_js = "js/custom.js" -``` - - - -These files can be located in `static/css`, `static/js` folder - -💡 See the [extending layout example](/extending-layout-example/#) for more details. - - diff --git a/content/home/features.md b/content/home/features.md deleted file mode 100644 index 5d70186..0000000 --- a/content/home/features.md +++ /dev/null @@ -1,25 +0,0 @@ -+++ -weight = 10 -+++ - -## What's included? - -- All Reveal.js HTML, CSS and JS (v3.9.2) -- All out-of-the-box Reveal.js themes -- Two custom Reveal.js themes (including this one) - -
-
- -[see the code on github](https://github.com/dzello/reveal-hugo) - ---- - -## Features - -- Write slides in Markdown in one or more files -- Shortcodes for fragments, sections, slides & more -- All Reveal.js parameters can be customized -- Any Hugo section can be output as a presentation -- Supports offline development or using a CDN - diff --git a/content/home/resources.md b/content/home/resources.md deleted file mode 100644 index e19cbc1..0000000 --- a/content/home/resources.md +++ /dev/null @@ -1,43 +0,0 @@ -+++ -weight = 42 -+++ - -# Resources - ---- - -## Code and docs - -- [reveal-hugo Github README](https://github.com/dzello/reveal-hugo) -- [Content for this presentation](https://github.com/dzello/reveal-hugo/tree/master/exampleSite) - ---- - -## External resources - -- [Reveal.js](https://revealjs.com/) -- [Hugo docs](https://gohugo.io/) -- [Hugo output format docs](https://gohugo.io/templates/output-formats/) - ---- - -## Designed to... - -- Deploy to [Netlify](https://netlify.com/) -- Edit with [Forestry](https://forestry.io/) - ---- - -# 🙏 - -Contribute by opening issues and pull requests. - ---- - -# Thanks! - ---- - -# ↩️ - -#### [Start over](#) diff --git a/content/home/shortcodes/fragment.md b/content/home/shortcodes/fragment.md deleted file mode 100644 index e53592c..0000000 --- a/content/home/shortcodes/fragment.md +++ /dev/null @@ -1,41 +0,0 @@ -+++ -weight = 30 -+++ - -## Fragment - -The `fragment` shortcode makes content appear incrementally. - -``` -{{%/* fragment */%}} One {{%/* /fragment */%}} -{{%/* fragment */%}} Two {{%/* /fragment */%}} -{{%/* fragment */%}} Three {{%/* /fragment */%}} -``` - -{{% fragment %}} One {{% /fragment %}} -{{% fragment %}} Two {{% /fragment %}} -{{% fragment %}} Three {{% /fragment %}} - ---- - -## Frag - -The `frag` shortcode is more terse than `fragment`. It accepts a `c` attribute. - -``` -{{}} -{{}} -{{}} -``` - -{{< frag c="One" >}} -{{< frag c="Two" >}} -{{< frag c="Three" >}} - ---- - -Both `fragment` and `frag` accept two additional parameters: - -- `class`: sets the class of the wrapping `span` element -- `index`: controls the order in which sections will appear - diff --git a/content/home/shortcodes/introduction.md b/content/home/shortcodes/introduction.md deleted file mode 100644 index 2978a52..0000000 --- a/content/home/shortcodes/introduction.md +++ /dev/null @@ -1,11 +0,0 @@ -+++ -weight = 29 -+++ - -# Shortcodes - ---- - -Hugo's shortcodes are similar to functions or templates that extend what you can do with Markdown. - -[Shortcode documentation](https://gohugo.io/content-management/shortcodes/) \ No newline at end of file diff --git a/content/home/shortcodes/markdown.md b/content/home/shortcodes/markdown.md deleted file mode 100644 index 0c49b4e..0000000 --- a/content/home/shortcodes/markdown.md +++ /dev/null @@ -1,38 +0,0 @@ -+++ -weight = 36 -+++ - -{{< markdown >}} - -## Markdown - -Reveal.js has its own [markdown processor](https://github.com/hakimel/reveal.js#markdown). To use that instead of Hugo, surround a slide with the markdown shortcode. - -```markdown -{{}} - -# Hello world! - -{{}} -``` - -
- -💡 Make sure to use the `{{}}` shortcode syntax to avoid rendering by Hugo. - - ---- - - - -Reveal.js markdown uses HTML comments to change slide properties, like background color. - -```markdown -{{}} - -# I'm a colorful slide -{{}} -``` - -{{< /markdown >}} - diff --git a/content/home/shortcodes/other.md b/content/home/shortcodes/other.md deleted file mode 100644 index fda5276..0000000 --- a/content/home/shortcodes/other.md +++ /dev/null @@ -1,49 +0,0 @@ -+++ -weight = 38 -+++ - -## Notes - -Add speaker notes (with markdown) to your presentation with the `note` shortcode. Type 's' to see this slide's speaker notes. - -```markdown ---- - -{{%/* note */%}} -- You found the **speaker notes**! -{{%/* /note */%}} - ---- -``` - -{{% note %}} -- You found the **speaker notes**! -{{% /note %}} - ---- - -{{< slide notes="You found the notes!" >}} - -## Notes - -You can also add notes with the `slide` shortcode and `notes` attribute: - -```markdown ---- - -{{%/* slide notes="You found the notes!" */%}} - ---- -``` - ---- - -
Write slides in HTML
-Use a section tag with a data-noprocess attribute to avoid any processing by reveal-hugo.
-<section data-noprocess> - <h1>Hello world!</h1> -</section>- 💡 This is useful if you can't get Markdown to output exactly what you want. -
- -use the down arrow or swipe down to continue - -
-🔽 - ---- - -Put the shortcode around the slides you want to group together. - -```markdown -{{%/* section */%}} - -## Section slide 1 - ---- - -## Section slide 2 - -{{%/* /section */%}} -``` - -Keep going down. - ---- - -## That's it! - -Use the right arrow or swipe right to continue. - -{{% /section %}} - - diff --git a/content/home/shortcodes/slide.md b/content/home/shortcodes/slide.md deleted file mode 100644 index 3ce5b8c..0000000 --- a/content/home/shortcodes/slide.md +++ /dev/null @@ -1,250 +0,0 @@ -+++ -weight = 34 -+++ - -## Slide - -Use this shortcode when you need to customize slide attributes like id, class, background color and transition. - ---- - -{{< slide class="hello" >}} - -## Slide - -Add the shortcode above the slide's content, below the `---`. - -```markdown ---- - -{{}} - -## Hello, world! - ---- -``` - ---- - -{{< slide transition="zoom" transition-speed="fast" >}} - -## Custom slide 1 - -Did you notice? This slide has a fast zoom transition. - -```markdown ---- - -{{}} - -## Custom slide 1 - ---- -``` - ---- - -{{< slide background-color="#FF4081" >}} - -## Custom slide 2 - -This slide has a different background color. - -```markdown ---- - -{{}} - -## Custom slide 2 - ---- -``` - ---- - -{{< slide background-image="/images/alex-litvin-790876-unsplash.jpg" background-color="#000000" >}} - -## Custom slide 3 - -This slide has a background image. - -```markdown ---- - -{{}} - ---- -``` - -(credit Alex Litvin) - ---- - -{{< slide id="custom-slide" >}} - -💡 Tip: Setting a slide's `id` attribute makes it easy to link to from other parts of the presentation. -
- -```markdown ---- - -{{}} - -## Custom slide - ---- -``` - ---- - -```markdown -[Try the link](#custom-slide) -``` - -
- -[Try the link](#custom-slide) - ---- - -Slide attribute possibilities from the [Reveal.js docs](https://github.com/hakimel/reveal.js): - -- `autoslide` -- `state` -- `background` -- `background-color` -- `background-image` -- `background-size` -- `background-position` -- `background-repeat` - ---- - -- `background-video` -- `background-video-loop` -- `background-video-muted` -- `background-interactive` -- `background-iframe` -- `background-transition` -- `transition` (can have different in and out transitions) -- `transition-speed` -- `notes` (can also use the note shortcode) -- `timing` - ---- - -{{% section %}} - -## Slide templates - -Store sets of common slide attributes in front matter variables and apply them to slides with the template attribute. - -
- -navigate down to learn more - -
-🔽 - ---- - -Create templates in config.toml, _index.md or the current page's front matter. Put them under the **templates** key with a meaningful name: - -```toml -[reveal_hugo.templates.hotpink] -class = "hotpink" -background = "#FF4081" -``` - ---- - -{{< slide template="hotpink" >}} - -Apply the template using the **template** attribute of the slide shortcode: - -```markdown -{{}} - -# I'm a hot pink slide! -``` - ---- - -If a template exists in multiple configurations, it's properties will be merged. If a property is declared multiple times, the order of precedence is: - -- page -- section (_index.md) -- site (config.toml) - -{{% /section %}} - ---- - -{{% section %}} - -{{< slide content="home.reusable" >}} - ---- - -{{< slide content="common.nested.reusable" >}} - -{{% /section %}} - ---- - -{{% section %}} - -## Slide-specific CSS - -Add more variety to your presentation by applying slide-specific CSS. - -
- -navigate down to learn more - -
-🔽 - ---- - -First, use the `slide` shortcode to give the slide a class: - -```markdown ---- - -{{}} - -# 📈 - -# 📊 - ---- -``` - ---- - -Next, use a layout extension partial like `reveal-hugo/head.html` to add CSS selectors: - -```html - -``` - ---- - -{{< slide class="side-by-side" >}} - -# 📈 - -# 📊 - -{{% /section %}} diff --git a/content/home/usage.md b/content/home/usage.md deleted file mode 100644 index a9ebe9d..0000000 --- a/content/home/usage.md +++ /dev/null @@ -1,109 +0,0 @@ -+++ -weight = 20 -+++ - -# Usage - ---- - -## Prerequisite - -First, add this to your `config.toml`: - -```toml -[outputFormats.Reveal] -baseName = "index" -mediaType = "text/html" -isHTML = true -``` - ---- - -### Presentation at site root - -Create `content/_index.md`: - -```markdown -+++ -outputs = ["Reveal"] -+++ - -# Slide 1 - -Hello world! -``` - ---- - -### Add slides - -Separate them by `---` surrounded by blank lines: - -``` -# Slide 1 - -Hello world! - ---- - -# Slide 2 - -Hello program! -``` - ---- - -### Add slides with other files - -Add slides to `content/home/*.md` - -```markdown -+++ -weight = 10 -+++ - -# Slide 3 - ---- - -# Slide 4 -``` - -💡 Tip: Use `weight` to specify the order that files should be considered. - ---- - -### Presentation at '/{section}/' - -Add slides to `content/{section}/_index.md`: - -```markdown -+++ -outputs = ["Reveal"] -+++ - -# Slide 1 - ---- - -# Slide 2 -``` - ---- - -Add slides from other files in `content/{section}/*.md` - -```markdown -+++ -weight = 10 -+++ - -# Slide 3 - ---- - -# Slide 4 -``` - -💡 Tip: Use `weight` to specify the order that files should be considered. - diff --git a/content/hugo-hl-example/_index.md b/content/hugo-hl-example/_index.md deleted file mode 100644 index 279254c..0000000 --- a/content/hugo-hl-example/_index.md +++ /dev/null @@ -1,113 +0,0 @@ -+++ -title = "Hugo highlighting example" -outputs = ["Reveal"] - -[reveal_hugo] -theme = "simple" -+++ - -## Hugo Highlighter Presentation - -This is an example of a presentation using Hugo's compile-time syntax highlighter. - ---- - -Reveal.js uses Javascript for syntax highlighting (via Highlight.js). This might slow the presentation down if many slides contain code. - ---- - -Hugo has a built-in [compile-time highlighter](https://gohugo.io/content-management/syntax-highlighting/), and it's lightning fast too! - ---- - -You can enable it using the `highlight` shortcode. - -{{< highlight go >}} -{{}} - -package main - -import "fmt" - -func main() { - fmt.Println("Hello world!") -} - -{{}} -{{< /highlight >}} - ---- - -Several options are supported, check [Hugo's documentation](https://gohugo.io/content-management/syntax-highlighting/). - -{{< highlight go "style=github,linenos=inline,hl_lines=8" >}} -{{}} - -package main - -import "fmt" - -func main() { - fmt.Println("Hello world!") -} - -{{}} -{{< / highlight >}} - ---- - -You can also use Hugo's highlighter in markdown code fences, -by putting this in `config.toml`: - -{{< highlight toml "style=github" >}} - -# use Hugo's hl in markdown (with or without a language tag) -[markup.highlight] -codeFences = true -style = "github" - -{{< /highlight >}} - -(This can only be enabled globally for all presentations.) - ---- - -- Highlight.js is automatically disabled in code blocks highlighted by Hugo. -- The two highlighters can be even mixed. - -{{< highlight go >}} -package main - -import "fmt" - -func main() { - fmt.Println("Hello world!") -} -{{< / highlight >}} - -```go -package main - -import "fmt" - -func main() { - fmt.Println("Hello world!") -} -``` - ---- - -If you don't need highlight.js at all, you can prevent it from loading. - -{{< highlight toml "style=github" >}} - -# This works both in config.toml and a presentation's front -# matter. Default plugins include highlight.js, so disable them -# and load those that we want manually. - -[params.reveal_hugo] -load_default_plugins = false -plugins = [ - "reveal-js/plugin/zoom-js/zoom.js", - "reveal-js/plugin/notes/notes.js", -] diff --git a/content/plugin-example/_index.md b/content/plugin-example/_index.md deleted file mode 100644 index 507eb5a..0000000 --- a/content/plugin-example/_index.md +++ /dev/null @@ -1,83 +0,0 @@ -+++ -title = "plugin-example" -description = "Shows how a Reveal.js plugin can be added and used" -outputs = ["Reveal"] -[reveal_hugo] -theme = "night" -margin = 0.2 -plugins = ["plugin/gallery/gallery.plugin.js"] -+++ - -# plugin-example - ---- - -This presentation demonstrates how a Reveal.js plugin can be added. - ---- - -The plugin is called [revealjs-simple-gallery](https://github.com/marcins/revealjs-simple-gallery). - ---- - -It can make any slide an image gallery. Here are a few examples. - ---- - -
-
-
- 
- 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-