-
Type:
Bug
-
Resolution: Fixed
-
Priority:
Low
-
Affects Version/s: 10.3.0, 10.2.1
-
Component/s: Macros - Other Macros
-
Severity 3 - Minor
Issue Summary
When Confluence Data Center transforms legacy code block markup inside HTML <details> elements, the new code block UI is rendered but the code content is dropped. This occurs with content produced by the Markdown for Confluence app (and likely any app/output that emits legacy code macro markup) when a fenced code block appears inside <details>.
Outside <details>, the same code block renders correctly with language and syntax highlighting.
Steps to Reproduce
- Install and enable the Markdown for Confluence app.
- Create a new Confluence page.
- Insert the Markdown macro (e.g. using /markdown).
- In the macro body, add the following Markdown content and enable the macro parameter allowHtml:
<details> <summary style="display: list-item;"><b>My Summary 1</b></summary> Summary one details </details> <details> <summary style="display: list-item;"><b>My Summary 2</b></summary> Summary 2 details </details> <details> <summary style="display: list-item;"><b>My Summary 3 - with code block inside</b></summary> ```ruby require 'redcarpet' markdown = Redcarpet.new("Hello World!") puts markdown.to_html ``` </details> ```ruby require 'redcarpet' markdown = Redcarpet.new("Hello World!") puts markdown.to_html ```
- Save the macro configuration and publish the page.
- Expand “My Summary 3 - with code block inside” and compare the code block inside <details> with the code block rendered outside <details>.
(Optional minimal platform-only repro, without the app: )
Use the HTML macro to embed the equivalent HTML that the app produces, including a <pre class="syntaxhighlighter-pre" ...> block inside and outside <details>, and observe the same behavior.
Expected Results
- The code block inside the <details> section should render identically to the one outside <details>:
- The code content is visible and intact.
- The language is preserved (e.g. language-ruby).
- Syntax highlighting tokens are generated.
- The new code block UI (wrap / copy buttons) works as expected.
Actual Results
- The code block inside <details> is rendered as an empty block:
- Confluence transforms the legacy markup into the new DS/Prism code block structure (buttons, container, etc.), but:
- The <code> element is rendered as:
<code class="language-text" style="white-space: pre;"> <span class=""></span> </code>
- No code content is present.
*. No syntax highlighting tokens are present. - The code block outside <details> renders correctly with:
class="language-ruby"
Full code content and Prism tokens.
This indicates that the internal transformation that upgrades legacy
<pre class="syntaxhighlighter-pre" ...>
blocks to the new code block UI is executed, but fails to carry over the code content when the block is nested inside <details>.
Workaround
For content that may be nested inside HTML <details>:
Avoid emitting the legacy Code Block macro markup (e.g. <pre class="syntaxhighlighter-pre" data-syntaxhighlighter-params="brush: ruby; ...">).
Instead, render code blocks inside <details> as plain HTML <pre><code> elements so they are not picked up by the broken transformation:
<details> <summary style="display: list-item;"><b>My Summary 3 - with code block inside</b></summary> <pre><code class="language-ruby"> require 'redcarpet' markdown = Redcarpet.new("Hello World!") puts markdown.to_html </code></pre> </details
- The code content will display correctly (without the new DS code block toolbar and syntax highlighting, but fully visible and copyable).
- If this workaround is not applicable, users should avoid combining <details> with legacy-style code block markup until the transformation logic is fixed.