Hugo converting characters

support
1

Hi guys, I have been using Hugo for a few weeks and have hit up against an issue that I’m currently unable to solve.

I’m wondering if there is a way to have Hugo not convert certain characters to html entities. I am trying to pass something like the following into a Hugo partial:

{{ partial "component/button" (dict "vclasses" "{ 'is-active': visible }")  }}

The output looks something like this:

<button v-bind:class="{ &amp;#39;is-active&amp;#39;: visible }">...</button>

In which strings are converted. This is causing me problems in my Vue app as it is not able to parse the entities correctly (Vue is fine, Vue Storybook is actually what is throwing errors).

Does anyone know if there is a pipe or function I can use to ensure that Hugo does not convert the commas and the output looks something more like this:

<button v-bind:class="{ 'is-active': visible }">...</button>

Thanks in advance guys, really loving Hugo!

2
1 Like
3

Must have missed this one when looking through the docs. Thank you so much!

4

safeHTML does work but it does not appear to work when rendered within the context of an element tag.

This will work:

{{ safeHTML .vclasses }}

However this still escapes:

\<div data-test="{{ safeHTML .vClasses }}">\</div>

Has anyone encountered this before?

5

For that you will need safe HTML attribute

6

Thanks so much guys, you are rock stars.

Issue is resolved :slight_smile:

7

@joel.stewart FYI can you format your code snippets as code by surrounding them with 3 backticks.

For example:

```
{{/* some code here */}}
```

I’ve gone ahead and edited your replies to reflect this.