Does this work with arbitrary depth? Can I do

  `````ts
  const Accordian = styled.details<{ isAprilFirst: boolean; }>`
  ````css
    accent: rebeccapurple;
    font-family: ${
  ```js
      props => props.isAprilFirst ? 'Comic Sans' : 'Time New Roman'
  ```
    };
  ````
  `;

  `````

Sure, as long as you don't run out of `s

Yes, this is also how JupyterBook [1] does it (I think v1 uses Myst Markdown parser). I found this to work excellent!

[1]: https://jupyterbook.org/

what if you want to show ````? should you add ````` tags then?

Yes; TFA contains enough explanation to make it clear how to extend this arbitrarily.

See also https://meta.stackexchange.com/questions/82718 .