diff options
| -rw-r--r-- | exampleSite/config.toml | 6 | ||||
| -rw-r--r-- | exampleSite/content/home/features.md | 2 | ||||
| -rw-r--r-- | exampleSite/content/home/usage.md | 23 | ||||
| -rw-r--r-- | layouts/_default/_markup/render-codeblock-mermaid.html | 4 | ||||
| -rw-r--r-- | layouts/partials/layout/javascript.html | 35 | ||||
| -rw-r--r-- | layouts/partials/reveal-hugo/slides.html | 2 | ||||
| -rw-r--r-- | theme.toml | 6 |
7 files changed, 72 insertions, 6 deletions
diff --git a/exampleSite/config.toml b/exampleSite/config.toml index b201cf0..41df78e 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -19,8 +19,8 @@ unsafe = true # choose between Hugo compile-time or Highlight.js # syntax highlighting for code inside of code fences [markup.highlight] -codeFences = false # use highlight.js -# codeFences = true # use hugo highlighting at compile time +# codeFences = false # use highlight.js +codeFences = true # use hugo highlighting at compile time style = "tango" # set a style for hugo highlighting [outputFormats.Reveal] @@ -34,4 +34,4 @@ history = true # used in content/template-example [params.reveal_hugo.templates.grey] background = "#424242" -transition = "convex"
\ No newline at end of file +transition = "convex" diff --git a/exampleSite/content/home/features.md b/exampleSite/content/home/features.md index 5d70186..ce89fe7 100644 --- a/exampleSite/content/home/features.md +++ b/exampleSite/content/home/features.md @@ -21,5 +21,5 @@ weight = 10 - Shortcodes for fragments, sections, slides & more - All Reveal.js parameters can be customized - Any Hugo section can be output as a presentation +- Supports mermaid codeblocks - Supports offline development or using a CDN - diff --git a/exampleSite/content/home/usage.md b/exampleSite/content/home/usage.md index a9ebe9d..65a3c6c 100644 --- a/exampleSite/content/home/usage.md +++ b/exampleSite/content/home/usage.md @@ -53,6 +53,29 @@ Hello program! --- +### Mermaid + +Slides can contain [mermaid](https://mermaid-js.github.io/mermaid/#/) diagrams + +```code +graph LR + A --> B + B --> C +``` + +results in: + +```mermaid +graph LR + A --> B + B --> C +``` + +<small>💡 Note: hugo highlighting must be on (codeFences = true in config.toml)</small> + + +--- + ### Add slides with other files Add slides to `content/home/*.md` diff --git a/layouts/_default/_markup/render-codeblock-mermaid.html b/layouts/_default/_markup/render-codeblock-mermaid.html new file mode 100644 index 0000000..2ed7001 --- /dev/null +++ b/layouts/_default/_markup/render-codeblock-mermaid.html @@ -0,0 +1,4 @@ +<div class="mermaid"> + {{- .Inner | safeHTML }} +</div> +{{ .Page.Store.Set "hasMermaid" true }} diff --git a/layouts/partials/layout/javascript.html b/layouts/partials/layout/javascript.html index fe99cb9..4022bf5 100644 --- a/layouts/partials/layout/javascript.html +++ b/layouts/partials/layout/javascript.html @@ -57,6 +57,41 @@ {{ range $.Param "reveal_hugo.plugins" }} <script type="text/javascript" src="{{ . | relURL }}"></script> {{ end }} + +{{/* check if we need to load mermaid and its render trick. + mermaid is not rendered correctly in reveal if we don't hook + to the slidechanged event. (mermaid viewBox element has wrong sizes). + manage hot-reload by using the reveal ready event. +*/}} +{{ $hasMermaid := true }} +{{ range .Site.RegularPages }} +{{ if .Store.Get "hasMermaid" }} + {{ $hasMermaid = true }} +{{ end }} +{{ end }} + +{{ if $hasMermaid }} + <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> + <script> + mermaid.initialize({startOnLoad: false}); + let render = (event) => { + let mermaidElems = event.currentSlide.querySelectorAll('.mermaid'); + if (!mermaidElems.length){ + return + } + mermaidElems.forEach(mermaidElem => { + let processed = mermaidElem.getAttribute('data-processed'); + if (!processed){ + // https://github.com/mermaid-js/mermaid/issues/311#issuecomment-332557344 + mermaid.init(undefined, mermaidElem); + } + }); + }; + Reveal.addEventListener('slidechanged', render); + Reveal.addEventListener('ready', render); + </script> +{{ end }} + {{- $custom_js := $.Param "reveal_hugo.custom_js" -}} {{- if $custom_js -}} <script type="text/javascript" src="{{ $custom_js | relURL }}"></script> diff --git a/layouts/partials/reveal-hugo/slides.html b/layouts/partials/reveal-hugo/slides.html index 0bed8a9..63f72da 100644 --- a/layouts/partials/reveal-hugo/slides.html +++ b/layouts/partials/reveal-hugo/slides.html @@ -1,7 +1,7 @@ <!-- Use the array of pages passed as a param --> {{ range . -}} <!-- Don't process empty content files --> - {{- if ne (len .Content) 0 -}} + {{- if .Content -}} <!-- 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 --> @@ -12,4 +12,8 @@ homepage = "https://dzello.com/" [original] name = "reveal.js" homepage = "https://revealjs.com" -repo = "https://github.com/hakimel/reveal.js/"
\ No newline at end of file +repo = "https://github.com/hakimel/reveal.js/" + +[module] + [module.hugoVersion] + min = "0.93.0" |