Add example of using Hugo's highlighter

This commit is contained in:
Kostas Chatzikokolakis
2019-09-12 17:52:08 +03:00
parent 83a0216daf
commit 8fd91e3e30
2 changed files with 114 additions and 0 deletions
+1
View File
@@ -50,6 +50,7 @@ Jump to the [exampleSite](exampleSite) folder in this repository to see the sour
- [plugin-example](https://reveal-hugo.dzello.com/plugin-example/) - Shows how to add additional Reveal.js plugins to your presentation, for example an image gallery
- [template-example](https://reveal-hugo.dzello.com/template-example/) - An example of using the slide shortcode with powerful templates
- [bundle-example](https://reveal-hugo.dzello.com/bundle-example/) - An example of creating a presentation from one or more markdown files in a leaf bundle
- [hugo-hl-example](https://reveal-hugo.dzello.com/hugo-hl-example/) - An example of using Hugo's compile-time syntax highlighter
### Starter repository
@@ -0,0 +1,113 @@
+++
title = "Hugo highlighting example"
outputs = ["Reveal"]
[reveal_hugo]
theme = "simple"
+++
## Hugo Highlighter Presentation
This is an example of a presentation using Hugo's compile-time syntax highlighter.
---
Reveal.js uses Javascript for syntax highlighting (via Highlight.js). This might slow the presentation down if many slides contain code.
---
Hugo has a built-in [compile-time highlighter](https://gohugo.io/content-management/syntax-highlighting/), and it's lightning fast too!
---
You can enable it using the `highlight` shortcode.
{{< highlight go >}}
{{</* highlight go */>}}
package main
import "fmt"
func main() {
fmt.Println("Hello world!")
}
{{</* /highlight */>}}
{{< /highlight >}}
---
Several options are supported, check [Hugo's documentation](https://gohugo.io/content-management/syntax-highlighting/).
{{< highlight go "style=github,linenos=inline,hl_lines=8" >}}
{{</* highlight go "style=github,linenos=inline,hl_lines=6" */>}}
package main
import "fmt"
func main() {
fmt.Println("Hello world!")
}
{{</* /highlight */>}}
{{< / highlight >}}
---
You can also use Hugo's highlighter in markdown code fences,
by putting this in `config.toml`:
{{< highlight toml "style=github" >}}
# use Hugo's hl in markdown (with or without a language tag)
pygmentsCodefences = true
pygmentsCodefencesGuessSyntax = true
pygmentsStyle = "github"
{{< /highlight >}}
(This can only be enabled globally for all presentations.)
---
- Highlight.js is automatically disabled in code blocks highlighted by Hugo.
- The two highlighters can be even mixed.
{{< highlight go >}}
package main
import "fmt"
func main() {
fmt.Println("Hello world!")
}
{{< / highlight >}}
```go
package main
import "fmt"
func main() {
fmt.Println("Hello world!")
}
```
---
If you don't need highlight.js at all, you can prevent it from loading.
{{< highlight toml "style=github" >}}
# This works both in config.toml and a presentation's front
# matter. Default plugins include highlight.js, so disable them
# and load those that we want manually.
[params.reveal_hugo]
load_default_plugins = false
plugins = [
"reveal-js/plugin/zoom-js/zoom.js",
"reveal-js/plugin/notes/notes.js",
]