Odd formatting/behavior with indentation and shortcode declaration

support
1

Hello!

I have a peculiar issue I’d like to get some opinions on and understand better how indents/spacing in Markdown/Hugo could have weird formatting output when rendered.

We have a shortcode include which basically just takes in a file name and displays the .Content of it. We use this shortcode a lot when displaying long code samples in our documentation. Furthermore, we have an expand shortcode which creates a collapsible dropdown that uses the .Inner function to show whatever content is in between the opening and closing tag. In our case, we use the include shortcode in there to sometimes show/hide long code samples that has less precedence.

We’ve noticed in the latest versions of Hugo that the following issue has started with the code samples.

image
image966×429 13.6 KB

The above image shows a code sample in an include shortcode that is being used in a list. When it is in a list, you can see the double spacing that’s occurring.

image
image1012×294 14.8 KB

However, the same code sample outside of a list but still being imported by the include shortcode is rendered properly.

image
image1360×210 17.3 KB

The Markdown (first image is line 23, second image is line 25) shows how the shortcode is being handled differently when it’s in a list/indented versus when it is outside of one.

Even more weirdly, I’m trying to understand how indents/spacing seem to create unexpected behavior in the rendering output. For example:

image
image1398×414 33.7 KB

In the above image, see how the include shortcode is indented on line 36, and how line 39 has a spacing before/after the include shortcode that’s nested inside the expand. These two examples cause the same behavior of creating the double spacing in the couple sample.

However, line 44 and line 47, when the indentation and spacing are removed, the code samples render correctly with the single spacing expected output.

Is there something I’m missing in how indentation/spacing could be creating these unexpected rendering issues? Is this a known issue with Hugo?

Thanks for your time!

Edit: I’m using Hugo version 104.1. Also providing the code for the above mentioned shortcodes in case the issue is somehow related to them:


{{ $file := .Get "file" }}
<!-- get the title of the page where we're using the include -->
{{ $title := $.Page.File.BaseFileName }}
{{ $url := $.Page.RelPermalink }}
{{ if $file }}
  <!-- if it exists, get the file and display the contents -->
  {{ $page := .Site.GetPage $file }}
  {{ with $page }}
  {{ .Content }}
{{- else -}}
  <!-- print to the terminal the include file and where it's being called that cannot be found -->
  {{ warnf "INCLUDE_NOT_FOUND [%s include not found in file %s.md at path %s]" $file $title $url }} 
{{- end -}}
{{ end }}`

Expand:

```<div class="expand">
    <div class="expand-label" title="Expand" tabindex="0" aria-label="Expand" aria-expanded="true" style="cursor: pointer; margin-bottom: 1rem; color: #1e53a0;" onclick="$h = $(this);$h.next('div').slideToggle(100,function () {$h.children('i').attr('class',function () {return $h.next('div').is(':visible') ? 'fas fa-chevron-down' : 'fas fa-chevron-right';});});">
        <i style="font-size:x-small;" class="fas fa-chevron-right"></i>
        <span style="font-size: 1rem; font-weight: bold; margin-top: 1rem;">
        &nbsp;
        {{ $expandMessage := T "Expand-title" }}
    	{{ if .IsNamedParams }}
    	{{ .Get "default" | default $expandMessage }}
    	{{ else }}
    	{{ .Get 0 | default $expandMessage }}
    	{{ end }}
        &nbsp;
    	</span>
    </div>
    <div class="expand-content" style="display: none; font-size: 1rem;">
        {{ if eq .Page.File.Ext "md" }}
            <span>
                {{ .Inner }}
        {{ else }}
            <span>
                {{ .Inner| htmlUnescape | safeHTML }}
            </span>
        {{ end }}
    </div>
</div>`
2

I suspect what you see is what we did in v0.100.0:

There may be some surprising side-effects of the above fixes, especially 2), but the old behaviour was obviously wrong and needed a fix.

3

Thanks! I took a look at the release notes.

However, this still doesn’t formally provide me with a solution that I can bring back to my team. Neither of my shortcodes have reason to use $page.RenderString or .InnerIndent, so I’m wondering how this applies to this particular situation.

In the case of problem number 2, something like:

{{< expand "Example - File is all on one line but spacing around include" >}} {{< include file="/content/documentation/apis/dlgaas/code/sample-python-step4b.md" >}} {{< /expand >}} is not even using an indent, but is still adopting the same behavior as though it has. It just seems a bit nit-picky to go back to the tech writers and go through each instance of where this odd output is happening and tell them they have to watch where they put spaces or tell them not to put it in a list. It’s more about the time it’ll cost to fix these issues manually rather than having more of a robust solution that looks and takes care of edge cases.

I do appreciate the help, nonetheless. I’ve posted before on this forum and have received great feedback.

4

I think you need to follow the link above and read the first part.

5

I reread it again, thanks.

I noticed an inconsistency with the release notes and the documentation. I think you need to follow the link Shortcode Variables | Hugo and update the method naming. In the release notes it’s referred to as .InnerIndent but the shortcode page the method is .InnerDeindent which actually does provide changes in the output behavior.