presentazione-pass/themes/reveal-hugo/exampleSite/content/hugo-hl-example/_index.md
2020-06-19 21:42:18 +02:00

2.1 KiB

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