Automatically Activate Markdown Preview

[dfinke]

I would like to eliminate the step of pressing ctrl+k v to preview the md file I open. For the preview should always be on.

Thank you

[RWeigelt]

Here are my 2 cents on the handling of Markdown files in Visual Studio Code.

I think that the main use case for opening a Markdown file is reading it. Not only for developers who consume the documentation of tools and libraries, but also for people like me whose job involves writing lots of documentation. I don't have definitive numbers, but I'm pretty sure I read (or at least scan) many more Markdown files than I edit on a given day. That's why I think that the current situation is a bit cumbersome:

• When I open a Markdown file, it is displayed as plain text / source
• If I want to read it with as little distraction as possible, I press ctrl+shift+v.
• But when I see something I'd like to edit, pressing ctrl+k v doesn't work. I first have to switch back to the text editor (ctrl+shift+v), then enter the split view (ctrl+shift+v).
• Regardless of whether I choose the better reading experience or (if I expect an edit) the better editing experience, I always have to press a hotkey immediately after opening a Markdown file.

For me personally (this may be a matter of personal preference), the perfect UX would look like this:

• When I open a Markdown file, I automatically see the preview mode that you get today when pressing ctrl+shift+v.
• Then, when I want to make an edit, I can switch to split view very fast, either by pressing an Edit button or using a simple hotkey. For Markdown preview (which doesn't have much interaction) it would be possible to use f2, which is the ultimate "change"/"edit"/"rename" hotkey across Windows, Office (most important key in Excel...) and Visual Studio.

Back to the feature request by @dfinke, who wanted a setting to force Visual Studio code into split editor when opening a Markdown file:

I suggest a setting that controls how Markdown files are opened by default (e.g. markdown.defaultView), with the following values:

• source for the (source) text editor
• preview for the preview mode (i.e. the ctrl+shift+v mode)
• split for the split editor (i.e. the ctrl+k v mode)

From the behavior of the UI it seems to me that the split editor is currently not a real standalone mode, but that ctrl+k v is merely a shortcut for manually splitting the editor and switching the second editor view to preview mode. This means that opening a Markdown file directly in split editor may require some rework (e.g. what should happen when opening several Markdown files).

To achieve a "quick win" within a limited budget, it would be possible to first implement the source and preview values of the markdown.defaultView setting and add a split setting later. That would not break the compatibility of existing configurations.

Of course I'd love to have a hotkey for switching directly from preview to split edtor, but having a markdown.defaultView setting alone would already be a huge improvement for my daily work.

[bpasero]

I think the best solution is to show both text and preview at the same time in one editor in the same way you can diff a file from git view to see original and modified. This has obvious advantages:

• it is up to you if you want to see the text, preview or both at the same time depending on how you arrange the thing (setting would get persisted)
• starting to edit is as simple as clicking some edit button to bring the text to the side of the preview without having to open an additional editor
• you dont have to manage 2 editors for the same thing

[ghost]

@bpasero You would, however, lose the ability to decide whether the preview is shown on the left or the right of the source.

Double clicking in the preview to make the source cursor jump to the corresponding location would probably be helpful.

[bpasero]

Well we could still allow to swap the positions of source/preview.

[houkdr1]

I would also like to throw in support for an option to enable split screen previewing of Markdown files by default.

[asphub]

Open Markdown links inside the preview Pane within the pane itself, Now it is opening as a new tab and it opens .md as source file. Please fix this problem, this will be great for documentation.

[binaryben]

To me, the current behaviour seems strange given that a single click on a file is supposed to be a "preview" and a double click is required to keep it in a persistent tab. With the current single click v. double click behaviour, I'd prefer that the preview results in an actual preview (using whatever the relevant CSS is as well). I can double click if I need to edit it, but as said above, most of the time I will be reading.

[hardmagnett]

I think the best solution is something like this editor
https://typora.io/

Now I'm using Typora, but it is annoying to switch from IDE to markdown editor.

It would be cool if Visual Studio Code can work with markdown syntax like in example.

P.S. It also has simple switch by shortcut from editor mode to reader mode.

[Astrantia]

Typora is indeed a great experience. Could we implement something like it in VSCode?

[mjbvz]

VS Code is very much focused on being a great code editor, so I'm not in favor of adding any WYSIWYG editor features that hide the underlying source (even if it is simple to switch back to the source). If you want a great Typora-style editing experience, use Typora :)

---

Back on the original issue. With #27983 in 1.21, the markdown preview now dynamically updates to show the current markdown file. That means you only have to open the preview once per session. Hopefully we'll soon have markdown previews that restore when you restart vscode as well.

This issue seems to be tracking a few different scenarios, so I'd like to understand which ones you all are most interested in:

1. When I open a markdown file, vscode should automatically open the markdown preview to the side of it (eliminating the open preview to side step)

2. A markdown editor and its preview should be a single split editor, like vs code's diff view.

3. A markdown editor and its preview should be a single editor, and I can quickly switch back and forth between them. (Right now an editor and its preview are two separate editor tabs. This would instead have a single tab)

4. When I open a markdown file, I really want to open the preview instead of the source

5. Something else?

Most of these are not really possible using existing VS Code APIs but it would be helpful for me to understand which functionality is the most interesting

[binaryben]

3 & 4 for me. Let me elaborate on my ideal UX:

I do want to retain the option of being able to see both source and preview side by side, as it is helpful in some situations. But most of the time, I'd prefer to open a markdown file and see the preview (and just the preview). I'm probably reading it as others have discussed above, so scenario 4 is most relevant here. Please add a setting that lets users choose whether markdown files are automatically opened in preview or source mode.

I note that if you open a markdown file, open the preview, then close the source - there is a button to open the source again. So most of the functionality is ready to go, it just needs the option to jump straight to the preview instead of the source.

Once that is implemented, I'd then like to be able to quickly switch to the source code in the same tab if I find a typo or simple issue that needs a quick edit (scenario 3), without having to launch a new tab (or even a new split if I don't already have one open). Having to open a new split feels clunky to me. I also try to keep my splits organised by file type personally. So I might have all documentation in one split, frontend code in another, and backend in the third split. The current setup makes this difficult to achieve.

