details markdown not rendering properly in voila like it does in jupyter lab

[afonit]

If I use this markdown in jupyterlab:

<details>
  <summary>Click to get a detailed explanation.</summary>
  
  ## Selecting Offsets
  1. something
    * something 1
    * something 2
        * something 2.1
    |pre-offset|post-offset|formula|
    |--|--|--|
    |-1|1|1-(-1)|
    |-2|2|2-(-2)|
    |-3|3|3-(-3)|
    |-4|4|4-(-4)|
    |-5|5|5-(-5)|
    ...
  2. something else
     * something else 1
    |pre-offset|post-offset|formula|
    |--|--|--|
    |-14|3|3-(-14)|
    |-15|4|4-(-15)|
    |-16|5|5-(-16)|
    |-17|6|6-(-17)|
    |-18|7|7-(-18)|
    ...
  
</details>

I get this:

And when expanded I get this:

But when I render this with voila, I get the below:

[jakemiller649]

Hi @afonit did you ever find a workaround for this? I am running into the same thing (using the details tag and it not rendering correctly) and found this issue from last year. Thank you!

[afonit]

@jakemiller649 , no solution/workaround yet, that I have seen.

[jtpio]

Hopefully this will be fixed by #846

[jtpio]

If I use this markdown in jupyterlab:

@afonit which version of JupyterLab is / was it? With the latest 3.0.14 it doesn't seem to be rendered either (copy pasting the example above):

[afonit]

@jtpio , thanks for pointing out that does not work within 3.x. When I posted the issue it was in 2.x.

I will open a ticket in the jupyterlab github tracker as that would be a regression.

I just upgraded to 3.x from 2.x to test, and I also show it not rendering:

[jtpio]

ok thanks for checking 👍

And feel free to open a new issue in https://github.com/jupyterlab/jupyterlab if you think this is indeed a regression.

[afonit]

just posted it: jupyterlab/jupyterlab#10171

[jakemiller649]

In case anyone else in the future stumbles onto this issue (before it's solved, of course), my hacky workaround is:

• Convert your markdown to HTML using something like https://markdowntohtml.com/ (Yes, converting to HTML makes it much more difficult to do edits)
• Use a class like the following

from IPython.core.display import HTML
class HideText:
    _he = 0 # each instance of this will need its own unique DIV name, otherwise it doesn't work
    def __init__(self, text_to_hide, button_text="Details"):
        self.formatted_html = (
            """
            <p>&#x1F449; <a onclick="ShowOrHide_%d()">%s</a></p>
            
            <div id="myDIV_%d" STYLE="display:none">
            %s
            </div>
            <script>
            function ShowOrHide_%d(){
              var x = document.getElementById("myDIV_%d");
              if (x.style.display === "none") {
                x.style.display = "block";
              } else {
                x.style.display = "none";
              }
            }
            </script>
            """ % (HideText._he, button_text, HideText._he, text_to_hide, HideText._he, HideText._he)
        )
        HideText._he += 1
    
    def show(self):
        return HTML(self.formatted_html)

Then use a code block each time you need to hide something, e.g.:

text_to_hide = """<p>It tolls for:</p>
<ul>
<li>thee</li>
<li>that other guy</li>
<li>thy momma and thy daddy</li>
</ul>
"""

HideText(
    text_to_hide=text_to_hide,
    button_text="And therefore never send to know for whom the bell tolls"
).show()

[krassowski]

A much simpler workaround (as for the JupyterLab bug): just remove the indentation and add some new lines:

<details><summary>Click to get a detailed explanation.</summary>



## Selecting Offsets
1. something
* something 1
* something 2
    * something 2.1
|pre-offset|post-offset|formula|
|--|--|--|
|-1|1|1-(-1)|
|-2|2|2-(-2)|
|-3|3|3-(-3)|
|-4|4|4-(-4)|
|-5|5|5-(-5)|
...
2. something else
 * something else 1
|pre-offset|post-offset|formula|
|--|--|--|
|-14|3|3-(-14)|
|-15|4|4-(-15)|
|-16|5|5-(-16)|
|-17|6|6-(-17)|
|-18|7|7-(-18)|
...
  
</details>

[krassowski]

This is now fixed upstream in marked (markedjs/marked#2052); you might want to bump marked to 2.0.4.