HTML summary Tag stopped working after update

[Burningstone]

Issue Summary

• I use the HTML details summary element to create collapsible blocks of code to not clutter my blog posts.
• This worked fine on a previous ghost version, but now suddendly stopped working after upgrading to 5.76.2.

Steps to Reproduce

1. Create a markdown block with the following content:

<details>
    <summary>Code</summary>

2. Add another block with some content like a code block or text
3. Add another markdown block with the following content:

</details>

---

Setup information

Ghost Version
5.76.2

Node.js Version
18.19.0

How did you install Ghost?
Self-hosted Ghost instance

Provide details of your host & operating system
Hosted on a Digital Ocean droplet with Ubuntu 20.04.6 LTS

Database type
Not relevant

Browser & OS version
Tested on Chrome, Edge on Android phone, Windows and Ubuntu.

Relevant log / error output
Currently it looks like this:

The cod eblock should be hidden inside the “+ Code” block and only show on hitting the plus sign.

Here’s a link to a live version of my blog where you can see the bug in action → My Life OS in Obsidian - Part 5: Homebase & Areas

I use the liebling Theme and have the follwing in the code injection header for the styling of the Summary Tag:

/* collapsible summary styling */
<style>
details.accordion {
 
  --color-accent: #222;
  margin-bottom: 1em;
  border-radius: 5px;
  padding: 1.5em;
  position: relative;
  padding-left: 3.5em;
  border-left: 5px solid var(--color-accent);
  overflow: none;
}

details.accordion::before {
  background-color: var(--color-accent);
  opacity: 0.1;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
    
details.accordion summary::before {
  position: absolute;
  content: '+';
  left: 1.5rem;
  top: 1.35rem;
  color: #4169e1;
  font-size: 1.6rem;
  line-height: 1;
  font-weight: normal;
}

details.accordion summary {
  list-style: none;
}
    
details.accordion summary::marker {
  display: none;
}

details.accordion[open] summary::before {
  transform: rotate(45deg);
}

details.accordion[open] summary {
  font-weight: 700;
}
   
</style>

But it’s also not working if I don’t style the summary Tag.

I would be more than grateful for some help.

[Kevin]

I think you’ll need to use HTML blocks for your opening/closing HTML rather than markdown blocks.

Markdown content renders out to a block of fully-valid HTML so it’s auto-closing your “invalid” unclosed <details> HTML whereas HTML blocks are more direct and will render exactly what you’ve entered.

[Burningstone]

Wow, that did the trick, so simple! Thanks a lot for your help!