vitrine/themes/reveal-hugo/exampleSite/content/hugo-hl-example/_index.md

+++ 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, and it's lightning fast too!

---

You can enable it using the highlight shortcode.

{{< highlight go >}} {{</* highlight go */>}}

package main

import "fmt"

func main() { fmt.Println("Hello world!") }

{{</* /highlight */>}} {{< /highlight >}}

---

Several options are supported, check Hugo's documentation.

{{< highlight go "style=github,linenos=inline,hl_lines=8" >}} {{</* highlight go "style=github,linenos=inline,hl_lines=6" */>}}

package main

import "fmt"

func main() { fmt.Println("Hello world!") }

{{</* /highlight */>}} {{< / 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 >}}

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", ]