# Shortcode surrounded by generated code

**URL:** <https://discourse.gohugo.io/t/shortcode-surrounded-by-generated-code/29357>\
**Category:** support\
**Created:** [November 12, 2020, 1:20am UTC](https://discourse.gohugo.io/t/shortcode-surrounded-by-generated-code/29357 "2020-11-12T01:20:09Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![jan\_at\_gohugo](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jan_at_gohugo/32/12571_2.png) [@jan\_at\_gohugo](https://discourse.gohugo.io/u/jan_at_gohugo)\
**Post date:** [November 12, 2020, 1:20am UTC](https://discourse.gohugo.io/t/shortcode-surrounded-by-generated-code/29357/1 "2020-11-12T01:20:09Z")

</div>

I have a shortcode for render-image.html like this:

```auto
{{- $img := .Page.Resources.GetMatch .Destination -}}
{{- $imagefit := .Page.Param "image-fit" | default .Page.Site.Params.defaultImageFit -}}
{{- $imageMax := .Page.Param "max-fit" | default .Page.Site.Params.defaultImageMaxFit -}}
{{- $galleryId := md5 .Page.Permalink}}
{{- with $img -}}
<figure>
    {{ $fit := .Fit $imagefit }}
    {{ $max := .Fit $imageMax }}
    <a href="{{$max.RelPermalink}}" data-lightbox="gallery-{{$galleryId}}">
        <img src="{{ $fit.RelPermalink }}" alt="{{ $.Text }}" title="{{ with $.Title }}{{ . }}{{ end }}" />
    </a>
    {{- else -}}
    <img src="{{ .Destination | safeURL }}" alt="{{ $.Text }}" title="{{ with $.Title }}{{ . }}{{ end }}" />
    {{- end -}}
    <figcaption>{{ with $.Title }}{{ . }}{{ end }}</figcaption>
</figure>

```

However, when I use it in markdown, lie so:

```auto
![](image1.jpg)

![](image1.jpg)

Some text ![](image3.jpg)

```

it is being rendered as

```auto
<p></p>
<figure> ... </figure
<p></p>
<figure> ... </figure
<p></p>
Some text <figure>...</figure>
<p></p>

```

Those empty

tags are a bit of a nuisance, I would wish I could avoid them.  
The “Some text” part is a bit more complicated. I wonder what a correct way to render this should look like.

Probably

```auto
<p>Some text</p>
<figure>...</figure>

```

as a figure tag should not be within a p.

[edited for better viewability]

---

<div class="post-metadata">

**Author:** ![gethugothemes](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/gethugothemes/32/13287_2.png) [@gethugothemes](https://discourse.gohugo.io/u/gethugothemes)\
**Post date:** [November 12, 2020, 6:27am UTC](https://discourse.gohugo.io/t/shortcode-surrounded-by-generated-code/29357/2 "2020-11-12T06:27:30Z")

</div>

Try using ````` to surround code blocks like Markdown too. I assume you have more than one newline in your markdown. That might result in empty paragraphs. But exactly that part of the question is hidden 🙂

---

<div class="post-metadata">

**Author:** ![jan\_at\_gohugo](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jan_at_gohugo/32/12571_2.png) [@jan\_at\_gohugo](https://discourse.gohugo.io/u/jan_at_gohugo)\
**Post date:** [November 12, 2020, 12:15pm UTC](https://discourse.gohugo.io/t/shortcode-surrounded-by-generated-code/29357/3 "2020-11-12T12:15:09Z")

</div>

The short code was messed up, the opening figure tag had to go before the leading with clause, which had to end just before the closing figure tag. Like so:

```auto
{{- $img := .Page.Resources.GetMatch .Destination -}}
{{- $imagefit := .Page.Param "image-fit" | default .Page.Site.Params.defaultImageFit -}}
{{- $imageMax := .Page.Param "max-fit" | default .Page.Site.Params.defaultImageMaxFit -}}
{{- $galleryId := md5 .Page.Permalink}}
<figure>
    {{- with $img -}}
    {{ $fit := .Fit $imagefit }}
    {{ $max := .Fit $imageMax }}
    <a href="{{$max.RelPermalink}}" data-lightbox="gallery-{{$galleryId}}">
        <img src="{{ $fit.RelPermalink }}" alt="{{ $.Text }}" title="{{ with $.Title }}{{ . }}{{ end }}" />
    </a>
    {{- else -}}
    <img src="{{ .Destination | safeURL }}" alt="{{ $.Text }}" title="{{ with $.Title }}{{ . }}{{ end }}" />
    {{- end -}}
    {{ with $.Title }}
    <figcaption>{{ . }}</figcaption>

    {{ end }}
</figure>

```

Now

```auto
![](image1.jpg)
![](image1.jpg)
Some text ![](image3.jpg)

```

renders as

```auto
<p>
<figure><img src="image1.jpg" alt="" title="" />
</figure>

<figure><img src="image1.jpg" alt="" title="" />
</figure>
Some text 
<figure><img src="image3.jpg" alt="" title="" />
</figure></p>

```

and

```auto

![](image1.jpg)

![](image1.jpg)

Some text ![](image3.jpg)

```

as

```auto
<p>
<figure><img src="image1.jpg" alt="" title="" />
</figure></p>
<p>
<figure><img src="image1.jpg" alt="" title="" />
</figure></p>
<p>Some text 
<figure><img src="image3.jpg" alt="" title="" />
</figure></p>

```

At least that’s ok, xml-wise.

I think, it should render

```auto
<figure><img src="image1.jpg" alt="" title="" />
</figure>
<figure><img src="image1.jpg" alt="" title="" />
</figure>
<p>Some text</p>
<figure><img src="image3.jpg" alt="" title="" />
</figure>

```

But the output is much more manageable, now.

---

<div class="post-metadata">

**Author:** ![gethugothemes](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/gethugothemes/32/13287_2.png) [@gethugothemes](https://discourse.gohugo.io/u/gethugothemes)\
**Post date:** [November 13, 2020, 7:11am UTC](https://discourse.gohugo.io/t/shortcode-surrounded-by-generated-code/29357/4 "2020-11-13T07:11:53Z")

</div>

The “idea” behind this `<p>`-Tag is, that an image is an inline tag. There is also a bug report open about this:

> <https://github.com/gohugoio/hugo/issues/6748>
>
> What version of Hugo are you using (hugo version)?
> $ hugo version
> Hugo Static Site Generator v0.62.2-83E50184/extended linux/amd64 BuildDate: 2020-01-05T18:57:23Z
> 
> Does this issue reproduce...

I don’t think there is a way yet to remove it. Maybe setting one of these configuration parameters will change things, but I couldn’t find documentation for them (false is the default):

```auto
[markup.goldmark.renderer]
hardWraps = false
unsafe = false
xhtml = false

```