VSCode Markdown Preview Enhancement: MyST enhancements are not rendering as expected

[CodeCox]

The Markdown Preview is not correctly rendering the MyST enhancements. The following enhanced markdown is ignored and only the content is rendered as plain text.

```{tip}
this is a MyST tip that fails!

The MyST-Markdown extension is enabled since highlighting, intellisense, etc works on the enhanced MyST. However it seems that the enhanced Preview part is either not working or not activated.  None of the enhanced MyST markup is previewing as expected. The config setting is ticked and VSCode has been restarted many times. I have even added   `"myst.preview.enable": true` to my settings.json as a hack but with no effect. Also this same file is correctly rendered by jupyter-book (`jb build/page ...`)

PS. The marketplace advertising blurb  of MyST-Markdown shows this feature working but Issue #5 seems related and is still open?

**Screenshots**

- Screenshot of Extension config in VSCode:extension 
![image](https://user-images.githubusercontent.com/44036684/91460040-e68ce600-e876-11ea-8ea1-64a23d4ae8ff.png)

- Screenshot of *Edit* and *Preview* panes in VSCode:
![image](https://user-images.githubusercontent.com/44036684/91459823-a0378700-e876-11ea-888c-f4510fc967f2.png)

- Screenshot from browser with MyST rendered as expected
![image](https://user-images.githubusercontent.com/44036684/91459320-08d23400-e876-11ea-8d1c-7af8f3ef63ca.png)

**Desktop**
 - Windows 10, and Windows 10 with WSL2 Ubuntu
 - VSCode 1.48.2
 - MyST-Markdown v0.10.2

[welcome[bot]]

Thanks for opening your first issue here! Engagement like this is essential for open source projects! :hugs:
If you haven't done so already, check out EBP's Code of Conduct. Also, please try to follow the issue template as it helps other community members to contribute more effectively.
If your issue is a feature request, others may react to it, to raise its prominence (see Feature Voting).
Welcome to the EBP community! :tada:

[chrisjsewell]

Thanks @CodeCox. I have to say, I have not touched this project in months (although I do use it daily within VS Code for the syntax highlighting).

Since then, there has been many, many changes to myst; notably (since vs-code uses markdown-it) the creation of markdown-it-py as the backend to myst-parser, the addition of extended support for a number of markdown-it plugins, and the creation of markdown-it-myst.

I hope to circle back around to this project then (when time permits!), to re-appraise it and integrate all these new developments in.

Ling story short, this should fix the bug!

[CodeCox]

OK.

Hehe, I peeked at your TODO list - you have a lot on your plate! So I won't hold my breathe while waiting for this fix.

As an aside, I am considering my dev workflow options hence my use of VSCode with Code-highlighting & Preview features. I have seen some brief comments regarding workflow elsewhere, and I guess at some point in the future you will have to recommend/suggest one or more paths that you support. Even if/when Juyter Lab/Notebook is able to render MyST, it still won't be my default markdown(.md) Viewer. So the features provided by this extension are paramount for the excutable-book eco-system. MyST users will expect these features in at least one Editor or IDE, and a Browser plugin will also facilitate matters. (I should probably raise the above thoughts in the Discussion forum ...)

[chrisjsewell]

Hehe, I peeked at your TODO list - you have a lot on your plate!

Lots of these will be closed soon in merging https://github.com/executablebooks/jupyter-book/pull/911, its going to be a thing of beauty 😆

[chrisjsewell]

Even if/when Juyter Lab/Notebook is able to render MyST, it still won't be my default markdown(.md) Viewer.

Well this is where extended "Markdown friendly" syntaxes, I believe, will be extremely useful: https://myst-parser.readthedocs.io/en/latest/using/syntax-optional.html

these work a lot nicer in any Markdown viewer

[CodeCox]

its going to be a thing of beauty 😆

#911 the Porsche of PR's!

[jppellet]

Just wanted to quickly check whether any progress had been made on this: previewing of admonitions seems to be broken still. Isn't there somewhere a CSS file missing, telling how they should look like? Sorry, actually I have no clue, but they seem to be rendered correctly with a div with the right classes, but no CSS seems to be attached to it. If you direct me a little bit I may be able to contribute.

[chrisjsewell]

Heya I will try to have a look at the weekend. (Linking @rowanc1 since he has actually been doing a lot on myst for JavaScript recently)

[elliotvaucher]

First of all, thanks for the amazing work done on the MyST Markdown extension. Many very useful functionalities working alright.

Just wanted to check if anything had been done for the previewing issue as I also have the same bug and nothing seems to fix it.

Any updates ?

Thank you.

[NIDS2020-instructor]

Just tested the VS Code extension and couldn't figure out why it was not working, happy to see it was not a wrong setup ! I agree that it would be fantastic to have the extension preview work properly.

[chrisjsewell]

With #30 finally this should be getting fixed! https://github.com/executablebooks/markdown-it-docutils is a lot more well-designed that the initial "hacked together" parsing plugin I initially added here 😄, plus it will render more directives, like images and figures

[eakbas]

Hello, https://github.com/executablebooks/myst-vs-code/issues/18#issuecomment-874945823 says that it will render figures (i.e. ````{figure} directives), however, it doesn't. I installed the extension in vscode but figures are not getting rendered. Am I right assuming that this should work?

[Mosiwi]

The Markdown Preview is not correctly rendering the MyST enhancements. The following enhanced markdown is ignored and only the content is rendered as plain text.

``` {tip} this is a MyST tip that fails! ```

and

``` {note} this is a MyST tip that fails! ```

The MyST-Markdown extension is enabled since highlighting, intellisense, etc works on the enhanced MyST. However it seems that the enhanced Preview part is either not working or not activated. None of the enhanced MyST markup is previewing as expected.

Desktop: Windows 11, VSCodeUserSetup-x64-1.83.1 MyST-Markdown 2.0.0