javascript.html

<!-- polyfill needed for IE11 and below -->
<script type="text/javascript" src={{ "reveal-hugo/object-assign.js" | relURL }}></script>
<!-- Printing and PDF exports -->
<!-- use Hugo to create the right path for the print stylesheet, then conditionally include it -->
{{- $reveal_location := $.Param "reveal_hugo.reveal_cdn" | default "reveal-js" -}}

<!-- load Reveal.js javascripts -->
<script src="{{ printf "%s/dist/reveal.js" $reveal_location | relURL }}"></script>

<!-- load default and user plugins -->
{{- $plugins := partial "internal/plugins" . -}}
{{ $pluginNames := slice }}
{{- range $plugins }}
  <script type="text/javascript" src="{{ .source | relURL }}"></script>
  {{ $pluginNames = $pluginNames | append .name }}
{{- end -}}

<!-- initialize Reveal.js -->
<script type="text/javascript">
  // Hugo lowercases all params and Reveal.js needs camelcase
  // So params in Hugo must be stored in snakecase and we camelize them here
  function camelize(map) {
    if (map) {
      Object.keys(map).forEach(function(k) {
        newK = k.replace(/(\_\w)/g, function(m) { return m[1].toUpperCase() });
        if (newK != k) {
          map[newK] = map[k];
          delete map[k];
        }
      });
    }
    return map;
  }

  var revealHugoDefaults = { center: true, controls: true, history: true, progress: true, transition: "slide" };
  var revealHugoSiteParams = {{ jsonify (partial "internal/func/cleanParams" .Site.Params.reveal_hugo) | safeJS }};
  var revealHugoPageParams = {{ jsonify (partial "internal/func/cleanParams" .Page.Params.reveal_hugo) | safeJS }};

  var revealHugoPlugins = {
    // generate an array of javascript objects
    plugins: {{ (printf "%s" (replace ( jsonify ( $pluginNames ) ) "\"" "")) | safeJS }}
  };

  // See all options - https://github.com/hakimel/reveal.js#configuration
  var options = Object.assign({},
    camelize(revealHugoDefaults),
    camelize(revealHugoSiteParams),
    camelize(revealHugoPageParams),
    camelize(revealHugoPlugins));

  Reveal.initialize(options);
</script>

{{/*  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 := false }}
{{ $hasMath := false }}
{{ range .Site.AllPages }}
  {{ if .Store.Get "hasMermaid" }}
    {{ $hasMermaid = true }}
  {{ end }}
  {{ if or .Params.math (.Store.Get "hasMath")  }}
    {{ $hasMath = true }}
  {{ end }}
{{ end }}

{{ if $hasMermaid }}
  {{- $mermaid_location := $.Param "reveal_hugo.mermaid_cdn" | default "__fetch_cdn__" -}} 

  {{ if eq $mermaid_location "__fetch_cdn__"  }}
    {{ $mermaid_location = resources.GetRemote "https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js" }}
    {{ $mermaid_location = $mermaid_location.RelPermalink }}
  {{ end  }}

  <script type="text/javascript" async src="{{ $mermaid_location }}?nocache={{ now.Unix }}">
    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);
          }
      });
    };

    // support current page reload with possible mermaid element
    render({currentSlide: Reveal.getCurrentSlide()});

    Reveal.on('slidechanged', render);
    Reveal.on('ready', render);
  </script>
{{ end }}

{{ if $hasMath }}
<script>
  MathJax = {
    tex: {
      inlineMath: [['$', '$'], ['\\(', '\\)']]
    },
    svg: {
      fontCache: 'global'
    }
  };
</script>

  {{- $mathjax_location := $.Param "reveal_hugo.mathjax_cdn" | default "__fetch_cdn__" -}} 

  {{ if eq $mathjax_location "__fetch_cdn__"  }}
    {{ $mathjax_location := resources.GetRemote "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js" }}
    <script type="text/javascript" id="MathJax-script" async src="{{ $mathjax_location.RelPermalink }}"></script>
  {{ else }}
    <script type="text/javascript" id="MathJax-script" async src="{{ $mathjax_location }}"></script>
  {{ end  }}
{{ end }}

{{- $custom_js := $.Param "reveal_hugo.custom_js" -}}
{{- if $custom_js -}}
<script type="text/javascript" src="{{ $custom_js | relURL }}"></script>
{{- end -}}