jupyterlab-myst: Certain inline html not rendering correctly

Describe the bug

context

I have notebooks with inline html that isn’t rendering correctly.

Reproduce the bug

In a markdown cell, the following content:

Use the <button class='btn btn-default btn-xs'><i class='icon-stop fa fa-stop'></i></button> button in the toolbar above.

renders in “normal” JupyterLab correctly as:

while mystjs renders it incorrectly as:

List your environment

(stat159-s23) longs[~]> jupyter-book --version
Jupyter Book      : 0.13.1
External ToC      : 0.2.4
MyST-Parser       : 0.15.2
MyST-NB           : 0.13.2
Sphinx Book Theme : 0.3.3
Jupyter-Cache     : 0.4.3
NbClient          : 0.5.13

About this issue

Original URL
State: open
Created a year ago
Comments: 24 (9 by maintainers)

Most upvoted comments

I am your man. Tell me when I should test again!

nthiery on Mar 6, 2023

Sorry, no additional feedback. It just worked 😃

nthiery on Sep 15, 2023

Thanks @nthiery and @fperez – this is absolutely something we will support, and now bumping up to high on the priority list. We will try to get this addressed soon so that @nthiery can reinstall! 😃

@nthiery this issue is fine to track the issue, once we start working on it we might ping you in the PR to get a few more of the use-cases to ensure you are covered.

Thanks again both for the feedback!

rowanc1 on Mar 6, 2023

@nthiery if you need this feature now, you can temporarily pin jupyterlab-myst==0.1.7a6

Worked smoothly! Thank you @agoose77 !

Looking forward to use the latest jupyterlab-myst ; but no rush: I totally can do with the current solution to enjoy both worlds 😃

nthiery on Mar 6, 2023

Another work around in that case is to use MyST, an image or figure directive! 😃 https://myst-tools.org/docs/mystjs/figures#image-directive

```{figure} https://source.unsplash.com/random/400x200?beach,ocean
:name: myFigure
:alt: Random image of the beach or ocean!
:align: center

Relaxing at the beach 🏝 🌊 😎
```

rowanc1 on Feb 8, 2023

One more quick update on this, which I suspect may be useful for those looking for a work around (granted, it’s not ideal): If I coerce the rendering by converting it to a code cell and use the IPython magic command:

%%html
<div>
<img src="/files/Jupyter-Logo-DemOS.png" width="250"/>
</div>

The HTML renders as expected.

mcauthorn on Feb 8, 2023