Inner

Returns the content between opening and closing shortcode tags, applicable when the shortcode call includes a closing tag.

Syntax

SHORTCODE.Inner

Returns

template.HTML

This content:

content/services.md

{{< card title="Product Design" >}}
We design the **best** widgets in the world.
{{< /card >}}

With this shortcode:

layouts/shortcodes/card.html

<div class="card">
  {{ with .Get "title" }}
    <div class="card-title">{{ . }}</div>
  {{ end }}
  <div class="card-content">
    {{ .Inner | strings.TrimSpace }}
  </div>
</div>

Is rendered to:

<div class="card">
  <div class="card-title">Product Design</div>
  <div class="card-content">
    We design the **best** widgets in the world.
  </div>
</div>

Content between opening and closing shortcode tags may include leading and/or trailing newlines, depending on placement within the Markdown. Use the strings.TrimSpace function as shown above to remove carriage returns and newlines.

In the example above, the value returned by Inner is Markdown, but it was rendered as plain text. Use either of the following approaches to render Markdown to HTML.

Use RenderString

Let’s modify the example above to pass the value returned by Inner through the RenderString method on the Page object:

layouts/shortcodes/card.html

<div class="card">
  {{ with .Get "title" }}
    <div class="card-title">{{ . }}</div>
  {{ end }}
  <div class="card-content">
    {{ .Inner | strings.TrimSpace | .Page.RenderString }}
  </div>
</div>

Hugo renders this to:

<div class="card">
  <div class="card-title">Product design</div>
  <div class="card-content">
    We produce the <strong>best</strong> widgets in the world.
  </div>
</div>

You can use the markdownify function instead of the RenderString method, but the latter is more flexible. See details.

Alternative notation

Instead of calling the shortcode with the {{< >}} notation, use the {{% %}} notation:

content/services.md

{{% card title="Product Design" %}}
We design the **best** widgets in the world.
{{% /card %}}

When you use the {{% %}} notation, Hugo renders the entire shortcode as Markdown, requiring the following changes.

First, configure the renderer to allow raw HTML within Markdown:

markup:
  goldmark:
    renderer:
      unsafe: true

[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true

{
   "markup": {
      "goldmark": {
         "renderer": {
            "unsafe": true
         }
      }
   }
}

This configuration is not unsafe if you control the content. Read more about Hugo’s security model.

Second, because we are rendering the entire shortcode as Markdown, we must adhere to the rules governing indentation and inclusion of raw HTML blocks as provided in the CommonMark specification.

layouts/shortcodes/card.html

<div class="card">
  {{ with .Get "title" }}
  <div class="card-title">{{ . }}</div>
  {{ end }}
  <div class="card-content">

  {{ .Inner | strings.TrimSpace }}
  </div>
</div>

The difference between this and the previous example is subtle but required. Note the change in indentation, the addition of a blank line, and removal of the RenderString method.

--- layouts/shortcodes/a.html
+++ layouts/shortcodes/b.html
@@ -1,8 +1,9 @@
 <div class="card">
   {{ with .Get "title" }}
-    <div class="card-title">{{ . }}</div>
+  <div class="card-title">{{ . }}</div>
   {{ end }}
   <div class="card-content">
-    {{ .Inner | strings.TrimSpace | .Page.RenderString }}
+
+  {{ .Inner | strings.TrimSpace }}
   </div>
 </div>

Don’t process the Inner value with RenderString or markdownify when using Markdown notation to call the shortcode.

Last updated: February 17, 2025 : all: Change shortcode usage and design to prevent invalid HTML (0fca8ef25)

Improve this page