Markdown diagram inside details shortcode?

[ahgraber]

I'd like to be able to show/hide markdown diagrams using the details. Currently, it does not show the mermaid diagram but instead shows the code:

{{% details title="Next-token prediction" %}}

```mermaid
flowchart TD
  %% Styling definitions
  classDef corpus fill:#e1f5fe,stroke:#01579b,stroke-width:2px,color:#000
  classDef model fill:#fff3e0,stroke:#ff6f00,stroke-width:2px,color:#000
  classDef loss fill:#ffebee,stroke:#c62828,stroke-width:2px,color:#000
  classDef update fill:#e8f5e9,stroke:#2e7d32,stroke-width:2px,color:#000

  subgraph Corpus["Unsupervised Text Corpus"]
      TextData["Training Examples:
      'The cat sat on the mat'
      'To be or not to be'
      'Machine learning is...'"]:::corpus
  end

  subgraph Pretraining["Pre-training Process"]
      InputTokens["Input Context:
      ['The', 'cat', 'sat', 'on', 'the']"]:::model
      
      Model["Language Model
      (learns statistical patterns)"]:::model
      
      Predictions["Next Token Predictions:
      • 'mat': 0.91
      • 'rug': 0.04
      • 'floor': 0.03
      • 'couch': 0.02"]:::model
      
      GroundTruth["Actual Next Token:
      'mat'"]:::corpus
      
      Loss["Cross-Entropy Loss:
      -log(0.91) ≈ 0.094"]:::loss
      
      Update["Parameter Update:
      Increase P('mat' | context)
      Decrease P(other tokens | context)"]:::update
      
      InputTokens --> Model
      Model --> Predictions
      Predictions --> Loss
      GroundTruth --> Loss
      Loss --> Update
      Update -.->|"Backpropagation"| Model
  end

  Corpus --> InputTokens
```

{{% /details %}}

produces

[imfing]

might be a corner case, will look into this 🙏

[imfing]

I believe the issue occurs because the inner Mermaid diagram is first rendered to HTML, and then the shortcode tries to render it again, causing the problem.

I suggest moving the diagram out or use HTML summary element instead of details shortcode here.

[ahgraber]

thanks for the investigation!