---

Further Thoughts

To be totally honest, I would also love VSCode to go even further and emulate the Typora experience when it comes to markdown files as well, and allow users to edit the file directly in the preview. At the very least, it would be great if the plugin system was altered to let an extension achieve that. However I do understand and accept the reasons for not doing either of those things (keep the extension system easy to use, and VSCode is for code not text).

For scenario 1 though, there is an extension that does that already. I also can see that being a feature that users would either love or hate, and I suspect more will hate it than love it (see the download numbers of the extension currently for context). In comparison, most people are likely to be reading markdown files - so opening direct to preview only will probably be welcomed.

For scenario 2 - maybe I need to see a mockup to better understand what is being suggested - but the various ways I can imagine it being implemented would make readability a nightmare.

[crper]

such as mark text live preview , that's great

[RandomGHUser]

This definitely needs some attention to make VSCode a better MD viewer and editor.

Preview and editor should have the ability to be linked in a single pane tab; the default open mode should be configurable (preview only/edit only/or both).

Also, as VSCode already allows double clicking on the preview to edit the source in the same pane tab, there should be a vice-versa (icon and/or context menu item) to return to preview mode in the same pane tab, not the current "open preview to the side" which gets clunky and causes pane management hassles, or the Ctrl-Shift-V preview shortcut which creates a new tab, which causes tab management hassles.

If the "Markdown:Open Preview" shortcut is required to stay the same, at least have a single MD shortcut that will toggle between preview and source tabs, instead of having to press CTRL-SHIFT-V then pressing Alt Left and Right.

[binaryben]

@3nuc, potentially. I'd be very hyped if users could make extensions that open files using custom webviews in the main editing area. In theory, that could allow a typora-like extension to be made for those who prefer the edit and semi-preview in the same view option. But I think they would like to stop it becoming too open so I'm not holding out hope yet.

[mjbvz]

