hugo/docs/content/en/methods/shortcode/InnerDeindent.md

title	description	categories	keywords	action
InnerDeindent	Returns the content between opening and closing shortcode tags, with indentation removed, applicable when the shortcode call includes a closing tag.			related returnType signatures methods/shortcode/Inner template.HTML SHORTCODE.InnerDeindent

Similar to the Inner method, InnerDeindent returns the content between opening and closing shortcode tags. However, with InnerDeindent, indentation before the content is removed.

This allows us to effectively bypass the rules governing indentation as provided in the CommonMark specification.

Consider this markdown, an unordered list with a small gallery of thumbnail images within each list item:

{{< code file=content/about.md lang=md >}}

• Gallery one

  {{</* gallery />}} {{</ /gallery */>}}

• Gallery two

  {{</* gallery />}} {{</ /gallery */>}} {{< /code >}}

In the example above, notice that the content between the opening and closing shortcode tags is indented by four spaces. Per the CommonMark specification, this is treated as an indented code block.

With this shortcode, calling Inner instead of InnerDeindent:

{{< code file=layouts/shortcodes/gallery.html >}}

{{ trim .Inner "\r\n" | .Page.RenderString }}

{{< /code >}}

Hugo renders the markdown to:

<ul>
  <li>
    <p>Gallery one</p>
    <div class="gallery">
      <pre><code>![kitten a](images/a.jpg)
      ![kitten b](images/b.jpg)
      </code></pre>
    </div>
  </li>
  <li>
    <p>Gallery two</p>
    <div class="gallery">
      <pre><code>![kitten c](images/c.jpg)
      ![kitten d](images/d.jpg)
      </code></pre>
    </div>
  </li>
</ul>

Although technically correct per the CommonMark specification, this is not what we want. If we remove the indentation using the InnerDeindent method:

{{< code file=layouts/shortcodes/gallery.html >}}

{{ trim .InnerDeindent "\r\n" | .Page.RenderString }}

{{< /code >}}

Hugo renders the markdown to:

<ul>
  <li>
    <p>Gallery one</p>
    <div class="gallery">
      <img src="images/a.jpg" alt="kitten a">
      <img src="images/b.jpg" alt="kitten b">
    </div>
  </li>
  <li>
    <p>Gallery two</p>
    <div class="gallery">
      <img src="images/c.jpg" alt="kitten c">
      <img src="images/d.jpg" alt="kitten d">
    </div>
  </li>
</ul>