# Details shortcode from hugo-book theme does not respect inner markdown

**URL:** <https://discourse.gohugo.io/t/details-shortcode-from-hugo-book-theme-does-not-respect-inner-markdown/45984>\
**Category:** support\
**Created:** [August 31, 2023, 12:49am UTC](https://discourse.gohugo.io/t/details-shortcode-from-hugo-book-theme-does-not-respect-inner-markdown/45984 "2023-08-31T00:49:00Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Joshua\_Pritikin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/joshua_pritikin/32/17605_2.png) [@Joshua\_Pritikin](https://discourse.gohugo.io/u/Joshua_Pritikin)\
**Post date:** [August 31, 2023, 12:49am UTC](https://discourse.gohugo.io/t/details-shortcode-from-hugo-book-theme-does-not-respect-inner-markdown/45984/1 "2023-08-31T00:49:00Z")

</div>

Details is defined as

```auto
<details {{ if or (.Get "open") (in .Params "open") }}open{{ end }}>
  {{- $summary := cond .IsNamedParams (.Get "title") (.Get 0) -}}
  <summary>{{ $summary | .Page.RenderString }}</summary>
  <div class="markdown-inner">
    {{ .Inner }}
  </div>
</details>

```

In [https://github.com/jpritikin/coach/blob/groups/content/\_index.md](https://github.com/jpritikin/coach/blob/groups/content/_index.md), I have

```auto
  - [Creating Healing Circles](https://burriscounseling.com): Using the IFS Model in Group Therapy completed Aug 2023.  
      {{< details "Reveal my selfie with Chris" >}}
      ![Burris](burris-2023.webp)
      {{< /details >}}

```

But the image is rendered as the text instead of an image. See [https://groups.coach-2x4.pages.dev/](https://groups.coach-2x4.pages.dev/)

What am I doing wrong?

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [August 31, 2023, 2:41am UTC](https://discourse.gohugo.io/t/details-shortcode-from-hugo-book-theme-does-not-respect-inner-markdown/45984/2 "2023-08-31T02:41:11Z")

</div>

When you indent markdown 4 or more spaces it is an [indented code block](https://spec.commonmark.org/0.30/#indented-code-blocks). Remove the indentation.

```plaintext
{{< details "Reveal my selfie with Chris" >}}
  ![Burris](burris-2023.webp)
{{< /details >}}

```

---

<div class="post-metadata">

**Author:** ![Joshua\_Pritikin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/joshua_pritikin/32/17605_2.png) [@Joshua\_Pritikin](https://discourse.gohugo.io/u/Joshua_Pritikin)\
**Post date:** [August 31, 2023, 11:07am UTC](https://discourse.gohugo.io/t/details-shortcode-from-hugo-book-theme-does-not-respect-inner-markdown/45984/3 "2023-08-31T11:07:02Z")

</div>

Okay, I tried your suggestion but it still renders as text.

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [August 31, 2023, 12:43pm UTC](https://discourse.gohugo.io/t/details-shortcode-from-hugo-book-theme-does-not-respect-inner-markdown/45984/4 "2023-08-31T12:43:23Z")

</div>

Sorry, I didn’t notice the shortcode notation—you’re using `{{< >}}`, but, with the way the shortcode is written, you need to use `{{% %}}` when `.Inner` contains markdown. And you must not indent the markdown between the opening and closing tags by more than 3 spaces.

```auto
{{% details "Reveal my selfie with Chris" %}}
  ![Burris](burris-2023.webp)
{{% /details %}}

```

But this isn’t great, because the theme author is passing the `.Summary` through the markdown renderer, which means the `.Summary` is rendered to HTML twice.

```plaintext
<details {{ if or (.Get "open") (in .Params "open") }}open{{ end }}>
  {{- $summary := cond .IsNamedParams (.Get "title") (.Get 0) -}}
  <summary>{{ $summary | .Page.RenderString }}</summary> 
  <div class="markdown-inner">
    {{ .Inner }}
  </div>
</details>

```

If it were me, I’d override the shortcode with my own, and consistently call it with one notation or the other.

---

<div class="post-metadata">

**Author:** ![Joshua\_Pritikin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/joshua_pritikin/32/17605_2.png) [@Joshua\_Pritikin](https://discourse.gohugo.io/u/Joshua_Pritikin)\
**Post date:** [September 1, 2023, 12:12am UTC](https://discourse.gohugo.io/t/details-shortcode-from-hugo-book-theme-does-not-respect-inner-markdown/45984/5 "2023-09-01T00:12:24Z")

</div>

When I used {{% %}} then the nested list got incorrectly unnested. That’s why I switched to {{\< \>}} which seems to work as expected with respect to the surrounding list.

> [@jmooring](#):
>
> I’d override the shortcode with my own

Great, can you suggest an improved shortcode?

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [September 1, 2023, 1:38am UTC](https://discourse.gohugo.io/t/details-shortcode-from-hugo-book-theme-does-not-respect-inner-markdown/45984/6 "2023-09-01T01:38:24Z")

</div>

> [@Joshua\_Pritikin](#):
>
> the nested list

What nested list?

---

<div class="post-metadata">

**Author:** ![Joshua\_Pritikin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/joshua_pritikin/32/17605_2.png) [@Joshua\_Pritikin](https://discourse.gohugo.io/u/Joshua_Pritikin)\
**Post date:** [September 1, 2023, 2:28pm UTC](https://discourse.gohugo.io/t/details-shortcode-from-hugo-book-theme-does-not-respect-inner-markdown/45984/7 "2023-09-01T14:28:05Z")

</div>

Look at the surrounding markup. That’s why I had the indent before:

```auto
- [Internal Family Systems](https://ifs-institute.com/practitioners/all/110287)
  - [Creating Healing Circles](https://burriscounseling.com): Using the IFS Model in Group Therapy completed Aug 2023.  
{{< details "Reveal my selfie with Chris" >}}
![Burris](burris-2023.webp)
{{< /details >}}
  - [Intimacy from the Inside Out](https://www.toniherbineblank.com/trainings.html) relationship therapy Basic Training (IFS Level 2) completed Jun 2023.

```

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [September 1, 2023, 2:50pm UTC](https://discourse.gohugo.io/t/details-shortcode-from-hugo-book-theme-does-not-respect-inner-markdown/45984/8 "2023-09-01T14:50:07Z")

</div>

So you want the details element to be part of previous list item? If yes…

> **markdown**
>
> ```plaintext
> My list:
> 
> - [Internal Family Systems](https://ifs-institute.com/practitioners/all/110287)
> - [Creating Healing Circles](https://burriscounseling.com): Using the IFS Model in Group Therapy completed Aug 2023.
> {{< details "Reveal my selfie with Chris" >}}
> ![Burris](/burris-2023.webp)
> {{< /details >}}
> - [Intimacy from the Inside Out](https://www.toniherbineblank.com/trainings.html) relationship therapy Basic Training (IFS Level 2) completed Jun 2023.
> 
> ```

  

> **layouts/shortcodes/details.html**
>
> ```plaintext
> <details {{ if or (.Get "open") (in .Params "open") }}open{{ end }}>
> {{- $summary := cond .IsNamedParams (.Get "title") (.Get 0) -}}
> <summary>{{ $summary | .Page.RenderString }}</summary>
> <div class="markdown-inner">
> {{ .InnerDeindent | .Page.RenderString }}
> </div>
> </details>
> 
> ```

Always use the `{{< >}}` notation when calling this revised shortcode.

---

<div class="post-metadata">

**Author:** ![system](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/system/32/1_2.png) [@system](https://discourse.gohugo.io/u/system)\
**Post date:** [September 3, 2023, 2:50pm UTC](https://discourse.gohugo.io/t/details-shortcode-from-hugo-book-theme-does-not-respect-inner-markdown/45984/9 "2023-09-03T14:50:51Z")

</div>

Closed on September 3, 2023, 2:50pm UTC

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.