Josh Dzielak
8e9fb9ea9e
Unfortunately the config.toml is shared by all the examples and so we try to push example-specific config into the index files. With markdown configuation that's not possible, so the best we can do is tell the user they need to comment it in to try it out. The better solution in the future would be to pull this example out into it's own Hugo site.
2.7 KiB
+++ title = "Reveal.js 3.9.0 highlighting example" outputs = ["Reveal"]
[reveal_hugo] theme = "white" highlight_theme = "vs" +++
Multiline highlighting with Highlight.js
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.
{{< highlight toml "style=github" >}} [markup.highlight] codeFences = false {{< /highlight >}}
❗ To properly view the rest of this example presentation with Highlight.js highlighting, you must now uncomment the line to disable codeFences in the exampleSite/config.toml file.
Theme
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 >}}
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 >}}
💡 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!