Code fences do not work inside details tags #4220

New Issue

OVERLORD · 2026-02-05T08:16:50+03:00

OVERLORD commented

2026-02-05 08:16:50 +03:00

Originally created by @GammaGames on GitHub (Sep 18, 2023).

Describe the Bug

Code fences don't work inside <details> tags

Steps to Reproduce

Open a markdown editor
Add a detail block
Add a code block under the summary:

<details>
  <summary>Code Block</summary>
  ```python3
  print("Hello, world!")
  ```
</details>

Expected Behaviour

The code block should parse correctly. My solution is to insert the html:

<details>
<summary>Code Block</summary>
<pre><code class="language-python">print("Hello, world!")</code></pre>
</details>

Screenshots or Additional Context

vs

Browser Details

Chrome 117.0.5938.62

Exact BookStack Version

v23.06.2

Originally created by @GammaGames on GitHub (Sep 18, 2023). ### Describe the Bug Code fences don't work inside `<details>` tags ### Steps to Reproduce 1. Open a markdown editor 2. Add a detail block 3. Add a code block under the summary: ```html <details> <summary>Code Block</summary> ```python3 print("Hello, world!") ``` </details> ``` ### Expected Behaviour The code block should parse correctly. My solution is to insert the html: ```html <details> <summary>Code Block</summary> <pre><code class="language-python">print("Hello, world!")</code></pre> </details> ``` ### Screenshots or Additional Context ![image](https://github.com/BookStackApp/BookStack/assets/7832163/be005675-40c5-4565-822a-81c6ab468c1d) vs ![image](https://github.com/BookStackApp/BookStack/assets/7832163/c1a07f05-9a4b-499a-adb2-7200b77bded6) ### Browser Details Chrome 117.0.5938.62 ### Exact BookStack Version v23.06.2

OVERLORD added the 🐛 Bug label 2026-02-05 08:16:50 +03:00

OVERLORD closed this issue

2026-02-05 08:16:53 +03:00

OVERLORD commented

2026-02-05 08:17:00 +03:00

@ssddanbrown commented on GitHub (Sep 18, 2023):

Hi @GammaGames,
From my testing, these do work, but the code block has to be seperated from the HMTL tags with an empty line, for example:

<details>
  <summary>Example</summary>

  ```python3
  print("Hello, world!")
  \```  <- ignore this, couldn't find a method to escape this to display properly.

</details>

This follows the commonmark spec, as reflected in the demo here.

@ssddanbrown commented on GitHub (Sep 18, 2023): Hi @GammaGames, From my testing, these do work, but the code block has to be seperated from the HMTL tags with an empty line, for example: ```markdown <details> <summary>Example</summary> ```python3 print("Hello, world!") \``` <- ignore this, couldn't find a method to escape this to display properly. </details> ``` This follows the commonmark spec, as reflected [in the demo here](https://spec.commonmark.org/dingus/?text=%3Cdetails%3E%0A%20%20%3Csummary%3ECode%20Block%20A%20-%20CLICK%20HERE%3C%2Fsummary%3E%0A%20%20%60%60%60python3%0A%20%20print(%22Hello%2C%20world!%22)%0A%20%20%60%60%60%0A%3C%2Fdetails%3E%0A%0A%0A%0A%3Cdetails%3E%0A%20%20%3Csummary%3ECode%20Block%20B%20-%20CLICK%20HERE%3C%2Fsummary%3E%0A%0A%20%20%60%60%60python3%0A%20%20print(%22Hello%2C%20world!%22)%0A%20%20%60%60%60%0A%3C%2Fdetails%3E).

OVERLORD commented

2026-02-05 08:17:02 +03:00

@GammaGames commented on GitHub (Sep 18, 2023):

Thank you so much, I should've tried more options with whitespace!

@GammaGames commented on GitHub (Sep 18, 2023): Thank you so much, I should've tried more options with whitespace!

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/BookStack#4220