+++ title = "Reveal.js 3.9.0 highlighting example" outputs = ["Reveal"]
[reveal_hugo] theme = "white" highlight_theme = "vs" +++
This presentation shows the use of the new highlighting features which were introduced with Reveal.js v3.9.0.
Disable codeFences
in to your config.toml
to prevent Hugo's built-in highlighting for code inside of ---
fences.
{{< highlight toml "style=github" >}} [markup.highlight] codeFences = false {{< /highlight >}}
Specify a theme for Highlight.js in config.toml
{{< highlight toml "style=github" >}} [params.reveal_hugo] highlight_theme = "github" {{< /highlight >}}
...or in the _index.md
front matter
{{< highlight toml "style=github" >}} [reveal_hugo] highlight_theme = "github" {{< /highlight >}}
The line highlighting is configured by adding {}
immediately after the language selection of the markdown code block.
{{< highlight md >}}
{{< /highlight >}}
{}
{{< highlight md >}}
package main
import "fmt"
func main() {
fmt.Println("Hello world!")
}
{{< /highlight >}}
package main
import "fmt"
func main() {
fmt.Println("Hello world!")
}
{<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!")
}
{<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!")
}
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" >}} {{< /highlight >}}
💡 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!