From 8fd91e3e30d899fc488feab4a3b9a5d9e955fe03 Mon Sep 17 00:00:00 2001
From: Kostas Chatzikokolakis <kostas@chatzi.org>
Date: Thu, 12 Sep 2019 17:52:08 +0300
Subject: [PATCH] Add example of using Hugo's highlighter

---
 README.md                                     |   1 +
 exampleSite/content/hugo-hl-example/_index.md | 113 ++++++++++++++++++
 2 files changed, 114 insertions(+)
 create mode 100644 exampleSite/content/hugo-hl-example/_index.md

diff --git a/README.md b/README.md
index ea12c55..52b7c2a 100644
--- a/README.md
+++ b/README.md
@@ -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
 
diff --git a/exampleSite/content/hugo-hl-example/_index.md b/exampleSite/content/hugo-hl-example/_index.md
new file mode 100644
index 0000000..b1863b4
--- /dev/null
+++ b/exampleSite/content/hugo-hl-example/_index.md
@@ -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",
+]