Merge pull request #55 from chatziko/hugo-highlighter

Support for Hugo's highlighter

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
 
@@ -329,7 +330,8 @@ Customize the Reveal.js presentation by setting these values in `config.toml` or
 - `reveal_hugo.highlight_theme`: The [highlight.js](https://highlightjs.org/) theme used; defaults to "default"
 - `reveal_hugo.reveal_cdn`: The location to load Reveal.js files from; defaults to the `reveal-js` folder in the static directory to support offline development. To load from a CDN instead, set this value to `https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.7.0` or whatever CDN you prefer.
 - `reveal_hugo.highlight_cdn`: The location to load highlight.js files from; defaults to to the `highlight-js` folder in the static directory to support offline development. To load from a CDN instead, set this value to `https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0` or whatever CDN you prefer.
-- `reveal_hugo.plugins`: An array of additional Reveal.js plugins to load, e.g. `["plugin/gallery/gallery.plugin.js"]`. The appropriate files will need to have been copied into the `static` directory. CDN loading is not supported. The plugins included by default are markdown, highlight.js, notes and zoom. See here for a [big list of plugins](https://github.com/hakimel/reveal.js/wiki/Plugins,-Tools-and-Hardware) you can try.
+- `reveal_hugo.load_default_plugins`: If set to true (default), the plugins included by default are loaded. These are markdown, highlight.js, notes and zoom.
+- `reveal_hugo.plugins`: An array of additional Reveal.js plugins to load, e.g. `["plugin/gallery/gallery.plugin.js"]`. The appropriate files will need to have been copied into the `static` directory. CDN loading is not supported. See here for a [big list of plugins](https://github.com/hakimel/reveal.js/wiki/Plugins,-Tools-and-Hardware) you can try.
 
 This is how parameters will look in your `config.toml`:
 

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",
+]

layouts/partials/layout/javascript.html

@@ -47,12 +47,14 @@
 </script>
 <!-- load Reveal.js plugins after Reveal.js is initialized -->
 <script type="text/javascript" src="{{ printf "%s/lib/js/classList.js" $reveal_location | relURL }}"></script>
+{{ if $.Param "reveal_hugo.load_default_plugins" | default true }}
   {{ $default_plugins := slice "plugin/markdown/marked.js" "plugin/markdown/markdown.js" "plugin/highlight/highlight.js" "plugin/zoom-js/zoom.js" }}
   {{ range $default_plugins }}
   <script type="text/javascript" src="{{ printf "%s/%s" $reveal_location . | relURL }}"></script>
   {{ end }}
   <!-- always use local version of the notes plugin since HTML file it requires isn't on CDN -->
   <script type="text/javascript" src="{{ "reveal-js/plugin/notes/notes.js" | relURL }}"></script>
+{{ end }}
 <!-- load custom plugins locally only (not CDN since many plugins won't exist there) -->
 {{ range $.Param "reveal_hugo.plugins" }}
 <script type="text/javascript" src="{{ . | relURL }}"></script>

layouts/partials/layout/theme.html

@@ -16,6 +16,8 @@
   {{- $theme := $.Param "reveal_hugo.theme" | default "black" -}}
   <link rel="stylesheet" href="{{ printf "%s/css/theme/%s.css" $reveal_location $theme | relURL }}" id="theme">
 {{ end -}}
+{{ if $.Param "reveal_hugo.load_default_plugins" | default true -}}
   <!-- Theme used for syntax highlighting of code -->
   {{- $highlight_theme := $.Param "reveal_hugo.highlight_theme" | default "default" -}}
   <link rel="stylesheet" href="{{ printf "%s/%s.min.css" $highlight_location $highlight_theme | relURL }}">
+{{- end }}

layouts/partials/reveal-hugo/slides.html

@@ -4,6 +4,9 @@
   {{- if ne (len .Content) 0 -}}
     <!-- Remove the <hr /> tag generated by blackfriday for footnotes -->
     {{- $content := replace .Content "<div class=\"footnotes\">\n\n<hr />" "<div class=\"footnotes\">" -}}
+    <!-- <code> blocks processed by Hugo's highlighter have a data-lang attribute. For those, we disable -->
+    <!-- highlight.js by changing the language class to "nohighlight", and adding "data-noescape".       -->
+    {{- $content := replaceRE `<code class="language-\w+"\s+data-lang="\w+"` `<code class="nohighlight" data-noescape` $content -}}
     <!-- Support both <hr /> (blackfriday) and <hr> (mmark) -->
     {{- $content := replace $content "<hr>" "<hr />" -}}
     <!-- Split the processed content by <hr /> tag -->