I have checked in prototype that allows you to set the markdown preview as the default editor: #84520 We are looking for the community to drive the testing and polishing of this feature so that it can ship, so please follow up on #84520 if you wish to contribute

[niccolomineo]

Please add the possibility to in-place switch between the markdown source and preview in one panel.

[xuoutput]

How to set off automatic preview of markdown files.

[huahuayu]

Please give an option to NOT automatic preview of markdown files.

[huahuayu]

@gjsjohnmurray you made a dead loop for mention #91251 , it doesn't solve the problem
@xuoutput if you know how to disable auto preview please share the method.

[Benjin]

I think there's a third option to consider as well: Sublime Text's markdown handling. Sublime decorates your text (including the markdown syntax) with how it's stylized, which makes it very easy to confirm your formatting.

I am adamantly against Typora's experience because when writing markdown it's extremely important to not hide the markdown annotations. As soon as you do that, it becomes difficult to edit and we may as well just be writing things in RTF which is exactly what MD is meant to take us away from. Microsoft Teams uses WYSIWYG, and it's miserable to change the formatting because it's guessing where each decoration block begins and ends.

A split view (RES-style) is more flexible than what Sublime affords but also doesn't hide the markdown. Anything but WYSIWYG/Typora, please.

[aisbergde]

I also thought that VSC is to blame for the automatic preview, which drives me crazy. Then I turned off all extensions, but the preview still came.

But after restarting VSC, the preview didn't come back.

Finally I found - it is the "Markdown All in One" extension which enables the automatic markdown preview.

[huahuayu]

@aisbergde I don't use markdown all in one, but it still automatic preview markdown

[aisbergde]

@huahuayu Then I can only suggest to disable all extensions, to restart VSC and to check. This is how I found that an extension causes the issue. Maybe in your case it is another extension.

[jeon3029]

@huahuayu in my case the package "Auto-Open Markdown Preview" was the problem.
After disable this package, my auto opening preview issue was solved.

[Towkin]

I too had the problem that the preview as automatically opened, even with all extensions turned off. The issue in my case was that this configuration in settings.json:

    "workbench.editorAssociations": [
        {
            "viewType": "vscode.markdown.preview.editor",
            "filenamePattern": "*.md"
        }
    ],

Not sure when or how I added that, I reckon I must've accidentally selected to associate it somehow. Hope this helps someone!

[lramos15]

Here's a gif that demonstrates how to do exactly what is suggested above. Excuse the link as it was too large for github

https://s6.gifyu.com/images/recordinga1cc2edb37532e9b.gif

[wenfangdu]

@lramos15 If I understand correctly, the gif only showed the config for auto-activating markdown.showPreview, but no config for auto-activating markdown.showPreviewToSide?

[lramos15]

@lramos15 If I understand correctly, the gif only showed the config for auto-activating markdown.showPreview, but no config for auto-activating markdown.showPreviewToSide?

@wenfangdu That is true, this issue has grown so much that I was trying to understand all the asks. I was going off Matt's comment here #2766 (comment) and the person after said 3 & 4. I can re-open the feature request as what you said is the thing that is missing.

[wenfangdu]

@lramos15 Please reopen it 🙏.

[diminutivesloop]

I too had the problem that the preview as automatically opened, even with all extensions turned off. The issue in my case was that this configuration in settings.json:

    "workbench.editorAssociations": [
        {
            "viewType": "vscode.markdown.preview.editor",
            "filenamePattern": "*.md"
        }
    ],

Not sure when or how I added that, I reckon I must've accidentally selected to associate it somehow. Hope this helps someone!

This solution is very close to being perfect however it breaks the diff view. Instead of showing a rich preview diff or a source diff it just shows a split preview with no markings for the changes.

[starball5]

Related on Stack Overflow: How can I automatically open Tex/PDF/Markdown previews side-by-side with the markup when opening the source file in VS Code?

[emanuel-v-r]

Any news on this? Automatic side by side preview would be nice to have. There's this extension with a lot of downloads only for that https://marketplace.visualstudio.com/items?itemName=hnw.vscode-auto-open-markdown-preview