mirror of
https://github.com/Threnklyn/reveal-hugo.git
synced 2026-05-18 21:03:29 +02:00
Add example of using Hugo's highlighter
This commit is contained in:
@@ -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
|
- [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
|
- [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
|
- [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
|
### 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",
|
||||||
|
]
|
||||||
Reference in New Issue
Block a user