# Shortcode, readFile and javascript

**URL:** <https://discourse.gohugo.io/t/shortcode-readfile-and-javascript/44664>\
**Category:** support\
**Created:** [June 2, 2023, 4:27pm UTC](https://discourse.gohugo.io/t/shortcode-readfile-and-javascript/44664 "2023-06-02T16:27:57Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![anmith](https://avatars.discourse-cdn.com/v4/letter/a/b5a626/32.png) [@anmith](https://discourse.gohugo.io/u/anmith)\
**Post date:** [June 2, 2023, 4:27pm UTC](https://discourse.gohugo.io/t/shortcode-readfile-and-javascript/44664/1 "2023-06-02T16:27:57Z")

</div>

Something strange is happening and I don’t understand why … 🙄

I created a javascript-file “test.js” with a few lines of code

```auto
console.log("1");
console.log("2");
console.log("3");

```

and a shortcode “jscript” to embed the file in the page. The shortcode is located in the file “jscript.html”

```auto
{{- $file := printf "%s%s%s" "content/" .Page.File.Dir (.Get "file") -}}
{{ readFile $file | safeHTML }}

```

and is called like this

```auto
{{< jscript file="test.js" >}}

```

The content of the javascript file is displayed within the page content as expected.

However, when I enclose the two lines of code in a “script” tags

```auto
<script type="text/javascript">
{{- $file := printf "%s%s%s" "content/" .Page.File.Dir (.Get "file") -}}
{{ readFile $file | safeHTML }}
</script>

```

the output of the readFile is changed to this:

```auto
<script type="text/javascript">"console.log(\"1\");\nconsole.log(\"2\");\nconsole.log(\"3\");"
</script>

```

If I use “div” or “pre” tags instead of “script”,

```auto
<pre>
{{- $file := printf "%s%s%s" "content/" .Page.File.Dir (.Get "file") -}}
{{ readFile $file | safeHTML }}
</pre>

```

everything looks as expected:

```auto
<pre>console.log("1");
console.log("2");
console.log("3");
</pre>

```

Does anyone have an idea what is happening and why?

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [June 2, 2023, 4:41pm UTC](https://discourse.gohugo.io/t/shortcode-readfile-and-javascript/44664/2 "2023-06-02T16:41:40Z")

</div>

I would avoid readfile, code defensively, and pass the content through the `safeJS` template function.

```plaintext
content/
├── posts/
│ └── post-1/
│ ├── index.md
│ └── test.js
└── _index.md

```

layouts/shortcodes/jscript.html

```auto
{{ with .Page.Resources.Get (.Get "file") }}
  <script type="text/javascript">
    {{ .Content | safeJS }}
  </script>
{{ end }}

```

---

<div class="post-metadata">

**Author:** ![anmith](https://avatars.discourse-cdn.com/v4/letter/a/b5a626/32.png) [@anmith](https://discourse.gohugo.io/u/anmith)\
**Post date:** [June 2, 2023, 4:53pm UTC](https://discourse.gohugo.io/t/shortcode-readfile-and-javascript/44664/3 "2023-06-02T16:53:26Z")

</div>

Thanks,

I wasn’t aware safeHTML interferes wth the script tags as I saw javascript as a part of HTML.

What is the reason you’d avoid readFile? Performance? Error handling? or something else?

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [June 2, 2023, 4:58pm UTC](https://discourse.gohugo.io/t/shortcode-readfile-and-javascript/44664/4 "2023-06-02T16:58:04Z")

</div>

> [@anmith](#):
>
> What is the reason you’d avoid readFile?

Good question. I thought that template functions in the `os` namespace did not work with content mounts, but I just tested them again and they work.

If you use `os.ReadFile`, you can avoid hardcoding the content directory.

> The `os.ReadFile` function attempts to resolve the path relative to the root of your project directory. If a matching file is not found, \*\*it will attempt to resolve the path relative to the`contentDir`]. A leading path separator (`/` ) is optional.

---

<div class="post-metadata">

**Author:** ![anmith](https://avatars.discourse-cdn.com/v4/letter/a/b5a626/32.png) [@anmith](https://discourse.gohugo.io/u/anmith)\
**Post date:** [June 2, 2023, 5:31pm UTC](https://discourse.gohugo.io/t/shortcode-readfile-and-javascript/44664/5 "2023-06-02T17:31:59Z")

</div>

Good point and I admit your suggestion looks more elegant 😃

---

<div class="post-metadata">

**Author:** ![system](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/system/32/1_2.png) [@system](https://discourse.gohugo.io/u/system)\
**Post date:** [June 4, 2023, 5:32pm UTC](https://discourse.gohugo.io/t/shortcode-readfile-and-javascript/44664/6 "2023-06-04T17:32:33Z")

</div>

Closed on June 4, 2023, 5:32pm UTC

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.