Inner

SHORTCODE.Inner

template.HTML

This content:

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

With this shortcode:

<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>

Use RenderString

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

<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:

{{% 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.

<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>