Fully bold Obsidian-style drop-down alerts put text in "summary"

support
1

I’m not sure if this is a bug or I’m missing something in my code.

Following Blockquote render hooks documentation I am trying to implement Obsidian style blockquotes with drop-down functionality.

Fully bold Obsidian-style alerts are rendering inconsistently with <details>. Specifically, the generated HTML output places text in the <summary> element differently depending on whether the bold header is followed by additional text or not.

Correct rendering

This Markdown:

> [!WARNING]- **Radiation hazard** warning
> Do not approach or handle without protective gear.

Produces correct HTML:

<details>
  <summary>
    ⚠️<strong>Radiation hazard</strong> warning
  </summary>
  <p>Do not approach or handle without protective gear.</p>
</details>

Incorrect rendering

But this Markdown:

> [!WARNING]- **Radiation hazard**
> Do not approach or handle without protective gear.

Puts text in summary in HTML:

<details>
  <summary>
    ⚠️ <strong>Radiation hazard</strong>
    <p>Do not approach or handle without protective gear.</p>
  </summary>
</details>

Current Workaround

Adding a period after the bold header.

> [!WARNING]- **Radiation hazard**.
> Do not approach or handle without protective gear.

But it does not fully fixes the problem, because one can’t notice this when working with the document in Obsidian (it renders fully bold headers correctly).

Here is the render-blockquote.html template being used:

{{ $emojis := dict
  "warning" ":warning:"}}

{{ if eq .Type "alert" }}
  {{ if eq .AlertSign "-" }}
    <!-- Collapsible Blockquote -->
    <details>
      <summary>
        {{ transform.Emojify (index $emojis .AlertType) }} 
        {{ .AlertTitle | default (title .AlertType) }}
      </summary>
      {{ .Text | safeHTML }}
    </details>
  {{ else if eq .AlertSign "+" }}
    <!-- Expandable Blockquote -->
    <details open>
      <summary>
        {{ transform.Emojify (index $emojis .AlertType) }} 
        {{ .AlertTitle | default (title .AlertType) }}
      </summary>
      {{ .Text }}
    </details>
  {{ else }}
    <!-- Regular Blockquote -->
    <blockquote>
      <p>
        {{ transform.Emojify (index $emojis .AlertType) }} 
        {{ .AlertTitle | default (title .AlertType) }}
      </p>
      {{ .Text }}
    </blockquote>
  {{ end }}
{{ else }}
  <!-- Fallback for non-alert blockquotes -->
  <blockquote>
    {{ .Text }}
  </blockquote>
{{ end }}

> hugo env
hugo v0.139.4-3afe91d4b1b069abbedd6a96ed755b1e12581dfe+extended windows/amd64 BuildDate=2024-12-09T17:45:23Z VendorInfo=gohugoio
GOOS="windows"
GOARCH="amd64"
GOVERSION="go1.23.2"
github.com/sass/libsass="3.6.6"
github.com/webmproject/libwebp="v1.3.2"

Minimal reproduction project on Github:
https://github.com/sokolov-teach/blockquote-test

2

Please upgrade to v0.140.0 and test again.

3

O my god, of course it was fixed yesterday.
Thank you very much for your work.

1 Like
4

Also, this may be of interest:
https://discourse.gohugo.io/t/hugo-admonitions-a-simple-way-to-add-beautiful-callouts-to-hugo-site/52576/11?u=jmooring

1 Like
5

Yes, it is of interest with some customizations (to follow default obsidian theme).
Thank you again!

6

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