Custom nested Hugo shortcode, {{ .Inner | markdownify }} being wrapper in <pre>

Question

I have two Hugo shortcodes (simple nesting) that I created to output a specific format. However, trying various implementations, and the lowest level markdown is not rendering and renders within a <pre> or as a plain html string.

Parent shortcode:

<section class="row td-box td-box--height-auto usage">
    <div class="col">
        <h2>{{ with .Get "heading" }}{{.}}{{end}}</h2>
        {{  .Inner }}
    </div>
</section> 

Child shortcode

<div class='col-lg-6 mb-5 mb-lg-0 {{ with .Get "class" }}{{.}}{{end}}'>
    <h3>{{ with .Get "class" }}{{.}}{{end}}</h3>
    {{ .Inner | markdownify }}
</div>

And implementation:

{{< usagepane heading="Usage" >}}
    {{< usage class="do" >}}
        * test 1
    {{< /usage >}}
    {{< usage class="dont" >}}
        * test 2
    {{< /usage >}}
{{< /usagepane >}}

Which renders:

<section class="row td-box td-box--height-auto usage">
    <div class="col">
        <h2>Usage</h2>
        
    
            <div class="col-lg-6 mb-5 mb-lg-0 do">
                <h3>do</h3>
                <pre><code>    * test 1
</code></pre>

            </div>
    
            <div class="col-lg-6 mb-5 mb-lg-0 dont">
                <h3>dont</h3>
                <pre><code>    * test 2
</code></pre>

            </div>

    </div>
</section>

Answer 1

Apparently, if you indent the shortcode in the .md/implementation, it renders it incorrectly creating the issue above.

For my case, I had to remove the indents and it renders correctly.

{{< usagepane heading="Usage" >}}
{{< usage class="do" >}}
* test 1
{{< /usage >}}
{{< usage class="dont" >}}
* test 2
{{< /usage >}}
{{< /usagepane >}}