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, 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.

 1{{< highlight go "style=github,linenos=inline,hl_lines=6" >}}
 2
 3package main
 4
 5import "fmt"
 6
 7func main() {
 8    fmt.Println("Hello world!")
 9}
10
11{{< /highlight >}}

You can also use Hugo’s highlighter in markdown code fences, by putting this in config.toml:

# use Hugo's hl in markdown (with or without a language tag)
[markup.highlight]
codeFences = true
style = "github"

(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.
package main

import "fmt"

func main() {
    fmt.Println("Hello world!")
}
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.

# 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

[[params.reveal_hugo.plugins]]
name = "RevealZoom"
source = "reveal-js/plugin/zoom-js/zoom.js"

[[params.reveal_hugo.plugins]]
name = "RevealNotes"
source = "reveal-js/plugin/notes/notes.js"