inventory-hugo-theme icon indicating copy to clipboard operation
inventory-hugo-theme copied to clipboard

Admonitions appearance breaks when code blocks are included

Open jwflory opened this issue 2 years ago • 0 comments

Summary

If a theme admonition includes a fenced code block, it breaks the admonition into two containers and the fenced code block appears to sit outside of both containers. This is a negative user experience and can challenge the meaning of content as written.

How to reproduce?

Markdown

See syntax. See example page. See example page source file.

Asciidoc

See syntax. May use different CSS classes than Markdown and both markup languages should be tested.

Expected behavior

Admonition should keep the same appearance as the example page.

Actual behavior

  1. Keep to one container with the admonition render. Now, it appears the containers are split into two: one with the admonition type (e.g. "Tip") and one with the admonition body.
  2. A fenced code block seems to exist outside of the admonition instead of connected to the inside of the admonition container. This is confusing UX about whethewr the code block is part of the admonition or part of the article.

Screenshots:

Screenshot of the "Create a new Hugo site" page in the UNICEF Inventory documentation website. The "Tip" block shown is separated in two parts. The fenced code block appears to sit outside of the admonition.

jwflory avatar Sep 16 '22 00:09 jwflory