reveal-hugo/exampleSite/content/highlightjs-linenumbers-example/_index.md

+++ title = "Reveal.js 3.9.0 highlighting example" outputs = ["Reveal"]

[reveal_hugo] theme = "white" highlight_theme = "vs" +++

New highlighting features Presentation

---

This presentation shows the use of the new highlighting features which were introduced with Reveal.js v3.9.0

---

Prerequisite

First, disable CodeFences in to your config.toml:

{{< highlight toml "style=github" >}} [markup.highlight] codeFences = false {{< /highlight >}}

---

Theme

Specify a theme for Highlight.js in config.toml

{{< highlight toml "style=github" >}} [params.reveal_hugo] highlight_theme = "github" {{< /highlight >}}

or in the frontmatter

{{< highlight toml "style=github" >}} [reveal_hugo] highlight_theme = "github" {{< /highlight >}}

---

Usage

The line highlighting is configured by adding {} immediately after the language selection of the markdown code block.

{{< highlight md >}}

{{< /highlight >}}

---

Just line numbers

{}

{{< highlight md >}}

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

{{< /highlight >}}

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

---

Highlight specific lines

{<line numbers separated by comma>}

{{< highlight md >}}

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

{{< /highlight >}}

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

---

Multi step highlight

{<line numbers separated by pipe>}

{{< highlight md >}}

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

{{< /highlight >}}

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

---

Hiding the line numbers

There is no Reveal.js parameter to use line highlighting without line numbers. However it can be achieved by adding the some custom CSS.

{{< highlight html "style=github" >}}

<style> .hljs-ln-numbers { display: none; } </style>

{{< /highlight >}}

💡 Tip: To hide line numbers for every presentation, put it here:

layouts/partials/reveal-hugo/body.html