Notebook: Feature request: Markdown preview on the side

[ufoscout]

Hi all,

I wonder if there is any plan to include a markdown preview panel that shows the output preview while typing. For example, this is how it is implemented in vscode (in atom there's the same feature):

The scroll of the two tabs is synchronized making the edit experience very simple; essentially, editing a doc is a matter of:
-> type -> check on the side panel -> type

On the contrary, in jupiter notebook the edit flow is like:
-> type -> click run -> check output (find the exact point you edited) -> double click to go back to edit mode -> click on the line you were editing -> type
A side panel would make it more user friendly.

[ptbrowne]

For what's it's worth, I've added a Stylish extension to Jupyter to show my code output cells on the side. I was coming on the GitHub issues to see if people had already opened this kind of issue.

Here is the content of the stylesheet:

#notebook-container {
    width: 100%
}

.cell {
   flex-direction: row !important;
}

.cell .input {
    width: 50%
}


.cell .output_wrapper {
    width: 50%
}

It is not giving you synchronized scroll but at least, Markdown should be easier to preview like that.

[keelung-yang]

@ufoscout Me too, real-time preview is nice!

[Madhu94]

@ufoscout You can also check out nteract.

[lzkelley]

@ptbrowne can you explain a bit how to use this?

[ptbrowne]

1. Install the Stylish extension. https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=fr
2. Click the stylish icon, click the 3 dots menu, click Create New Style.
3. Copy paste my style, give a name, save

You now have the preview on the side.

[jcb91]

I've written a small nbextension that provides a live rendering of markdown cells while editing them - see https://github.com/ipython-contrib/jupyter_contrib_nbextensions/pull/1155