HELP! Shortcode generating additional <p> tags

[thecloudxpert]

Let me first say i’m relatively new to hugo (and the forum), but I am trying to create a shortcode (note.html) to highlight some info text on my website but it seems to generate additional p tags. I’m using the clarity framework as the source of my CSS but i don’t feel that is what’s causing the issue

the note.html code is:

<!-- note -->
<!-- danger, warning, info, static -->

<div {{ with .Get "type" }}class="alert alert-{{.}} note"{{ end }} role="alert">
<div class="clr-row">
<div class="clr-col-xl-1 clr-col-lg-1 clr-col-md-1 clr-col-sm-1">
<div class="title">
Note:
</div>
</div>
<div class="clr-col-xl-11 clr-col-lg-11 clr-col-md-11 clr-col-sm-11">
{{ .Inner }} 
</div>
</div>
</div>

<!-- note -->

In the markdown, i’m calling the shortcode:

{{% note type="info" %}}

The list is not meant as an exhaustive list of possible solutions, but as an example of the power and flexibility the product.

{{% /note %}}

The result is the following html:

<div class="alert alert-info note" role="alert">
  <div class="clr-row">
    <div class="clr-col-xl-1 clr-col-lg-1 clr-col-md-1 clr-col-sm-1">
      <div class="title">
        Note:
      </div>
    </div>
    <div class="clr-col-xl-11 clr-col-lg-11 clr-col-md-11 clr-col-sm-11">
      <p>The list is not meant as an exhaustive list of possible solutions, but as an example of the power and flexibility the product.</p>
    </div>
  </div>
</div>

I’m not sure if it is the use of the {{.Inner}} or whether its working as designed or i am doing something wrong else where but it makes the aesthetics of the page off with the additional blank line!

[jmooring]

You’re calling the shortcode using the {{% .. %}} notation so everything is processed as Markdown. When rendering Markdown to HTML, a single line of text is rendered to a paragraph. Test it with the reference implementation of the renderer.

With this shortcode call:

{{% note type="info" %}}

foo

{{% /note %}}

The value of .Inner is:

\n\nfoo\n\n

You can strip leading and trailing whitespace (including new lines) with the strings.TrimSpace function, e.g.

{{ .Inner | strings.TrimSpace }}

[thecloudxpert]

Thank you so much! that worked perfectly for all the notes without any markdown in them but as soon as I used markdown, didn’t work.

i.e.

{{< note type="info" >}}
The **Network** tab allows us to inspect the network activity within the browser.  We will use this to capture the API call made by using the user interface. For more information, see the Google Chrome article [Inspect network activity](https://developer.chrome.com/docs/devtools/network).
{{< /note >}}

changed to:

<div class="alert alert-info note" role="alert">
<div class="clr-row">
<div class="clr-col-xl-1 clr-col-lg-1 clr-col-md-1 clr-col-sm-1">
<div class="title">
Note:
</div>
</div>
<div class="clr-col-xl-11 clr-col-lg-11 clr-col-md-11 clr-col-sm-11">
The **Network** tab allows us to inspect the network activity within the browser.  We will use this to capture the API call made by using the user interface. For more information, see the Google Chrome article [Inspect network activity](https://developer.chrome.com/docs/devtools/network). 
</div>
</div>
</div>

and didn’t recognise the **Network** as Network or the url shortcode.

Again it’s probably my lack of understanding of the Hugo syntax.

[thecloudxpert]

i think i just solved it with markdownify…

<!-- danger, warning, info, static -->

<div {{ with .Get "type" }}class="alert alert-{{.}} note"{{ end }} role="alert">
<div class="clr-row">
<div class="clr-col-xl-1 clr-col-lg-1 clr-col-md-1 clr-col-sm-1">
<div class="title">
Note:
</div>
</div>
<div class="clr-col-xl-11 clr-col-lg-11 clr-col-md-11 clr-col-sm-11">
{{ .Inner | strings.TrimSpace | markdownify}} 
</div>
</div>
</div>

<!-- note -->

which now shows as:

<div class="alert alert-info note" role="alert">
<div class="clr-row">
<div class="clr-col-xl-1 clr-col-lg-1 clr-col-md-1 clr-col-sm-1">
<div class="title">
Note:
</div>
</div>
<div class="clr-col-xl-11 clr-col-lg-11 clr-col-md-11 clr-col-sm-11">
The <strong>Network</strong> tab allows us to inspect the network activity within the browser.  We will use this to capture the API call made by using the user interface. For more information, see the Google Chrome article <a href="https://developer.chrome.com/docs/devtools/network" target="_blank" rel="nofollow noopener noreferrer">Inspect network activity</a>. 
</div>
</div>
</div>

[jmooring]

I would do this instead…

1) Call the shortcode using the {{< >}} notation.

{{< note type="info" >}}

**foo**

{{< /note >}}

2) Update the shortcode

<div {{ with .Get "type" }}class="alert alert-{{.}} note"{{ end }} role="alert">
  <div class="clr-row">
    <div class="clr-col-xl-1 clr-col-lg-1 clr-col-md-1 clr-col-sm-1">
      <div class="title">
        Note:
      </div>
    </div>
    <div class="clr-col-xl-11 clr-col-lg-11 clr-col-md-11 clr-col-sm-11">
      {{ .Inner | .Page.RenderString }}
    </div>
  </div>
</div>

Note that since were not processing the shortcode as Markdown, we can indent the markup as much as we want.

And you don’t need to set this in your site configuration:

[markup.goldmark.renderer]
unsafe = true

[tyco]

@thecloudxpert See also Hugo-admonitions: A simple way to add beautiful Callouts to hugo site

[thecloudxpert]

That seems to have worked like a dream! thank you again for being so helpful!