160 lines
2.6 KiB
Markdown
160 lines
2.6 KiB
Markdown
+++
|
|
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](https://github.com/hakimel/reveal.js/blob/master/README.md#step-by-step-highlights) which were introduced with Reveal.js [v3.9.0](https://github.com/hakimel/reveal.js/releases/tag/3.9.0).
|
|
|
|
---
|
|
|
|
## Prerequisite
|
|
|
|
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 >}}
|
|
|
|
---
|
|
|
|
## 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 >}}
|
|
```foo{}
|
|
|
|
```
|
|
{{< /highlight >}}
|
|
|
|
---
|
|
|
|
## Just line numbers
|
|
|
|
`{}`
|
|
|
|
{{< highlight md >}}
|
|
```go{}
|
|
package main
|
|
import "fmt"
|
|
func main() {
|
|
fmt.Println("Hello world!")
|
|
}
|
|
```
|
|
{{< /highlight >}}
|
|
|
|
```go{}
|
|
package main
|
|
import "fmt"
|
|
func main() {
|
|
fmt.Println("Hello world!")
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Highlight specific lines
|
|
|
|
`{<line numbers separated by comma>}`
|
|
|
|
{{< highlight md >}}
|
|
```go{1,3-5}
|
|
package main
|
|
import "fmt"
|
|
func main() {
|
|
fmt.Println("Hello world!")
|
|
}
|
|
```
|
|
{{< /highlight >}}
|
|
```go{1,3-5}
|
|
package main
|
|
import "fmt"
|
|
func main() {
|
|
fmt.Println("Hello world!")
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Multi step highlight
|
|
|
|
`{<line numbers separated by pipe>}`
|
|
|
|
{{< highlight md >}}
|
|
```go{1|2|3-5}
|
|
package main
|
|
import "fmt"
|
|
func main() {
|
|
fmt.Println("Hello world!")
|
|
}
|
|
```
|
|
{{< /highlight >}}
|
|
|
|
```go{1|2|3-5}
|
|
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](https://github.com/dzello/reveal-hugo#adding-html-to-the-layout).
|
|
|
|
{{< highlight html "style=github" >}}
|
|
<style>
|
|
.hljs-ln-numbers {
|
|
display: none;
|
|
}
|
|
</style>
|
|
{{< /highlight >}}
|
|
|
|
---
|
|
|
|
💡 Put the custom CSS in either of these partials:
|
|
|
|
```text
|
|
# for all presentations
|
|
layouts/partials/reveal-hugo/body.html
|
|
```
|
|
|
|
```text
|
|
# for one presentation
|
|
layouts/partials/{presentation-name}/reveal-hugo/body.html
|
|
```
|
|
|
|
---
|
|
|
|
Thanks! |