Inner

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>