# Inner javascripts in shortcodes shows as PRE

**URL:** https://discourse.gohugo.io/t/inner-javascripts-in-shortcodes-shows-as-pre/21095
**Category:** support
**Created:** [October 3, 2019, 9:48pm UTC](https://discourse.gohugo.io/t/inner-javascripts-in-shortcodes-shows-as-pre/21095 "2019-10-03T21:48:59Z")
**Posts on this page:** 13
**Page:** 1

<div class="post-metadata">

### Author: ![Javier\_Cabrera](https://avatars.discourse-cdn.com/v4/letter/j/b9bd4f/32.png) [@Javier\_Cabrera](https://discourse.gohugo.io/u/Javier_Cabrera)
#### Post date: [October 3, 2019, 9:48pm UTC](https://discourse.gohugo.io/t/inner-javascripts-in-shortcodes-shows-as-pre/21095/1 "2019-10-03T21:48:59Z")

</div>

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

```auto
<script>
alert...

```

Shows as

```auto
<pre><code>alert...

```

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

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

```

Instead of:

```auto
var iframe = document.getElementById('iframe');

```

---

<div class="post-metadata">

### Author: ![ju52](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/ju52/32/6749_2.png) [@ju52](https://discourse.gohugo.io/u/ju52)
#### Post date: [October 4, 2019, 8:24am UTC](https://discourse.gohugo.io/t/inner-javascripts-in-shortcodes-shows-as-pre/21095/2 "2019-10-04T08:24:51Z")

</div>

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 }}
```

---

<div class="post-metadata">

### Author: ![djibe](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/djibe/32/11341_2.png) [@djibe](https://discourse.gohugo.io/u/djibe)
#### Post date: [September 28, 2020, 4:58pm UTC](https://discourse.gohugo.io/t/inner-javascripts-in-shortcodes-shows-as-pre/21095/3 "2020-09-28T16:58:11Z")

</div>

Problem occurs in shortcode, not template.

---

<div class="post-metadata">

### Author: ![ju52](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/ju52/32/6749_2.png) [@ju52](https://discourse.gohugo.io/u/ju52)
#### Post date: [September 28, 2020, 5:04pm UTC](https://discourse.gohugo.io/t/inner-javascripts-in-shortcodes-shows-as-pre/21095/4 "2020-09-28T17:04:23Z")

</div>

compare it to

> [@Exclude shortcode content from jsonify](https://discourse.gohugo.io/t/exclude-shortcode-content-from-jsonify/28442):
>
> I’m trying to add site search using Lunr and so, generating index like this: {{ $.Scratch.Add "pagesIndex" slice }} {{ range $index, $page := where .Site.RegularPages "Type" "in" .Site.Params.mainSections }} {{ $pageData := (dict "title" $page.Title "href" $page.RelPermalink "tags" (delimit $page.Params.tags " ; ") "content" $page.Plain) }} {{ $.Scratch.Add "pagesIndex" $pageData }} {{ end }} {{ $.Scratch.Get "pagesIndex" | jsonify }} The problem is, the generated JSON also includes th…

---

<div class="post-metadata">

### Author: ![Hrishikesh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/hrishikesh/32/19176_2.png) [@Hrishikesh](https://discourse.gohugo.io/u/Hrishikesh)
#### Post date: [September 28, 2020, 5:20pm UTC](https://discourse.gohugo.io/t/inner-javascripts-in-shortcodes-shows-as-pre/21095/5 "2020-09-28T17:20:29Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![djibe](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/djibe/32/11341_2.png) [@djibe](https://discourse.gohugo.io/u/djibe)
#### Post date: [September 28, 2020, 5:22pm UTC](https://discourse.gohugo.io/t/inner-javascripts-in-shortcodes-shows-as-pre/21095/6 "2020-09-28T17:22:58Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Hrishikesh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/hrishikesh/32/19176_2.png) [@Hrishikesh](https://discourse.gohugo.io/u/Hrishikesh)
#### Post date: [September 28, 2020, 5:29pm UTC](https://discourse.gohugo.io/t/inner-javascripts-in-shortcodes-shows-as-pre/21095/7 "2020-09-28T17:29:20Z")

</div>

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.

> [@djibe](#):
>
> Here is my outils/mac-isaac.html shortcode

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 >}}`.

---

<div class="post-metadata">

### Author: ![djibe](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/djibe/32/11341_2.png) [@djibe](https://discourse.gohugo.io/u/djibe)
#### Post date: [September 28, 2020, 5:37pm UTC](https://discourse.gohugo.io/t/inner-javascripts-in-shortcodes-shows-as-pre/21095/8 "2020-09-28T17:37:05Z")

</div>

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](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/](https://recommandations-medicales.netlify.app/recommandations/angine/)

Enjoy.

---

<div class="post-metadata">

### Author: ![Hrishikesh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/hrishikesh/32/19176_2.png) [@Hrishikesh](https://discourse.gohugo.io/u/Hrishikesh)
#### Post date: [September 28, 2020, 5:38pm UTC](https://discourse.gohugo.io/t/inner-javascripts-in-shortcodes-shows-as-pre/21095/9 "2020-09-28T17:38:35Z")

</div>

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

---

<div class="post-metadata">

### Author: ![djibe](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/djibe/32/11341_2.png) [@djibe](https://discourse.gohugo.io/u/djibe)
#### Post date: [September 28, 2020, 5:39pm UTC](https://discourse.gohugo.io/t/inner-javascripts-in-shortcodes-shows-as-pre/21095/10 "2020-09-28T17:39:03Z")

</div>

Thx for help

---

<div class="post-metadata">

### Author: ![djibe](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/djibe/32/11341_2.png) [@djibe](https://discourse.gohugo.io/u/djibe)
#### Post date: [September 28, 2020, 5:42pm UTC](https://discourse.gohugo.io/t/inner-javascripts-in-shortcodes-shows-as-pre/21095/11 "2020-09-28T17:42:35Z")

</div>

You can use / in shortcodes to organize them: [Create your own shortcodes | Hugo](https://gohugo.io/templates/shortcode-templates/)

> 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 \>}}

---

<div class="post-metadata">

### Author: ![Hrishikesh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/hrishikesh/32/19176_2.png) [@Hrishikesh](https://discourse.gohugo.io/u/Hrishikesh)
#### Post date: [September 28, 2020, 5:43pm UTC](https://discourse.gohugo.io/t/inner-javascripts-in-shortcodes-shows-as-pre/21095/12 "2020-09-28T17:43:38Z")

</div>

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

---

<div class="post-metadata">

### Author: ![pointyfar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/pointyfar/32/5797_2.png) [@pointyfar](https://discourse.gohugo.io/u/pointyfar)
#### Post date: [September 28, 2020, 11:55pm UTC](https://discourse.gohugo.io/t/inner-javascripts-in-shortcodes-shows-as-pre/21095/13 "2020-09-28T23:55:04Z")

</div>