Provide Markdown Preview mode using folded source and phantom

[random-simon]

I’d like to know whether it makes sense to provide a new markdown preview mode. A new plugin to hide the Markdown source and display a rendered preview in the same Sublime Text tab view. It’s similar to vscode markdown preview mode.

Idea is from the gbird’s post . This approach is to provide formatted Markdown preview directly inside the original Sublime Text view. It preserves the markdown source in the text buffer, but fold and hide it temporarily and replacing its visual presentation with a read-only minihtml phantom.

The design is simple:

…folded Markdown source…
┌────────────────────────────┐
│      Phantom Preview       │
└────────────────────────────┘

And user can toggle the phantom review by some kind of button or command.

The screenshot here has folded source code and use minihtml to render a markdown preview.

Folding the markdown source isn’t elegant. But could provide a way to display the preview over the original source code without making major changes.

The extension: https://github.com/flashmodel/MarkdownPreviewOverlay

[gbird]

I can certainly see value in this, esp. when it comes to visual presentation of complex layout like MD tables.

One thing that VSCODE does well is the live side-by-side preview of MD documents. This might bridge the gap somewhat, although it might add some friction, with toggling between “Edit Source” and preview.

It might be better as a separate column/view, so you could get a true live-as-you-type preview.

But I wouldn’t use me as a case-study - my practices are very highly tuned for the work I do (create eLearning content for LMS systems like Moodle).

Locally I have sorted this problem with a modified version of OmniMarkupPreviewer, which I had to re-tool for py3.14 support.

This combo works really really for me, as I use a lot of HTML snippets that include Bootstrap for layout. This way, I get a true, live in the browser rendering, which I fully appreciate is a very niche set of requirements and beyond any rational expectation of an editor.

[Jawuilp]

This is really interesting. I like the idea of keeping the actual content in the buffer while using phantoms as a presentation layer.

Do you see this approach as something that could be useful beyond Markdown preview? I’m wondering how far phantoms could be pushed as a general presentation layer for plugins, rather than specifically for Markdown.

[deathaxe]

Given ST’s minihtml engine which drives phantoms, popups or HtmlSheets is rather limited with regards to create arbitrarily complex layouts. It is only a basic subset of html/css and thus may not be ideal for all use cases.

Instead of using phantoms in the same view a dedicated HtmlSheet displayed side-by-side would maybe be more useful as it doesn’t disturb or interact with the text in possibly unwanted ways.

MarkdownLivePreview makes use of this approach.

[random-simon]

Other plugins already provide side-by-side previews. The goal of this new markdown preview is to avoid opening a separate window. It instead allow users to quickly switch between the source and preview directly within the current file tab.

The HTML rendering does not need to achieve the full appearance of a web page.

This is an example of markdown table. It simply uses alignment and adjusts to the width of the window.

[random-simon]

I’ve put together a working PoC extension that renders the markdown preview directly inside the active file tab (by folding the source and displaying rendered HTML via phantom).

https://github.com/flashmodel/MarkdownPreviewOverlay

It provides an inline, in-tab reading experience without having to open a separate browser tab or split pane.

Before taking it further, I’d appreciate any suggestions. Is this something you would find useful in practice, or prefer existing split-pane preview

[herr.kaste]

I think it is useful, not necessarily for the whole document but for “hard to decipher” parts of a document, and eg. to check if I’ve written these parts correctly.

I usually don’t need a preview as long as the markdown is simple. (And I’m not a technical writer.) But a quick check section for section would be top.

(I would love this for rst because its syntax is a bit different; and switching between markup lang you always get them wrong until memory kicks in again. Even links are hard as everyone does them a bit different.)

[random-simon]

Bringing this to .rst is a great idea—rst syntax is easy to mix up when switching between markup languages.

In-editor overlay preview would be helpful for verifying syntax quickly without breaking workflow

section-by-section preview is a bit complex from the implementation standpoint. Handling partial sections and source ranges can be difficult to toggle preview action.