Add Instructions for Building Rendered Preview Page

[GYHHAHA]

Hi, I'm fascinated by the preview functionality in the sandbox page. If I want to build a page like this and do some customizations like add a button in the top of preview block, how can I do that? Also I find there is a myst block for build a similar preview block in the index page, so is this documented?

```{myst}
xxxxxxx
```

Besides, I also find there are a lot of useful features in sphinx-design, but the sandbox preview page is not to render them (like card or grid). Is there any plan to support them? Thanks!

[chrisjsewell]

FYI: I created one for sphinx at: https://myst-parser.readthedocs.io/en/latest/live-preview.html, using https://sphinx-pyscript.readthedocs.io

[GYHHAHA]

Hi, I paste the following into your link, but it seems not to be rendered well (but work fine in myst.tools/sandbox)

:::{important}
# This is important!
something
:::

[rowanc1]

Hi @GYHHAHA, the preview functionality in the sandbox is using mystjs (https://github.com/executablebooks/mystjs), which is a new (in the last three months!) javascript renderer for MyST markdown. You can read about the background on the project to get a bit more context -- as well as this issue which explains some of the functionality coming in that space. We are really excited about some of the functionality and use cases for scientific communication that this can open up (e.g. PDF rendering, LaTeX, and word docs, as well as different ways to build websites)! 🚀

We are working on bringing more functionality to the sandbox demo (grids/cards/citations), and ensuring the syntax is inline with other parts of the ecosystem like sphinx design. We are bootstrapping a process for this at the moment (see here). For the admonition syntax, I have updated the sandbox demo to the syntax that is used in the sphinx ecosystem, improving this is something we are thinking about, but isn't agreed upon yet (as nested headers don't work with docutils out of the box).

If you want to use the component directly, you can see the code, which is currently here, although this is written in React and isn't easily replicable in JupyterBook/Sphinx ecosystem. The link that @chrisjsewell shared to the demo of using the myst-parser is probably the closest at the moment if you are using Sphinx.

[GYHHAHA]

Thanks for rely! This is very helpful. I will keep tracking on the mystjs project.