Data Center transforms legacy code block markup inside HTML <details> elements

XMLWordPrintable

    • 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

      1. Install and enable the Markdown for Confluence app.
      2. Create a new Confluence page.
      3. Insert the Markdown macro (e.g. using /markdown).
      4. 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
        ```
      1. Save the macro configuration and publish the page.
      2. 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

      1. The code block inside the <details> section should render identically to the one outside <details>:
      2. The code content is visible and intact.
      3. The language is preserved (e.g. language-ruby).
      4. Syntax highlighting tokens are generated.
      5. 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.

            Assignee:
            Jake Lyell
            Reporter:
            Wagner M.
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

              Created:
              Updated:
              Resolved: