diff --git a/README.md b/README.md index 8f1c3e2..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 @@ -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`: 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 >}} +{{}} + +package main + +import "fmt" + +func main() { + fmt.Println("Hello world!") +} + +{{}} +{{< /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" >}} +{{}} + +package main + +import "fmt" + +func main() { + fmt.Println("Hello world!") +} + +{{}} +{{< / 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", +] diff --git a/layouts/partials/layout/javascript.html b/layouts/partials/layout/javascript.html index e156716..dbc3528 100644 --- a/layouts/partials/layout/javascript.html +++ b/layouts/partials/layout/javascript.html @@ -47,12 +47,14 @@ -{{ $default_plugins := slice "plugin/markdown/marked.js" "plugin/markdown/markdown.js" "plugin/highlight/highlight.js" "plugin/zoom-js/zoom.js" }} -{{ range $default_plugins }} - +{{ 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 }} + + {{ end }} + + {{ end }} - - {{ range $.Param "reveal_hugo.plugins" }} diff --git a/layouts/partials/layout/theme.html b/layouts/partials/layout/theme.html index b4eacc7..8269862 100644 --- a/layouts/partials/layout/theme.html +++ b/layouts/partials/layout/theme.html @@ -16,6 +16,8 @@ {{- $theme := $.Param "reveal_hugo.theme" | default "black" -}} {{ end -}} - -{{- $highlight_theme := $.Param "reveal_hugo.highlight_theme" | default "default" -}} - \ No newline at end of file +{{ if $.Param "reveal_hugo.load_default_plugins" | default true -}} + + {{- $highlight_theme := $.Param "reveal_hugo.highlight_theme" | default "default" -}} + +{{- end }} \ No newline at end of file diff --git a/layouts/partials/reveal-hugo/slides.html b/layouts/partials/reveal-hugo/slides.html index ac54247..d1157b2 100644 --- a/layouts/partials/reveal-hugo/slides.html +++ b/layouts/partials/reveal-hugo/slides.html @@ -4,6 +4,9 @@ {{- if ne (len .Content) 0 -}} {{- $content := replace .Content "
\n\n
" "
" -}} + + + {{- $content := replaceRE ` (blackfriday) and
(mmark) --> {{- $content := replace $content "
" "
" -}}