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

Prerequisite

Disable codeFences in to your config.toml to prevent Hugo’s built-in highlighting for code inside of --- fences.

[markup.highlight]
codeFences = false

Theme

Specify a theme for Highlight.js in config.toml

[params.reveal_hugo]
highlight_theme = "github"

…or in the _index.md front matter

[reveal_hugo]
highlight_theme = "github"

Usage

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

```foo{}

```

Just line numbers

{}

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

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

Highlight specific lines

{<line numbers separated by comma>}

```go{1,3-5}
package main
import "fmt"
func main() {
    fmt.Println("Hello world!")
}
```

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

Multi step highlight

{<line numbers separated by pipe>}

```go{1|2|3-5}
package main
import "fmt"
func main() {
    fmt.Println("Hello world!")
}
```

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

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

💡 Put the custom CSS in either of these partials:

# for all presentations
layouts/partials/reveal-hugo/body.html

# for one presentation
layouts/partials/{presentation-name}/reveal-hugo/body.html

Thanks!