expand inside notice incorrectly interpreted as a code block

[fcooper8472]

Placing an "expand" shortcode inside a "notice" shortcode, such as:

{{% notice note %}}
{{%expand "The expand label"%}}The expand content{{% /expand%}}
{{% /notice %}}

produces the following:

<div class="notices note"><!-- raw HTML omitted -->
<pre><code class="hljs xml">    The expand label
	
    <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"expand-content"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"display: none;"</span>&gt;</span>
    The expand content
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</code><span class="copy-to-clipboard" title="Copy to clipboard"></span></pre>
<!-- raw HTML omitted -->
</div>

I understand that there is a limitation of the notice shortcode, where styling is only applied to the first <p>, but the same behaviour exists with #455 that solves that particular limitation.

What I can't understand is how the inner expand is being interpreted as code (<pre><code class="hljs xml"> tags added).

For reference, when not inside a notice, the following (expected) behaviour is observed:

<div class="expand">
    <div class="expand-label" style="cursor: pointer;" 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>
        
    	
    	The expand label
    	
    	</span>
    </div>
    <div class="expand-content" style="display: none;">
        The expand content
    </div>
</div>

I would be happy to work on a fix, but currently don't understand the problem. Any ideas what I'm missing?

[McShelby]

The different behavior comes from the additional usage of safeHTML in the expand shortcod I haven't tested it, but I'ld bet, if you delete this from the expand shortcode it will behave the same as the notice shortcode.

[fcooper8472]

@McShelby thanks for the suggestion - unfortunately that didn't work.

If I re-write the shortcode to look like this:

<details>
    <summary>{{ .Get 0 }}</summary>
    {{.Inner}}
</details>

then it works as expected. But, even wrapping it in an extra div, e.g.,

<div class="expand">
    <details>
        <summary>{{ .Get 0 }}</summary>
        {{.Inner}}
    </details>
</div>

causes the final </details> tag to be somehow interpreted as a code block, producing:

<pre><code class="hljs xml"><span class="hljs-tag">&lt;/<span class="hljs-name">details</span>&gt;</span>
</code><span class="copy-to-clipboard" title="Copy to clipboard"></span></pre>

when used inside the notice shortcode. I'll try and investigate some more... but this seems pretty odd to me.

[McShelby]

Okay, I lost my bet - I owe you a coffee.

Now a tested recommendation. Leave the shortcodes as is. Instead of your example, write:

{{< notice note >}}
{{%expand "The expand label"%}}The expand content{{% /expand%}}
{{< /notice >}}

This worked for me up to the point of correct HTML. Nevertheless this still cuts your notice box into halfs until you

a) manually apply #455 to your code or
b) wait until #455 was merged into a production release in the future

[fcooper8472]

@McShelby with apologies for the delay, I wanted to say that I got this working as you described.

I opted for a), to manually apply #455, and that worked fine for my application. Thanks for your input on this!

I'll leave this open for now as I see that #455 is not yet merged.