Call a shortcode within HTML

Hi,
I need to have reusable clinical scores. I wrote a shortcode for each score.

But when I write HTML in the content, and call the shortcode from within the HTML block, the HTML following the shortcode is escaped, ruining all the code.

<div class="tab-content">
    <div aria-labelledby="stop-bang-tab" class="tab-pane fade show active" id="stop-bang-panel" role="tabpanel">
    {{< scores/stop-bang >}}
    </div>
    <div aria-labelledby="stop-tab" class="tab-pane fade" id="stop-panel" role="tabpanel">
    {{< scores/stop >}}
    </div>
    <div aria-labelledby="saos-diabete-tab" class="tab-pane fade" id="saos-diabete-panel" role="tabpanel">
    {{< scores/saos-diabete >}}
    </div>
  </div>

is compiled to:

<div class="tab-content">
    <div aria-labelledby="stop-bang-tab" class="tab-pane fade show active" id="stop-bang-panel" role="tabpanel">
    ... shortcode content of 1st shortcode is correctly fetched...
    </div>
    <pre><code>&lt;div aria-labelledby=&quot;stop-tab&quot; class=&quot;tab-pane

Shortcodes are called from content files.
Partials are called from templates.

Rewrite your shortcode as a partial.

Hi, thx for your answer.

I omitted to say that my HTML is in the content.
I call the shortcode inside the HTML block.

I apologize; I misunderstood.

Your code is indented by four spaces, which is interpreted as a code block.

1 Like

You are wonderful @jmooring !!!
Perfect fix.
Thank you very much.

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.