Inner javascripts in shortcodes shows as PRE

support
1

How can I avoid having my inner javascript in a shortcode show encapsulated within <pre></code>?

<script>
alert...

Shows as

<pre><code>alert...

If I add my JS inside a partial I get these:

var iframe = document.getElementById(&lsquo;iframe&rsquo;)

Instead of:

var iframe = document.getElementById('iframe');
1 Like
2

you give us only a small part information to help you …

this is my template to show panorama pictures … Compare and try to fix your template

{{ define "main" }}
<header>
	<h1><span class="dn di-l">{{ site.Title | markdownify }} &nbsp;</span><i class="fas fa-dragon fa-fw"></i>&nbsp;&nbsp;{{ .Page.Title | markdownify}}</h1>
	{{ partial "single-head" . }}
</header>
<article class="bt bb bw2 b--blue">
	{{ .Content }}
	<br/>
	<div id=osd class="ba vh-50 w-100"></div>
	<script src=https://cdnjs.cloudflare.com/ajax/libs/openseadragon/2.4.1/openseadragon.min.js ></script>
	<script>var viewer = OpenSeadragon({id:"osd",showFullPageControl: false,prefixUrl:"https://cdnjs.cloudflare.com/ajax/libs/openseadragon/2.4.1/images/",tileSources:"/panorama/{{.Params.directory}}/dzc_output.xml"});</script>
</article>
{{ end }}
1 Like
3

Problem occurs in shortcode, not template.

4

compare it to

5

As @ju52 said, we’d need to see the bigger part of your code. Because, in normal cases, JS within shortcodes works as expected. So, if you can’t help us with your code, sadly, no one can help you.

6

Javascript in shortcode is failing.
Here is my shortcodes/outils/mac-isaac.html shortcode.

<div class="alert border rounded-lg mb-4 mb-lg-5" style="max-width: 800px">
  <div class="row">
    <div class="col-12 col-md-9">
      <input type="checkbox" id="temperature" class="d-none" value="1">
      <label for="temperature" class="chip chip-action chip-filter">T° > 38°C</label>
      <input type="checkbox" id="cough" class="d-none" value="1">
      <label for="cough" class="chip chip-action chip-filter">Absence de toux</label>
      <input type="checkbox" id="adp" class="d-none" value="1">
      <label for="adp" class="chip chip-action chip-filter">ADP cervicales antérieures douloureuses</label>
      <input type="checkbox" id="tonsils" class="d-none" value="1">
      <label for="tonsils" class="chip chip-action chip-filter">Amygdales augmentées de volume/exsudat</label>
      <input type="checkbox" id="age" class="d-none" value="-1">
      <label for="age" class="chip chip-action chip-filter">Âge ≥ 45 ans</label>
    </div>
    <div class="col-12 col-md-3">
      <p class="typography-overline text-black-secondary mt-4 mt-md-0 mb-1">Score de Mac Isaac</p>
      <p id="counter" class="font-weight-bold" style="font-size: 3rem;line-height: 1.2;margin-bottom: 0;">0</p>
      <p id="explain" class="typography-caption text-muted mb-0">Origine virale.</p>
    </div>
  </div>
</div>
<script>
  // Score de Mac Isaac by djibe
  let score = 0;
  const Text = document.getElementById('explain');
  [...document.querySelectorAll('input[type="checkbox"]')].forEach(function(checkbox) {
    checkbox.addEventListener('change', function(e) {
      if (e.target.checked) {
        score += parseInt(e.target.value, 10)
      } else {
        score -= parseInt(e.target.value, 10)
      }
      document.getElementById('counter').innerHTML = score
      if ( score >= 2){
        Text.innerHTML = 'Faire un TDR.'
      } else {
        Text.innerHTML = 'Origine virale.'
      }
    })
  })
</script>

Called with {{< outils/mac-isaac >}} in markdown, the script part is compiled to <p>let score = 0; and ruins everything.

Thanks for your advice.

7

I just blindly copy-pasted your code in my website and it seems to work. I can see some checkboxes and selecting them changes the number in a big counter.

From what you described here, if that’s the file name of your shortcode, you’ve got it wrong. You can’t have / in file names. The shortcode should be saved in layouts/shortcodes. So, in you case, it can be, layouts/shortcodes/mac-isaac.html. Then in your markdown, call it using {{< maac-issac >}}.

8

OK everyone, I figured it out.

To write javascript in a shortcode:

  • Assign your javascript to a Go variable
    {{ $script := let score = 0; const Text = document.getElementById('explain'); [...document.querySelectorAll('input[type=\"checkbox\"]')].forEach(function(checkbox) { ... })
    }}

  • Use backticks ` to respect your code that is probably multi lines.

  • Escape double quotes " with \"

  • Then call your script variable with safeJS at the end of your shortcode
    <script>{{ $script | safeJS }}</script>

See my complete shortcode here https://github.com/djibe/recommandations-medicales/blob/master/layouts/shortcodes/outils/mac-isaac.html

Rendered version is in the Mac Isaac section: https://recommandations-medicales.netlify.app/recommandations/angine/

Enjoy.

9

That’s definitely a hacky way to get it working. But, whatever works. Cheers.

10

Thx for help

11

You can use / in shortcodes to organize them: Create your own shortcodes | Hugo

You can organize your shortcodes in subfolders, e.g. in layouts/shortcodes/boxes . These shortcodes would then be accessible with their relative path, e.g:
{{< boxes/square >}}

1 Like
12

Yeah, I just thought that you had stored it a folder other than layouts/shortcodes. Shouldn’t have assumed that. My bad.